全面讲解原生js的AJAX请求以及写法封装

原生ajax写法-原生ajax请求-原生ajax实例

AJAX

下面是来自百度百科的理解：

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

说话的方式简单点：就是Browser和Server之间通信的一种方式，发送以及请求数据的一种方式。

在AJAX出现之前：用户每次与server进行一次交互都需要进入一个新的页面。例如用户点击下一页按钮，会直接跳转页面，用户明明只需要一部分的数据，确需要重新向server请求整个页面的数据，那么很多数据是重复的相同的，造成了不必要的带宽浪费，对server压力也大。

AJAX 出现之后：用户点击下一页按钮，发起AJAX请求，只需要获取第二页的数据，然后修改页面局部的视图，OVER。其最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX优点：

1.无刷新更新数据。
无需重载整个页面，按需请求部分数据，节约带宽，减少服务器压力。
2.异步与服务器通信。
不会打断用户操作，有些用户只需要首屏的搜索功能，就不必等到页面全部加载完成。
提升浏览器渲染体验，用户会在server响应数据之前看到整个页面的大概框架以及结构。

其实目的也是为了体验好!体验好!体验好!

AJAX缺点：

1.浏览器的收藏功能在某些情况使用不便（用户想收藏第二页数据时）。浏览器的后退功能在某些情况使用不便（用户退回第一页时）。
2.AJAX的安全问题
AJAX相当于Browser和Server之间的一条通道，通过观察server的响应数据结构，在某些情况下回暴露出一些server的逻辑。黑客也可以模拟用户向Server发起请求，出现了诸如跨站点脚步攻击、SQL注入攻击等

Ajax原生js实现

最简单的实现方式：

var xhr = new XMLHttpRequest();
xhr.open('请求方式GET或者POST或者其他', 请求地址url, 是否开启异步async);
xhr.onreadystatechange = function() {
    // readyState == 4说明请求已完成
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
    }
}
if (method == 'POST') {
    //给指定的HTTP请求头赋值
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
}
xhr.send()

目前已经有很多的工具（类库实现了AJAX的封装），只会用当然不行，我们需要详细的理解它的属性内容

为了钱

XMLHttpRequest的属性

onreadystatechange：值为一个function，当readyState属性改变时会调用它
readyState：Http请求过程中的状态值，具体情况如下

状态值	描述
0	初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。
1	open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。
2	Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。
3	所有响应头部都已经接收到。响应体开始接收但未完成。
4	HTTP 响应已经完全接收。

responseText：目前为止收到的响应体（不包括头部），或者如果还没有接收到数据的话，就是空字符串。

如果 readyState 小于 3，这个属性就是一个空字符串。当 readyState 为 3，这个属性返回目前已经接收的响应部分。如果 readyState 为 4，这个属性保存了完整的响应体。
如果响应包含了为响应体指定字符编码的头部，就使用该编码。否则，假定使用 Unicode UTF-8。

responseXML
对请求的响应，解析为 XML 并作为 Document 对象返回。
status
由服务器返回的 HTTP 状态代码，HTTP状态码整理。当 readyState 小于 3 的时候读取这一属性会导致一个异常。
statusText
这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。也就是说，当状态为 200 的时候它是 "OK"，当状态为 404 的时候它是 "Not Found"。和 status 属性一样，当 readyState 小于 3 的时候读取这一属性会导致一个异常。

XMLHttpRequest的方法

open(method,url,async)
初始化一个请求。
注意: 在一个已经激活的request下（已经调用open()方法的request）再次调用这个方法相当于调用了abort()方法。

参数	描述
method	HTTP请求方式："GET", "POST", "PUT", "DELETE"等
url	请求路径
async	是否异步请求。值为`布尔值`，默认为true,如果值为false,则send()方法不会返回任何东西，直到接受到了服务器的返回数据。

abort()
取消当前响应，关闭连接并且结束任何未决的网络活动。
这个方法把 XMLHttpRequest 对象重置为 readyState 为 0 的状态，并且取消所有未决的网络活动。例如，如果请求用了太长时间，而且响应不再必要的时候，可以调用这个方法。
send(string)
发送 HTTP 请求。只有POST方式才传参，参数类型为字符串。GET方式参数跟在url上
setRequestHeader(header,value)
向一个打开但未发送的请求设置或添加一个 HTTP 请求(设置请求头)。
注意：POST请求一般情况下需要设置请求头

request对象.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

参数	描述
header	设置的请求头名称
value	对应的请求头的值

getAllResponseHeaders()
把 HTTP 响应头部作为未解析的字符串返回。
如果 readyState 小于 3，这个方法返回 null。否则，它返回服务器发送的所有 HTTP 响应的头部。头部作为单个的字符串返回，一行一个头部。每行用换行符 "\r\n" 隔开。
getResponseHeader(name)
返回指定的 HTTP 响应头部的值。其参数是要返回的 HTTP 响应头部的名称。可以使用任何大小写来制定这个头部名字，和响应头部的比较是不区分大小写的。
该方法的返回值是指定的 HTTP 响应头部的值，如果没有接收到这个头部或者 readyState 小于 3 则为空字符串。如果接收到多个有指定名称的头部，这个头部的值被连接起来并返回，使用逗号和空格分隔开各个头部的值。

试着封装一下

以下是简化版，仅概述原理
使用闭包来防止变量污染

const $ = (function() {
    var name = 'jquery';
    return {
        ajax: function({
            type,
            url,
            data,
            isAsync,
            success
        }) {
            if (!url) {
                console.error('请输入请求地址')
                return;
            }

            var xhr = new XMLHttpRequest();

            // 处理data对象
            var query = [],
            queryData;
            for (var key in data) {
                // 默认encodeURIComponent一下
                query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
            }
            queryData = query.join('&');

            if (type == 'GET') {
                // get方式参数要跟在url上
                url = url + '?' + queryData
            }

            // 默认使用GET,默认异步
            xhr.open(type || 'GET', url, isAsync || true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // 有传入success回调就执行
                    success && success(xhr.responseText);
                }
            }

            if (type == 'POST') {
                //给指定的HTTP请求头赋值
                xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
                // 数组转成字符串
                xhr.send(queryData)
            } else {
                xhr.send()
            }

        }
    }
})();

//类似jquery的使用方式
$.ajax({
    type: 'POST',
    url: 'https://web-api.juejin.im/gptzllpbev',
    data: {
        name: '嘻嘻'
    },
    success: function(res) {
        console.log(res);
    }
})

参考文章：

w3school
AJAX入门