基本的封装-Ajax之一

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

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

　　1，创建Ajax的核心对象xmlHttPRequest

　　因为浏览器之间的不兼容，IE7之前的版本并没有原生的xmlhttpRequest对象却实现为ActiveX对象。

　　互联网及各种书籍中有着多种创建方式，有的复杂很多行代码，有的则简洁很少代码。当然复杂的考虑的情形更多一些。如下几乎将IE中所有的情况都考虑到了

　　view sourceprint?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 }

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

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

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

　　2，发送请求

　　view sourceprint?1 xhr.open

　　2 xhr.send

　　3，处理响应

　　view sourceprint?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函数。

　　完整代码如下

　　view sourceprint?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方式

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

　

评论总数：0 条 [ 查看全部 ] 网友评论