前言

在前端开发过程中，除了学习使用 HTML + CSS 来达到某些好看酷炫的特定效果外，还有一个不可或缺的模块值得我们学习，那就是网络请求。而在实际工作中，我们常使用第三方库或者框架（如 axios、jQuery等等）来达到发送网络请求获取服务器数据的目的。

AJAX = Asynchronous Javascript And XML（异步的Javascript 和 XML）。是一种实现无页面刷新获取服务器数据的混合技术。

Ajax实际上是下面这几种技术的融合:
(1) 基于 Web 标准 XHTML 和 CSS 的表示技术
(2) 使用 DOM（Document ObjectModel）进行动态显示及交互
(3) 使用 XML 和 XSLT 进行数据交换及相关操作
(4) 使用 XMLHttpRequest 进行异步数据查询、检索
(5) 使用 JavaScript 将所有的东西绑定在一起

入学须知

在继续深入了解Ajax之前，我们需要先了解几个概念；

同步和异步；
什么是 XML；
Get 和 Post 请求方式的区别；
Ajax 的核心 XMLHTTPRequest；

同步与异步

先看一下我之前看到的一个AJAX请求的例子：

异步AJAX：

主线程: "你好，AJAX线程。请你帮我发个HTTP请求吧，我把请求地址以及参数都给你。"
AJAX线程: "好的，主线程。我马上去发，但可能要花点儿时间呢，你可以先去忙别的。"
主线程: "谢谢，你拿到响应后告诉我一声啊。"
(接着，主线程做其他事情去了，一会儿时间后，它收到了响应到达的通知。)

同步AJAX：

主线程: "你好，AJAX线程。请你帮我发个HTTP请求吧，我把请求地址以及参数都给你。"
AJAX线程: "好的，主线程。我马上去发。"
主线程: "你好，AJAX线程。请你再帮我发个HTTP请求吧，我还是把请求地址和参数都给你。"
AJAX线程: "......"
主线程: "喂，AJAX线程，你怎么不说话？"
AJAX线程: "......"
主线程: "喂！喂喂喂！"
AJAX线程: "......"
主线程: "喂！求你说句话吧！"
AJAX线程: "主线程，不好意思，我在工作的时候不能说话。你的请求已经发完了，拿到响应数据了，给你。"

通过上述的例子，我们可以看出来同步和异步的区别了：

同步是指发送一个请求，然后等待，再发送下一个请求；

异步是指发送一个请求，不需要等地啊，随时发送下一个请求。

区别在于一个需要等待，一个不需要等待。

XML是什么

XML 是指可扩展标记语言（Extensible Markup Language）。它是一种标记语言，类似于 HTML，XML 标签没有被预定义，需要自行定义标签，同时也具有自我描述行。主要用来传输和存储数据的，且是 W3C的推荐标准。

XML的例子：

<bookstore> 
    <book category="COOKING"> 
        <title lang="en">家常菜的制胜一击</title> 
        <author>陈宇慧</author> 
        <year>2020</year> 
        <price>34.50</price> 
    </book> 
    <book category="CHILDREN">
        <title lang="en">少年读史记</title> 
        <author>张嘉骅</author> 
        <year>2015</year> 
        <price>50</price> 
    </book> 
    <book category="WEB"> 
        <title lang="en">JavaScript高级程序设计</title> 
        <author>马特·弗里斯比</author> 
        <year>2020</year> 
        <price>91</price> 
    </book>
</bookstore>

XML 常见解析的方式有2种，一种是 DOM 解析，一种是 SAX 解析。其中 DOM 解析是一次性读取 XML 文件，生成树状结构，优点是操作方便，缺点是比较耗费内存；SAX 解析是按照事件驱动的方式解析，占用内存少，但是编程复杂。

Get 和 Post 请求方式的区别

其实作为互联网人，这两个基础请求方式，应该是比较熟悉的。虽然熟悉，但是面试的时候还是会被问到，可能每个面试者都希望得到更多的答复吧。

Get 和 Post 请求方式直观的看，就是 Get 请求会把参数包含到 URL 中，POST 是通过 request body 进行参数传递。

Get 和 Post 其实是 HTTP协议的两种发送请求的方式。 HTTP是基于 TCP/IP 的超文本传输协议，也就是说 HTTP 请求的底层是 TCP/IP，所以 Get 和 Post 都是 TCP 链接。

区别

在后退或者刷新时，Get 请求无害，而 Post 会重新提交请求；
Get 请求产生的地址可以设置为书签，而 Post 不可以；
Get 请求会被浏览器主动缓存，而 Post 不会，除非手动设置；
Get 请求只能进行 URL 编码，而 Post 支持多种编码方式；
Get 请求参数会被完整的保留在浏览器历史记录里，而 Post 中的参数不会被保留；
Get 请求在 URL中传递的参数是有长度限制的（URL 长度受限，最大长度为 2048 个字节），而Post 没有；
Get 请求对于参数的数据类型只能是 ASCII 字符，而Post 没限制，还允许二进制数据；
Get 请求安全性较差，因为发送的数据是 URL 的一部分，而 Post 的参数不会被保存在浏览器或 web 服务器日志中；
Get 请求的数据在 URL 中对所有人都是可见的，而 Post 不会显示在 URL 中。
发送 Get 请求时，浏览器会把 Http Header 和 data 一并发送出去，服务器响应并返回数据，产生一个 TCP 数据包，而发送 POST 请求时，浏览器会先发送 HTTP Header，服务器响应 100 continue，浏览器再发送 data，服务器响应 200并返回数据，产生两个 TCP 数据包。

XMLHTTPRequest

XMLHTTPRequest（XHR）是在 IE5 中首先引入的，是一种支持异步请求的技术，主要是用于与服务器交互，通过 XHR 可以在不刷新页面的情况下进行请求特定 URL，获取数据，使得 JavaScript 可以及时向服务器发送请求和处理响应，而不阻塞用户。同时它也是 Ajax 的核心机制。

XHR 常用对象方法

abort()

该方法主要是用于取消当前请求
getAllResponseHeaders()

该方法主要是为了获取头信息
getResponseHeader()

该方法主要是为了获取某指定的头信息
open(method, url, async)

该方法主要用于指定请求的类型、URL以及是否异步处理请求。

method 请求参数用于指定请求方式： Get 或 Post；

url 请求参数表示请求地址；

async 请求参数表示同异步，值为 bool 类型，true 是异步，false 是同步。
send(string)

该方法用于发送请求到服务端，请求参数 string 只用于 post 请求。
setRequestHeader(header, value)

该方法用于向请求添加 http 头。该方法必须在 open() 方法和 send() 之间调用，如果多次对同一个请求头赋值，只会生成一个合并了多个值的请求头。

header 参数表示头的名称；

value 参数表示头的值。

XHR 常用对象属性

timeout

该属性表示的是请求的最大请求时间（毫秒），若超出该时间，请求会自动终止。
readyState

该属性表示的是请求的状态码。

常见的状态码有：
- 0 表示请求未初始化；
- 1 服务器链接已建立，open() 方法已经被调用。在这个状态中，可以通过 setRequestHeader() 方法来设置请求的头部，也可以调用 send() 方法来发送请求；
- 2 请求已接收，send() 方法已经被调用，并且头部和状态已经可获得；
- 3 处理请求中，响应体部分正在被接受，如果 responseType 属性是 text 或者空字符串， responseText 将会在载入的过程中拥有部分响应数据；
- 4 请求已完成，且响应已就绪。
onreadystatechange

该属性表示一个回调方法，当 readyState 属性值发生改变会自动被调用。

当一个 XHR 请求被 abort() 方法取消时，这属性的毁掉方法不会被触发。

⚠️⚠️⚠️该属性不能用于同步 XHR 对象。⚠️⚠️⚠️

语法： XHR.onreadystatechange = callback;
responseText

该属性返回作为一个字符串的响应数据，如果请求未成功或尚未发送，则返回 null。
responseXML

该属性返回作为 XML 数据响应数据，如果请求未发送或者未成功以及不能返回数据不能被解析为 XML 或 HTML时，则返回 null。
status

该属性返回响应中的数字状态码，在请求完成前或 XHR 出错时，该属性值为 0。常见的状态码有 200、401、404等。
statusText

该属性表示响应中返回的状态文本，它包含了数字状态码和对应的文本信息。如："200 OK"等。当请求状态码为 0 和 1时，该属性值是一个空字符串。

Ajax

工作原理

Ajax 的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化，简单来说就是通过 XMLHTTPRequest 对象向服务器发送网络请求，获取服务器响应数据，然后通过 JavaScript 来操作 DOM 从而更新页面，而不影响用户其他操作。

常见使用

使用原生 JavaScript 中的 Ajax

创建一个 XMLHttpRequest 对象；

var xhr = new XMLHttpRequest()

设置请求方式、请求的地址和是否异步执行，示例为异步请求；

/// Get 请求
xhr.open('get', '/news/getNewsPage?pageNumber=' + pageNumber + 'pageSize' + pageSize , true)

/// Post 请求
xhr.open('post', '/news/getNewsPage', true)

设置请求头；

/// Get 请求，可以不设置请求头
---------------
/// Post 请求，需要设置
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

发送请求到服务端；

/// Get 请求
xhr.send()

/// Post 请求
xhr.send('pageNumber=1&pageSize=20')

处理服务器响应数据；

// 当 XMLHttpRequest 对象设置了为异步，且该请求未被abort()，该属性回调方法才有效。具体参考上一大章节
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        var res = JSON.parse(xhr.responseText)
        console.log(res)
    }
}

使用 jQuery 中的 Ajax

$.ajax({
    type: 'get',   /// 请求方式
    url: '',       /// 请求地址
    data: {},      /// 请求参数
    dataType: 'json',
    beforeSend: function (xhr) {
    /// 发送该网络请求之前会进入该回调函数
    },
    success: function (res) {
    /// 成功拿到响应结果之后会进入该回调函数
    },
    error: function (xhr, error) {
    /// 失败回调函数
    },
    complete: function () {
    /// 不管成功还是失败，都会进入该回调函数
    }
})

小结

Ajax 是一种创建交互式网页应用的网页开发技术，最大的特点就是可以实现无刷新改变页面内容；
Ajax 的优势有：

通过异步模式，提升了用户体验；
优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用；
Ajax 引擎在客户端运营，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。

Ajax 学习笔记

前言