原生js封装ajax

为什么要封装ajax？

答：一个网页里面会发送很多的ajax请求 而且所有的ajax的代码几乎一样，也就那五步个骤（上文已经讲过），所以将ajax封装需要用的时候直接调用，节省代码时间。

首先我们知道需要传的参数都有什么：

①请求方式：type。

②请求路径：url。

③传入的值/数据：data。

④成功之后接受返回体：success。

⑤返回体的数据类型：dataType。

进行封装：

第一步创建请求对象：

var xhr = new XMLHttpRequest();
           

第二步判断是否为get方式，是则进行值得拼接:

if(params.type == "get") {
                params.url += "?" + params.data;
            }
           

第三步调用open方法：

xhr.open(params.type, params.url)

第四步在判断是否为post请求方式，是则设置表头再发送请求且传值：

if(params.type  == "get") {
                xhr.send();
            } else {
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xhr.send(params.data);
            }

           

第五步监听响应完成事件：

xhr.onreadystatechange = function() {
                if(xhr.readyState == 4 && xhr.status == 200) {
                    var res = xhr.responseText;
                    // 判断数据类型是json字符串还是语言
                    if(params.dataType == "json") {
                     // 将数据转换为对象
                        res = JSON.parse(res);
                    } else if(params.dataType == "XML") {
                        // 创建转换对象
                        var parser = new DOMParser();
                        // 对XML数据进行转换
                        res = parser.parseFromString(res, "text/xml");
                    } else {
                        res = xhr.responseText;
                    }

           

第六步请求完成：

params.success(res);
           

封装完成：

OVERRRRRRRR！