AJAX原理解析与兼容方法封装

• AJAX常用参数
• AJAX对象兼容
• AJAX对象方法与属性
• AJAX封装兼容方法源码

AJAX全称Asynchronous JavaScript and XML（异步的JavaScript与XML），最初的AJAX传输的数据格式采用的是XML，所以这也就是AJAX名称的由来，后来由于技术的发展JSON更被接受，现在的AJAX传输数据格式改用的都是JSON格式。其实最初的浏览器并不支持AJAX技术，这些与需求安全技术等等因素相关，这里就不太深入的赘述，值得关注的是AJAX本身实质上就是HTTP网络访问协议通过浏览器内核暴露的接口，通过AJAX对象可以由用户主动通过调用对象的相关方法发起网络请求，浏览器并且会对发起的网络请求进行监听，实现AJAX响应机制。而且AJAX还可以主动添加HTTP报文头，实现多样的网络请求。

 一、AJAX常用参数

1. HTTP请求方法(method)：GET、HEAD、POST、PUT、TRACE、OPTIONS、DELETE和Web扩展方法[LOCK、MKCOL、COPY、MOVE]。这些方法不一定都能被正常使用，需要看具体的网络服务程序是否实现。常用的方法就是GET和POST。

2. HTTP请求URL： 请求资源的路径。

3. HTTP请求的主体部分：（data）通常描述的数据，由请求方发送给接受方的数据（我封装的方法中采用的是接收键值对(对象)形式的数据，内部处理成字符串拼接的处理方式）。

4. 浏览器采用异步或同步发送请求（flag/async）：true表示异步，false表示同步。

5. 请求响应的回调方法：callback。由具体AJAX请求事件实现。

 二、AJAX对象兼容

AJAX最先被应用到浏览器中的是微软实现的，所以在IE5和IE6中的AJAX对象是ActiveXObject，后来由W3C规范统一为XMLHttpRequest。下面是兼容代码：

var  xhr = null ;
if(window.XMLHttpRequest) {
    //创建除IE以外的ajax对象 --- code f for IE7+, Firefox, Chrome, Opera, Safari
    xhr = new XMLHttpRequest() ;
}else{
    //创建IE的ajax对象 --- code for IE6, IE5
    xhr = new ActiveXObject("Microsoft.XMLHttp");
}

 三、AJAX方法与属性

 1. xhr.open(method,url,async);用来初始化请求对象的请求。

 2. xhr.send(string);将请求发送给接受方，其参数只适应post方法的请求，传入的是请求报文的主体（数据）。其他请求方法将数据拼接在URL后面。

//GET请求方法
xhr.open('GET',url+'?'+data,flag);
xhr.send();
//POST请求方法
xhr.open(method,url,flag);
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xhr.send(data);
//data格式
"name='xiaoming'&sex='man'"

3. xhr.setRequestHeader(header,value);给HTTP请求报文添加头部字段，参数1：头部名称；参数2：头部的值。这里添加的传输主体（data）发送到服务器之前应该如何对数据进行编码。示例中的application/x-www-form-urlencoded编码类型的发送和接收，窗体数据被编码为名称/值对。还有application/json的发送和接收，表示窗体数据被编码为JSON字符串。multipart/form-data的发送和接收，表示窗体数据被编码为文件编码格式（适应文件、图片等传输）。HTTP头部还有其他很多属性，Content-type数据编码格式也还有其他的格式，就不在这里一一列举了。

4. xhr.onreadystatechange是AJAX请求响应监听事件，每当xhr.readyState的属性值发生改变时就会被触发一次。

5. xhr.readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

• 0: 请求未初始化
• 1: 服务器连接已建立
• 2: 请求已接收
• 3: 请求处理中
• 4: 请求已完成，且响应已就绪

 6. xhr.status表示HTTP响应的状态码。

• 200: （OK）表示请求成功，所请求的数据都在响应主体中。（200~299）
• 401: （Unauthorized）表示未授权，需要输入用户民和密码。
• 404: （Not Found）表示未找到执行的资源，也就是说请求的资源在服务器中没有找到。
• 300~399: 重定向，已定义的范围（300~305）。
• 400~499: 客户端错误,已定义的范围（400~415）。
• 500~599: 服务器出错,已定义的范围（500~505）。

 7. xhr.responseText获取字符串形式的响应数据。

 8. xhr.responseXML获取XML形式的响应数据。

 四、AJAX兼容方法封装源码

 

function ajaxFunc(method,url,data,callback,flag){
    //参数：method(提交请求方法)：get、post；
    //         url(提交地址)：服务器地址；
    //         data(提交数据)：采用Object数据类型，当get请求模式时转换为字符串拼接形式，当post请求模式时转换为JSON数据格式；
    //         callback(处理服务器响应数据的方法)；
    //         flag(异步还是同步提交)：true(异步)、false(同步)；

    //创建一个ajax对象
    let xhr = null;
    if(window.XMLHttpRequest){
        //  创建除IE以外的ajax对象 -- code f for IE7+, FireFox, Chrome, Opera, Safari
        xhr = new XMLHttpRequest();
    }else{
        // 创建兼容IE的ajax对象 -- code for IE6, IE5
        xhr = new ActiveXObject("Microsoft.XMLHttp");
    }
    //将get、post转成大写
    method = method.toUpperCase();
    //发起ajax请求
    if(method === 'GET'){
        //将dta的JSON格式数据转换拼接成可直接提交的字符串形式
        data = (function(data){
            let httpText = "";
            if(!data){
                return null;
            }
            for(let temp in data){
                httpText = httpText + (temp + '=' + data[temp] + '&');
            }
            return httpText;
        })(data);
        //发起GET方法的请求
        xhr.open(method, url + '?' + data, flag);
        xhr.send(null);
    }else if(method === 'POST'){
        //发起POST方法的请求
        xhr.open(method, url, flag);
        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
        xhr.send(JSON.stringify(data));
    }
    //监听物理信息
    xhr.onreadystatechange = function(){
        // 监听到readystate=4时
        // 解析服务器返回的responseText数据
        if(xhr["readyState"] === 4){
            //判断响应状态是否为200--表示请求成功响应
            if(xhr["status"] === 200){
                callback(xhr["responseText"]);
            }
        }
    }
}