随机文章

文章分类

站点统计

  • 分类总数: 13 个
  • 文章总数: 145 篇
  • 评论总数: 35 条
  • 附件总数: 59 个
  • 建站日期: 2008-08-18
  • 访问总数: 388498 人次
  • RSS订阅: 文章|评论

最新评论

赞助商

友情链接

小巧独立的Javascript库(5):Ajax.js

KY8 于 2009-03-01 16:56:51 发表JavaScript

订阅: http://www.kaiyuan8.org/Feed/Article_143.aspx
引用: 点这里获取地址 (UTF-8)
小巧独立的Javascript库(4):subModal.js < 小巧独立的Javascript库(5):Ajax.js > 小巧独立的Javascript库(6):jsTree.js

1、MicroAjax.js

MicroAjax is one of the smallest and easiest AJAX libraries. Usage:

  1. microAjax("/resource/url", function (res) { 
  2.   alert (res); 
  3. });

Download:trunk version (svn)  minified version (841 byte)

Help:FAQ

  1. > 
  2.  
  3. <html lang="en"> 
  4. <head> 
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  6.         <title>microajax testtitle> 
  7.         <meta name="author" content="Stefan Lange-Hegermann"> 
  8. <script type="text/javascript"> 
  9. function microAjax(url, callbackFunction) 
  10. { 
  11.         this.bindFunction = function (caller, object) { 
  12.                 return function() { 
  13.                         return caller.apply(object, [object]); 
  14.                 }; 
  15.         }; 
  16.  
  17.         this.stateChange = function (object) { 
  18.                 if (this.request.readyState==4) 
  19.                         this.callbackFunction(this.request.responseText); 
  20.         }; 
  21.  
  22.         this.getRequest = function() { 
  23.                 if (window.ActiveXObject) 
  24.                         return new ActiveXObject('Microsoft.XMLHTTP'); 
  25.                 else if (window.XMLHttpRequest) 
  26.                         return new XMLHttpRequest(); 
  27.                 return false; 
  28.         }; 
  29.  
  30.         this.postBody = (arguments[2] || ""); 
  31.  
  32.         this.callbackFunction=callbackFunction; 
  33.         this.url=url; 
  34.         thisthis.request = this.getRequest(); 
  35.          
  36.         if(this.request) { 
  37.                 var req = this.request; 
  38.                 req.onreadystatechange = this.bindFunction(this.stateChange, this); 
  39.  
  40.                 if (this.postBody!=="") { 
  41.                         req.open("POST", url, true); 
  42.                         req.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); 
  43.                         req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); 
  44.                         req.setRequestHeader('Connection', 'close'); 
  45.                 } else { 
  46.                         req.open("GET", url, true); 
  47.                 } 
  48.  
  49.                 req.send(this.postBody); 
  50.         } 
  51. } 
  52. script> 
  53. head> 
  54. <body> 
  55.         <h1>testing microajaxh1> 
  56.         <p> 
  57.                 microajax is a very small AJAX library (actually it's just a function) and does nothing, but request an URL from a server. 
  58.         p> 
  59.         
  60.         <table> 
  61.         <tr><th>Functionth><th>resultth>tr> 
  62.         <tr><td>gettd><td><span id="test_area1">RUNNINGspan>td>tr> 
  63.         table> 
  64.         
  65.         <script type="text/javascript"> 
  66.                 
  67.                 function $(e) { 
  68.                         return (typeof e==="string" ? document.getElementById(e) : e); 
  69.                 } 
  70.                 
  71.                 window.addEventListener('load', function() { 
  72.                         microAjax('test.txt', function(result) { 
  73.                                 $('test_area1').innerHTML=(result.substr(0,3)=="ABC" ? 'PASS' : 'FAIL'); 
  74.                         }); 
  75.                 }, false); 
  76.                 // --> 
  77.         script> 
  78.         <script type="text/javascript" src="microajax.js">script> 
  79. body> 
  80. html> 

2、jx - JavaScript Ajax Library

jx is a small toolkit for providing AJAX support in JavaScript. It has two different version - jx and jxs.

Features

  • Supports GET method
  • Supports JSON.
  • Small Size (>1 KB compressed / 2.3 KB with all the comments)
  • Very easy to use.

 

  1. //V3.01.A - http://www.openjs.com/scripts/jx/ 
  2. jx = { 
  3.     //Create a xmlHttpRequest object - this is the constructor.  
  4.     getHTTPObject : function() { 
  5.         var http = false; 
  6.         //Use IE's ActiveX items to load the file. 
  7.         if(typeof ActiveXObject != 'undefined') { 
  8.             try {http = new ActiveXObject("Msxml2.XMLHTTP");} 
  9.             catch (e) { 
  10.                 try {http = new ActiveXObject("Microsoft.XMLHTTP");} 
  11.                 catch (E) {http = false;} 
  12.             } 
  13.         //If ActiveX is not available, use the XMLHttpRequest of Firefox/Mozilla etc. to load the document. 
  14.         } else if (window.XMLHttpRequest) { 
  15.             try {http = new XMLHttpRequest();} 
  16.             catch (e) {http = false;} 
  17.         } 
  18.         return http; 
  19.     }, 
  20.      
  21.     // This function is called from the user's script.  
  22.     //Arguments -  
  23.     //  url - The url of the serverside script that is to be called. Append all the arguments to  
  24.     //          this url - eg. 'get_data.php?id=5&car=benz' 
  25.     //  callback - Function that must be called once the data is ready. 
  26.     //  format - The return type for this function. Could be 'xml','json' or 'text'. If it is json,  
  27.     //          the string will be 'eval'ed before returning it. Default:'text' 
  28.     //  method - GET or POST. Default 'GET' 
  29.     load : function (url,callback,format,method, opt) { 
  30.         var http = this.init(); //The XMLHttpRequest object is recreated at every call - to defeat Cache problem in IE 
  31.         if(!http||!url) return; 
  32.         //XML Format need this for some Mozilla Browsers 
  33.         if (http.overrideMimeType) http.overrideMimeType('text/xml'); 
  34.  
  35.         if(!method) method = "GET";//Default method is GET 
  36.         if(!format) format = "text";//Default return type is 'text' 
  37.         if(!opt) opt = {}; 
  38.         format = format.toLowerCase(); 
  39.         method = method.toUpperCase(); 
  40.          
  41.         //Kill the Cache problem in IE. 
  42.         var now = "uid=" + new Date().getTime(); 
  43.         url += (url.indexOf("?")+1) ? "&" : "?"; 
  44.         url += now; 
  45.  
  46.         var parameters = null; 
  47.  
  48.         if(method=="POST") { 
  49.             var parts = url.split("\?"); 
  50.             url = parts[0]; 
  51.             parameters = parts[1]; 
  52.         } 
  53.         http.open(method, url, true); 
  54.  
  55.         if(method=="POST") { 
  56.             http.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
  57.             http.setRequestHeader("Content-length", parameters.length); 
  58.             http.setRequestHeader("Connection", "close"); 
  59.         } 
  60.  
  61.         var ths = this;// Closure 
  62.         if(opt.handler) { //If a custom handler is defined, use it 
  63.             http.onreadystatechange = function() { opt.handler(http); }; 
  64.         } else { 
  65.             http.onreadystatechange = function () {//Call a function when the state changes. 
  66.                 if (http.readyState == 4) {//Ready State will be 4 when the document is loaded. 
  67.                     if(http.status == 200) { 
  68.                         var result = ""; 
  69.                         if(http.responseText) result = http.responseText; 
  70.                         //If the return is in JSON format, eval the result before returning it. 
  71.                         if(format.charAt(0) == "j") { 
  72.                             //\n's in JSON string, when evaluated will create errors in IE 
  73.                             result = result.replace(/[\n\r]/g,""); 
  74.                             result = eval('('+result+')'); 
  75.  
  76.                         } else if(format.charAt(0) == "x") { //XML Return 
  77.                             result = http.responseXML; 
  78.                         } 
  79.  
  80.                         //Give the data to the callback function. 
  81.                         if(callback) callback(result); 
  82.                     } else { 
  83.                         if(opt.loadingIndicator) document.getElementsByTagName("body")[0].removeChild(opt.loadingIndicator); //Remove the loading indicator 
  84.                         if(opt.loading) document.getElementById(opt.loading).style.display="none"; //Hide the given loading indicator. 
  85.                          
  86.                         if(error) error(http.status); 
  87.                     } 
  88.                 } 
  89.             } 
  90.         } 
  91.         http.send(parameters); 
  92.     }, 
  93.     bind : function(user_options) { 
  94.         var opt = { 
  95.             'url':'',           //URL to be loaded 
  96.             'onSuccess':false,  //Function that should be called at success 
  97.             'onError':false,    //Function that should be called at error 
  98.             'format':"text",    //Return type - could be 'xml','json' or 'text' 
  99.             'method':"GET",     //GET or POST 
  100.             'update':"",        //The id of the element where the resulting data should be shown.  
  101.             'loading':"",       //The id of the loading indicator. This will be set to display:block when the url is loading and to display:none when the data has finished loading. 
  102.             'loadingIndicator':"" //HTML that would be inserted into the document once the url starts loading and removed when the data has finished loading. This will be inserted into a div with class name 'loading-indicator' and will be placed at 'top:0px;left:0px;' 
  103.         } 
  104.         for(var key in opt) { 
  105.             if(user_options[key]) {//If the user given options contain any valid option, ... 
  106.                 opt[key] = user_options[key];// ..that option will be put in the opt array. 
  107.             } 
  108.         } 
  109.          
  110.         if(!opt.url) return; //Return if a url is not provided 
  111.  
  112.         var div = false; 
  113.         if(opt.loadingIndicator) { //Show a loading indicator from the given HTML 
  114.             div = document.createElement("div"); 
  115.             div.setAttribute("style","position:absolute;top:0px;left:0px;"); 
  116.             div.setAttribute("class","loading-indicator"); 
  117.             div.innerHTML = opt.loadingIndicator; 
  118.             document.getElementsByTagName("body")[0].appendChild(div); 
  119.             this.opt.loadingIndicator=div; 
  120.         } 
  121.         if(opt.loading) document.getElementById(opt.loading).style.display="block"; //Show the given loading indicator. 
  122.          
  123.         this.load(opt.url,function(data){ 
  124.             if(opt.onSuccess) opt.onSuccess(data); 
  125.             if(opt.update) document.getElementById(opt.update).innerHTML = data; 
  126.              
  127.             if(div) document.getElementsByTagName("body")[0].removeChild(div); //Remove the loading indicator 
  128.             if(opt.loading) document.getElementById(opt.loading).style.display="none"; //Hide the given loading indicator. 
  129.         },opt.format,opt.method, opt); 
  130.     }, 
  131.     init : function() {return this.getHTTPObject();} 
  132. } 
被阅646次, 0票 投一票Ajax
  • 看完了要说点啥么？
  • 昵称 (不填说不了话)
  • 信箱地址 (不会被公开，但是不填也说不了话)
  • 网址 (这个不填也成)
Powered by MiniBoke v2.0.0.8 Build 0828

Copyright © 2008 开源吧！. All rights reserved.

粤ICP备07500939号