基本的封装-Ajax之一

2019-11-17 03:36:30

字体：大中小

来源：转载

供稿：网友

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

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

1，创建Ajax的核心对象xmlHttPRequest

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

01function 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，处理响应

1xhr.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 */
12Ajax =  
13function(){ 
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方式

01Ajax.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对象，以便可以更灵活的传参，下一篇将从改善请求参数开始。