据说每个大牛、小牛都应该有自己的库——Ajax

蹉跎到今天终于要写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);
            }
        });

看起类不错，不过没实际使用过呢还，希望大家多给意见。