基本的封装-Ajax之一

4/25/2011来源:Ajax教程人气:7456

Ajax,或许已经是老掉牙的话题。我学习总结一下。大概会有6篇,从基本的Ajax直至高级的应用。最后会形成一个实用的Ajax工具库。


创建一个基本的Ajax应用不需要太多的代码,大概三个步骤,几十行代码即可。

1,创建Ajax的核心对象xmlHttPRequest

因为浏览器之间的不兼容,IE7之前的版本并没有原生的xmlhttpRequest对象却实现为ActiveX对象。
互联网及各种书籍中有着多种创建方式,有的复杂很多行代码,有的则简洁很少代码。当然复杂的考虑的情形更多一些。如下几乎将IE中所有的情况都考虑到了

01 function cretaeXHR(){
02     try{ return new XMLHttpRequest();}catch(e){}
03     try{ return new ActiveXObject('Msxml2.XMLHTTP.6.0');}catch(e){}
04     try{ return new ActiveXObject('Msxml2.XMLHTTP.4.0');}catch(e){}
05     try{ return new ActiveXObject('Msxml2.XMLHTTP.3.0');}catch(e){}
06     try{ return new ActiveXObject('Msxml2.XMLHTTP');}catch(e){}
07     try{ return new ActiveXObject('MSXML3.XMLHTTP');}catch(e){}
08     try{ return new ActiveXObject('MSXML.XMLHTTP');}catch(e){}
09     try{ return new ActiveXObject('Microsoft.XMLHTTP');}catch(e){}
10     try{ return new ActiveXObject('MSXML2.ServerXMLHTTP');}catch(e){}
11     return null;
12 }

代码较少的采用对象特性判断,

1 var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

我在这里采用精简方式,暂不考虑创建异常的情况。


2,发送请求 

1 xhr.open
2 xhr.send

3,处理响应

1 xhr.onreadystatechange = function(){
2     if(xhr.readyState == 4){
3         if(xhr.status == 200){//当然你可以把200~300之间或304的都理解成响应成功
4             //callback
5         }
6     }
7 }

嗯,到这里没什么特别的,所有的书籍上都是这么几个步骤来着。对于初学者来说,要将这几个步骤很好的封装一下形成一个良好的模块还是很困难的。全局变量满天飞不知道怎么去组织代码,初学者开始都是这样的。现在想想是对一门语言没有足够的掌握,尤其是闭包。

这里采用 单例模式 封装成一个对象,即只有一个全局的变量将其赋值给Ajax,该对象有一个request方法。request有两个参数,第一个为请求的url(必要的),字符串类型,第二个opt为配置参数(可选的),对象类型。结果处理使用内部私有的_onStateChange函数。

完整代码如下

01 /**
02  * 执行基本ajax请求,返回XMLHttpRequest
03  * Ajax.request(url,{
04  *      async   是否异步 true(默认)
05  *      method  请求方式 POST or GET(默认)
06  *      data    请求参数 (键值对字符串)
07  *      success 请求成功后响应函数,参数为xhr
08  *      failure 请求失败后响应函数,参数为xhr
09  * });
10  *
11  */
12 Ajax = 
13 function(){
14     function request(url,opt){
15         function fn(){}
16         var async   = opt.async !== false,
17             method  = opt.method    || 'GET',
18             data    = opt.data      || null,
19             success = opt.success   || fn,
20             failure = opt.failure   || fn;
21             method  = method.toUpperCase();
22         if(method == 'GET' && data){
23             url += (url.indexOf('?') == -1 ? '?' : '&') + data;
24             data = null;
25         }
26         var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
27         xhr.onreadystatechange = function(){
28             _onStateChange(xhr,success,failure);
29         };
30         xhr.open(method,url,async);
31         if(method == 'POST'){
32             xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;');
33         }
34         xhr.send(data);
35         return xhr; 
36     }
37     function _onStateChange(xhr,success,failure){
38         if(xhr.readyState == 4){
39             var s = xhr.status;
40             if(s>= 200 && s < 300){
41                 success(xhr);
42             }else{
43                 failure(xhr);
44             }
45         }else{}
46     }
47     return {request:request};   
48 }();

如下请求后台的一个servlet,发送参数name=jack,age=20,默认使用异步,GET方式

01 Ajax.request('servlet/ServletJSON',{
02         data : 'name=jack&age=20',
03         success : function(xhr){
04             //to do with xhr
05         },
06         failure : function(xhr){
07             //to do with xhr
08         }
09     }
10 );

以上是一个简单封装,用了不到40行的代码。这里的请求参数data只能是键值字符串,有时候希望可以JS对象,以便可以更灵活的传参,下一篇将从改善请求参数开始。