基本的封装Ajax之一

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

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：空间域名、虚拟主机、营销软件、网站建设、萍乡网站维护、网站推广。

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

1，创建Ajax的核心对象XMLHttpRequest

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

 
 
 
  
  
  function cretaeXHR(){  
  
  
  try{ return new XMLHttpRequest();}catch(e){}  
  
  
  try{ return new ActiveXObject('Msxml2.XMLHTTP.6.0');}catch(e){}  
  
  
  try{ return new ActiveXObject('Msxml2.XMLHTTP.4.0');}catch(e){}  
  
  
  try{ return new ActiveXObject('Msxml2.XMLHTTP.3.0');}catch(e){}  
  
  
  try{ return new ActiveXObject('Msxml2.XMLHTTP');}catch(e){}  
  
  
  try{ return new ActiveXObject('MSXML3.XMLHTTP');}catch(e){}  
  
  
  try{ return new ActiveXObject('MSXML.XMLHTTP');}catch(e){}  
  
  
  try{ return new ActiveXObject('Microsoft.XMLHTTP');}catch(e){}  
  
  
  try{ return new ActiveXObject('MSXML2.ServerXMLHTTP');}catch(e){}  
  
  
  return null;  
  
  
  }

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

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

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

2，发送请求

 
 
 
  
  
  xhr.open  
  
  
  xhr.send

3，处理响应

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

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

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

完整代码如下：

 
 
 
  
  
  /**  
  
  
  * 执行基本ajax请求,返回XMLHttpRequest  
  
  
  * Ajax.request(url,{  
  
  
  * async 是否异步 true(默认)  
  
  
  * method 请求方式 POST or GET(默认)  
  
  
  * data 请求参数 (键值对字符串)  
  
  
  * success 请求成功后响应函数，参数为xhr  
  
  
  * failure 请求失败后响应函数，参数为xhr  
  
  
  * });   
  
  
  */  
  
  
  Ajax =  
  
  
  function(){  
  
  
  function request(url,opt){  
  
  
  function fn(){}  
  
  
  var async = opt.async !== false,  
  
  
  method = opt.method || 'GET',  
  
  
  data = opt.data || null,  
  
  
  success = opt.success || fn,  
  
  
  failure = opt.failure || fn;  
  
  
  method = method.toUpperCase();  
  
  
  if(method == 'GET' && data){  
  
  
  url += (url.indexOf('?') == -1 ? '?' : '&') + data;  
  
  
  data = null;  
  
  
  }  
  
  
  var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');  
  
  
  xhr.onreadystatechange = function(){  
  
  
  _onStateChange(xhr,success,failure);  
  
  
  };  
  
  
  xhr.open(method,url,async);  
  
  
  if(method == 'POST'){  
  
  
  xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;');  
  
  
  }  
  
  
  xhr.send(data);  
  
  
  return xhr;  
  
  
  }  
  
  
  function _onStateChange(xhr,success,failure){  
  
  
  if(xhr.readyState == 4){  
  
  
  var s = xhr.status;  
  
  
  if(s>= 200 && s < 300){  
  
  
  success(xhr);  
  
  
  }else{  
  
  
  failure(xhr);  
  
  
  }  
  
  
  }else{}  
  
  
  }  
  
  
  return {request:request};  
  
  
  }();

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

 
 
 
  
  
  Ajax.request('servlet/ServletJSON',{   
  
  
           data : 'name=jack&age=20',   
  
  
          success : function(xhr){   
  
  
               //to do with xhr   
  
  
          },   
  
  
           failure : function(xhr){   
  
  
               //to do with xhr   
  
  
  }   
  
  
  }   
  
  
  );

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

分享名称：基本的封装Ajax之一
本文URL：http://www.stwzsj.com/qtweb/news22/8722.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容