蹉跎到今天终于要写Ajax部分了，平时工作中除了选择器我用jQuery的最多的就是ajax，所以这部分在自己的框架中必不可少。
XMLHttpRequest
我以为对每个使用过Ajax的人来说XMLHttpRequest对象肯定是如雷贯耳，可是在和公司小伙伴儿的讨论中我意识到，这个对象对有些已经使用Ajax很久的人来说仍然很陌生，jQuery等类库把XMLHttpRequest对象封装的太好了，以至于我们都不知道自己在使用它。关于JavaScript原生的Ajax之前写过一篇Ajax初步理解的博客，为了方便下面书写，在这里再介绍一下几个重点概念。
Ajax的核心是JavaScript对象XmlHttpRequest，这个对象为向服务器发送请求和解析服务器响应提供了流畅的接口。XmlHttpRequest可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。该对象有两个重要方法open与send
调用send()方法，请求被发往服务器，服务器根据请求生成响应（Response），传回给XHR对象，在收到响应后相应数据会填充到XHR对象的属性，有四个相关属性会被填充：
1. responseText：作为响应主体被返回的文本
2. responseXML：如果响应内容的类型是”text/xml”或”application/xml”，这个属性将保存包含着相应数据的XML文档
3. status：响应的HTTP状态（200,404,500等）
4. statusText：HTTP状态说明
XHR对象有一个readyState属性，该属性表示请求/响应过程中的当前活动阶段，每当readyState值改变的时候都会触发一次onreadystatechange事件。
浏览器兼容的创建XHR对象方法
大家都懂得，IE总会制造些麻烦，看看浏览器兼容的创建XHR对象方法，具体过程可以看看Ajax初步理解中的说明
function __createXHR(){ var xhr = null; try { // Firefox, Opera 8.0+, Safari，IE7+ xhr = new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { xhr = null; } } } return xhr; }
封装
其实看看第一段关于XHR对象的说明就明白为什么jQuery等类库会对XHR做如此彻底的封装了，这个对象实在是太复杂了，参数的设置都要有时机问题，所以我也走上了封装之路。
ajax: function(configs) { var settings = { "url": "", //请求地址 "method": "post", //请求使用方法 "user": "", //用户名 "password": "", //密码 "data": null, //参数(text/json) "responseType": "text", //返回值获取方式 text/xml "headers": {}, //自定义的HttpHeader "enableCache":true, //是否使用缓存 "onSucceed": null, //成功句柄 "onClientError": null, //客户端错误句柄 "onServerError": null //服务器端错误句柄 }; for (s in settings) { settings[s] = configs[s] ? configs[s] : settings[s]; //应用自定义配置 } var xhr = _createXHR(); //创建XHR对象 xhr.onreadystatechange = function() { if (xhr.readyState == 4) { //请求完成，响应就绪 var result = settings["responseType"] == "text" ? xhr.responseText : xhr.responseXML; //返回值类型 if (((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) && typeof settings['onSucceed'] == 'function') { //成功 settings['onSucceed'](result, xhr.status); } else if (xhr.status >= 400 && xhr.status < 500) { //客户端出错，404啊神马的 settings['onClientError'](result, xhr.status); } else if (xhr.status >= 500) { //服务器端出错 settings['onServerError'](result, xhr.status); } } } xhr.open(settings['method'], settings['url'], settings['user'], settings['password']); //发送请求 if (typeof settings['headers'] == 'object') { //设置自定义headers var headers = settings['headers']; for (h in headers) { xhr.setRequestHeader(h, headers[h]); } } if(!settings['enableCache']){ //禁用缓存 xhr.setRequestHeader("If-Modified-Since","0"); } if (settings["method"].toLowerCase() == "post") { //post请求 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8"); var data=""; if(typeof settings["data"]=='object') { for(d in settings["data"]){ data+=(d+'='+settings["data"][d]); } }else{ data=settings["data"]; } xhr.send(data); //传递参数 } else { xhr.send(); //get请求 } }
最后
这样一个简单的Ajax封装就完成了，使用的时候和jQuery类似
ssLib.ajax({ "url": "testajax.php", "data":{"name":"Byron"}, "onSucceed": function(result) { alert(result); } });
看起类不错，不过没实际使用过呢还，希望大家多给意见。
本文转自魏琼东博客园博客，原文链接：http://www.cnblogs.com/dolphinX/p/3327187.html，如需转载请自行联系原作者
