原生JS实现AJAX封装

原生JS实现Ajax封装

Ajax可大致分为4个步骤

1. 创建Ajax对象
2. 连接服务器
3. 发送请求
4. 接收返回的数据并进行处理

创建Ajax

由于各个浏览器之间的差异（主要是IE），创建Ajax需要考虑浏览器的兼容。
IE6中实现如下：

var xhr = new ActiveXObject('Microsoft.XMLHttp');

其他浏览器中实现如下：

var xhr = new XMLHttpRequest();

连接服务器

xhr.open(method, url, async);

method:请求方式，有’POST’和’GET’两种。（字符串类型）
url:请求的地址。（字符串类型）
async:是否异步，true为异步，false为同步。

其中url需要根据请求方式的不同传入不同形式的值。如：

xhr.open('POST', 'a.php', true);
xhr.open('GET', 'a.php'+'?'+data, true);

其中data为字符串类型的数据值。

发送请求

xhr.send();

类似，这里也要根据请求方式的不同进行不同的处理。
如果请求方式为GET：

xhr.send();

如果请求方式为POST：

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencode')
xhr.send(data);

接收数据

xhr上有个属性readystate，用来判断请求的状态。其值为状态码（0-4）:
0 = 未初始化，未调用send()方法；
1 = 读取中，已调用send()，正在发送请求；
2 = 已读取，send方法执行完成，接收到全部响应内容；
3 = 交互中，正在解析响应内容；
4 = 完成，响应内容解析完毕；
xhr.onreadystatechange则是用来检测该状态的变化。
xhr.status:返回请求的结果，200为成功。
如果成功请求数据，则请求回的数据会存到xhr.responseText中。

封装

function ajaxFunc (method, url, data, flag, success) {
            var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHttp');
            if (method == "GET") {
                xhr.open(method, url + '?' + data, flag);
                xhr.send();
            }else if (method == "POST") {
                xhr.open(method, url, flag);
                xhr.setResquestHeader('Content-Type', 'application/x-www-form-urlencoded');
                xhr.send(data);
            }
            xhr.onreadystatechange = function () {
                if (xhr.readystate == 4 && xhr.status == 200) {
                    success(xhr.responseText);
                }else {
                    console.log('error');
                }
            }
        }