原生封装一个Ajax请求

原生封装一个Ajax的请求

我们经常使用ajax来进行请求，但是很多时候使用的都是封装后的ajax请求，例如jquery,zepto封装好的$ajax，axios,可能原生使用到的情况很少，所以今天好好的来学习一下如何封装原生的ajax。

其实原生的ajax的核心就是这个——XMLHttpRequest对象，利用这个对象才能就行ajax的传输。

那我们先实例化一个XMLHttpRequest的对象

var xhr = new XMLHttpRequest(); 

这样就可以实例化一个XMLHttpRequest的对象了

xhr主要的几个方法

1.xhr.open(method,url,async)  这个方法主要是与服务器建立连接  

2.xhr.onreadystatechange 这相当于一个回调，当客户端与服务器建立连接的过程中，会不断的返回当前连接的状态和是否成功。

3.xhr.setRequestHeader() 这个方法用来设置请求的头部

4.xhr.send(data) 这个方法用来发送数据到服务器

建立连接的过程中几个readystate值的代表意思

0: 请求未初始化（代理被创建，但尚未调用 open() 方法）
1: 服务器连接已建立（open方法已经被调用）
2: 请求已接收（send方法已经被调用，并且头部和状态已经可获得）
3: 请求处理中（下载中，responseText 属性已经包含部分数据）
4: 请求已完成，且响应已就绪（下载操作已完成）

封装ajax

我们把ajax封装成一个单例的对象里面有对应的方法

get 请求get的时候用到的方法
post 请求post的时候用到的方法
common 通用的方法 post和get 通用的请求方法
dataChange 将data转换成字符串

var ajax = {
    dataChange：function(){},
    common: function(){},
    get:function(){},
    post:function(){}
}  

这个单例里面有个4个方法

dataChange: function (data) { // 将 data 转成字符串
        if (!data) return "";
        if (typeof data != "object") {
            console.error("data must be object");
            return;
        }
        var str = "";
        Object.keys(data).forEach(function (ele, index, arr) {
            if (index == 0) str = str + "?" + ele + "=" + data[ele];
            else str = str + "&" + ele + "=" + data[ele];
        })
        return str;
}, 

之前说过，post请求的时候需要把data转化成类似于“?name=tom&age=123”模式，所以dataChange的主要作用就是转换字符串

common: function (method, url, data, cb) {
        var data = data || "";
        var toLower = method.toLowerCase();
        var xhr = new XMLHttpRequest();
        data = this.dataChange(data);
        if (toLower == "get") url = url + data;

        xhr.open(method, url, false);

        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) { // 成功的话
                cb(xhr.response);
            }
        };

        xhr.setRequestHeader("Content-Type", "application/json");

        if (toLower == "get") {
            xhr.send();
        } else if (toLower == "post") {
            xhr.send(data);
        } else {
            console.log("method is not correct");
            return;
        }

    },

请求的通用方法，对方法,url,传输的数据之类进行了封装

get: function (url, data, cb) {
    this.common("GET", url, data, cb);
},
post: function (url, data, cb) {
    this.common("POST", url, data, cb);
} 

直接调用common通用方法，将method进行替换

基本上一个简单的封装就这样做好了，我们大部分的时候不会用到直接原生调用的情况，但是我们还是要知道原理，这样无论是遇到问题或者面试的时候才能比较从容。