JavaScript ajax 系列三 XML使用；查询字符串；URL编码；JSON数据交换格式；封装ajax函数；HTTP时限；Formdata管理数据；上传文件及进度；ajax事件；axios库

Ajax 加强（原生）

1. XMLHttpRequest的基本使用

XMLHttpRequest（简称 xhr）是浏览器提供的 Javascript 对象，通过它，可以请求服务器上的数据资源。之前所学的 jQuery 中的 Ajax 函数，就是基于 xhr 对象封装出来的。

1.1 使用xhr发起GET请求

步骤：

1. 创建 xhr 对象
2. 调用 xhr.open() 函数
3. 调用 xhr.send() 函数
4. 监听 xhr.onreadystatechange 事件

    <script>
        // 1. 创建 XHR 对象
        var xhr = new XMLHttpRequest()
            // 2. 调用 open 函数
        xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
            // 3. 调用 send 函数
        xhr.send()
            // 4. 监听 onreadystatechange 事件
        xhr.onreadystatechange = function() {
   
            if (xhr.readyState === 4 && xhr.status === 200) {
   
                // 获取服务器响应的数据
                console.log(xhr.responseText)
            }
        }
        var xhr = new XMLHttpRequest();
    </script>

1.2 了解xhr对象的readyState属性

XMLHttpRequest 对象的 readyState 属性，用来表示当前 Ajax 请求所处的状态。每个 Ajax 请求必然处于以下状态中的一个：

		if (xhr.readyState === 4 && xhr.status === 200) {
   
                // 获取服务器响应的数据
                console.log(xhr.responseText)
        }					
        				 状态：      描述：
       readyState === 0 （UNSENT）   XMLHttpRequest 对象已被创建，但尚未调用 open方法。
       readyState === 1 （OPENED）            open() 方法已经被调用。
       readyState === 2 （HEADERS_RECEIVED）  send() 方法已经被调用，响应头也已经被接收。
       readyState === 3 （LOADING）  数据接收中，此时 response 属性中已经包含部分数据。
       readyState === 4 （DONE）     Ajax 请求完成，这意味着数据传输已经彻底完成或失败。

1.3 使用xhr发起带参数的GET请求 （后面加 ？+参数）

使用 xhr 对象发起带参数的 GET 请求时，只需在调用 xhr.open 期间，为 URL 地址指定参数即可：

    <script>
        var xhr = new XMLHttpRequest()
        xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')
        xhr.send()
        xhr.onreadystatechange = function() {
   
            if (xhr.readyState === 4 && xhr.status === 200) {
   
                console.log(xhr.responseText)
            }
        }
    </script>

这种在 URL 地址后面拼接的参数，叫做查询字符串。

1.4 查询字符串

定义：
查询字符串（URL 参数）是指在 URL 的末尾加上用于向服务器发送信息的字符串（变量）。

格式：
将英文的 ? 放在URL 的末尾，然后再加上 参数＝值 ，想加上多个参数的话，使用 & 符号进行分隔。以这个形式，可以将想要发送给服务器的数据添加到 URL 中。

// 不带参数的 URL 地址
http://www.liulongbin.top:3006/api/getbooks
// 带一个参数的 URL 地址
http://www.liulongbin.top:3006/api/getbooks?id=1
// 带两个参数的 URL 地址
http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记

GET请求携带参数的本质：
无论使用 $.ajax()，还是使用 $.get()，又或者直接使用 xhr 对象发起 GET 请求，当需要携带参数的时候，本质上，都是直接将参数以查询字符串的形式，追加到 URL 地址的后面，发送到服务器的。

$.get('url', {
   name: 'zs', age: 20}, function() {
   })
// 等价于
$.get('url?name=zs&age=20', function() {
   })

$.ajax({
    method: 'GET', url: 'url', data: {
   name: 'zs', age: 20}, success: function() {
   } })
// 等价于
$.ajax({
    method: 'GET', url: 'url?name=zs&age=20', success: function() {
   } })

1.5 URL编码与解码

URL 地址中，只允许出现英文相关的字母、标点符号、数字，因此，在 URL 地址中不允许出现中文字符。
如果 URL 中需要包含中文这样的字符，则必须对中文字符进行编码（转义）。
URL编码的原则：使用安全的字符（没有特殊用途或者特殊意义的可打印字符）去表示那些不安全的字符。

URL编码原则的通俗理解：使用英文字符去表示非英文字符。

http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记
// 经过 URL 编码之后，URL地址变成了如下格式：
http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=%E8%A5%BF%E6%B8%B8%E8%AE%B0

对URL进行编码与解码
浏览器提供了 URL 编码与解码的 API，分别是：

1. encodeURI() 编码的函数
2. decodeURI() 解码的函数

encodeURI('哈哈哈哈')
// 输出字符串  %E9%BB%91%E9%A9%AC%E7%A8%8B%E5%BA%8F%E5%91%98
decodeURI('%E9%BB%91%E9%A9%AC')
// 输出字符串  哈

URL编码的注意事项：
由于浏览器会 自动 对 URL 地址进行编码操作，因此，大多数情况下，程序员不需要关心 URL 地址的编码与解码操作。

1.6 使用xhr发起POST请求

步骤： （加粗的是与 get 的区别）

1. 创建 xhr 对象
2. 调用 xhr.open() 函数
3. 设置 Content-Type 属性（固定写法）
4. 调用 xhr.send() 函数，同时指定要发送的数据
5. 监听 xhr.onreadystatechange 事件

    <script>
        // 1. 创建 xhr 对象
        var xhr = new XMLHttpRequest()
            // 2. 调用 open 函数
        xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
            // 3. 设置 Content-Type 属性
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
            // 4. 调用 send 函数
        xhr.send('bookname=水浒传&author=施耐庵&publisher=上海图书出版社')
            // 5. 监听事件<