前端网络基础-通过XMLHttpRequest实现AJAX（一）

青旅半醒 2023-10-01 10:45 12阅读 0赞

**目录**

认识AJAX

AJAX是什么

为什么AJAX这么重要

AJAX牛在哪

基于XMLHttpRequest实现AJAX

XMLHttpRequest是什么

xhr对象

如何通过xhr设置HTTP请求

xhr.open方法

xhr.setRequestHeader方法

xhr.send方法

小结

如何通过xhr监听异步的HTTP响应

xhr.readyState属性和xhr.onreadystatechange事件处理程序属性

小结

如何通过xhr获取HTTP响应状态码和响应头

xhr.status属性和xhr.statusText属性

xhr.getRespnseHeader方法和xhr.getAllResponseHeaders方法

小结

如何通过xhr获取HTTP响应体

xhr.response属性、xhr.responseText属性、xhr.responseXML属性

xhr.overrideMimeType方法

xhr.responseType属性

验证xhr.response和xhr.responseType，以及HTTP响应头中Content-Type之间关系

小结

使用XMLHttpRequest发起AJAX请求

发起GET请求

发起POST请求

解析AJAX响应体

--------------------

# 认识AJAX #

## AJAX是什么 ##

AJAX（Asynchronous Javascript And XML）即 异步的JavaScript和XML。

> 浏览器使用 JavaScript 发起异步的HTTP请求，从服务器获得 XML 格式数据，并利用同样基于JavaScript的DOM操作，将从XML中解析出来得数据更新至当前网页的对应部分，而不用刷新整个网页。

## 为什么AJAX这么重要 ##

在没有AJAX技术前，当网页加载完毕后，就只能通过网页刷新发起同步的HTTP请求。

可能会有人发出疑问：网页刷新如何发出HTTP请求？

1、单纯刷新网页，其实就是向服务器端发送了一个HTTP GET请求，请求的是当前网页，即真的是刷新网页

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16][]

2、通过form表单发起GET或POST请求，当提交form表单时，form表单默认会跳转到一个新页面发起HTTP GET或POST请求

我们用form表单发起HTTP POST请求来举例子：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <form action="http://127.0.0.1/api/reguser" method="post" enctype="application/json">
    		<input type="text" name="username"></input>
    		<input type="password" name="password"></input>
    		<input type="password" name="repassword"></input>
    		<button>提交</button>
    	</form>
    </body>
    </html>

![8b874feddd7b432e966372e1111b55c6.gif][]

可以发现form表单提交后，会跳转到一个新的网页中，在新网页刷新时就会触发HTTP POST请求。

另外，我们从form表单跳转的新网页可以看出，浏览器将服务器的HTTP响应消息体直接当成了网页内容渲染了。

而实际情况中，服务器会返回一个HTML文档给浏览器渲染。

这就意味着每次浏览器发起的HTTP请求，都需要服务器响应一个HTML文档。哪怕浏览器只是请求更新当前网页中的局部数据，也需要服务器将对应数据更新到相同HTML中，然后再将HTML返回给浏览器。

所以：这种基于网页刷新发起HTTP请求的方式给服务器增加了很大的压力。

而对于浏览器来说，每次就算只需要一点点新数据，都需要等待服务器响应一个新生成的网页，并且是同步等待，在等待期间，网页操作被阻塞，对于用户来说体验也不好。另外，浏览器每次都要重新渲染新网页，对于浏览器来说压力也很大。

所以：这种基于网页刷新发起HTTP请求的方式给浏览器也造成了很大的压力。

## AJAX牛在哪 ##

基于JavaScript发起HTTP请求

【解决了：网页加载后，只能靠网页刷新发起HTTP请求】

可以发起异步的HTTP请求，即使服务器还没有响应，网页操作也不会被阻塞

【解决了：网页刷新发起HTTP请求后，且未收到服务器HTTP响应前，网页操作被阻塞，用户体验差的问题】

服务器只需要响应关键数据，而不需要响应无关数据给浏览器，浏览器收到数据后，利用JavaScript的DOM操作其更新到网页的局部，此时浏览器的渲染工作会减轻。

【解决了：每次都需要服务器将新数据插入HTML，并返回新生成的HTML给浏览器，再由浏览器重新整体渲染新生成的HTML】

# 基于XMLHttpRequest实现AJAX #

## XMLHttpRequest是什么 ##

到了2021年，基本上所有浏览器都提供了一个内置的JavaScript类（构造函数）XMLHttpRequest，该类默认挂载在window对象下

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

在浏览器的调试窗口的Network面板中，我们也可以过滤出基于XHR（XMLHttpRequest的缩写）发起的ajax请求

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

而XMLHttpRequest其实就是用来实现AJAX的。

我们知道AJAX的作用是发起异步的HTTP请求，而一个HTTP请求包含：

> **请求URL**，请求行（**请求方法**，资源标识，HTTP版本），**请求头**，空行，**请求体**

其中红色部分是必须要开发者指定的，其余部分都可以间接获取到。

所以XMLHttpRequest想要实现AJAX，则必须：

1、至少要有指定HTTP请求URL，HTTP请求方法，HTTP请求头，HTTP请求体的入口

2、实现异步

### xhr对象 ###

XMLHttpRequest实现AJAX的所有操作都是基于其实例对象的。

var xhr = new XMLHttpRequest()

## 如何通过xhr设置HTTP请求 ##

### **xhr.open方法** ###

gai该方法支持传入五个参数，依次是 method，url， async, user, password，较为常用是前三个参数

第一个参数method，就是HTTP请求方法，如GET，POST

第二个参数url，就是HTTP请求URL

第三个参数async，就是指是否异步发送，默认为true，即异步发送，设为false的话，则表示同步发送

最后两个参数user,password，用于身份认证。

xhr.open('post', 'http://127.0.0.1/api/reguser', true)

### **xhr.setRequestHeader方法** ###

该方法用于设置HTTP请求头，有两个参数，第一个参数是请求头字段名，第二个是请求头字段值。

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencode')

### **xhr.send方法** ###

该方法用于设置HTTP请求体，只有一个参数，接收的数据作为HTTP请求体。数据必须是字符串类型的，如果不是字符串类型，则会被强转成字符串类型。

另外字符串数据也有格式要求，需要和请求头的Content-Type指定的类型匹配，如

<table> 
 <tbody> 
  <tr> 
   <td style="width:260px;">Content-Type</td> 
   <td style="width:174px;">说明</td> 
   <td style="width:339px;">字符串数据样例</td> 
  </tr> 
  <tr> 
   <td style="width:260px;">application/x-www-form-urlencode</td> 
   <td style="width:174px;">查询字符串格式</td> 
   <td style="width:339px;">"key1=value1&amp;key2=value2"</td> 
  </tr> 
  <tr> 
   <td style="width:260px;">application/json</td> 
   <td style="width:174px;">JSON字符串格式</td> 
   <td style="width:339px;">"{'key1':value1, 'key2':value2}"</td> 
  </tr> 
  <tr> 
   <td style="width:260px;">text/plain</td> 
   <td style="width:174px;">纯文本字符串格式</td> 
   <td style="width:339px;">"123"</td> 
  </tr> 
 </tbody> 
</table>

另外，需要注意的是，GET请求一般不需要设置HTTP请求体，因为GET请求参数都加载URL中，而POST请求需要设置HTTP请求体。

xhr.send('username=张三&password=123123&repassword=123123')

### 小结 ###

通过xhr.open，xhr.setRequestHeader，xhr.send已经完成了一个HTTP请求的设置：请求URL，请求方法，请求头，请求体，并且可以指定HTTP请求是同步发起，还是异步发起。

如果是同步发起HTTP请求，则接收HTTP响应时直接使用同步代码接收即可，但是过程中，会造成网页阻塞，用户体验不好。

如果时异步发起HTTP请求，则无法使用同步代码接收异步的HTTP响应，此时XMLHttpRequest提供了基于事件回调的方式来接收异步HTTP响应。

## 如何通过xhr监听异步的HTTP响应 ##

### xhr.readyState属性和xhr.onreadystatechange事件处理程序属性 ###

xhr对象本身有一个属性readyState，有五个值，分别对应xhr对象得五种状态：

> 0：xhr对象刚被创建，但是还没有open初始化
> 
> 1：xhr已经被open初始化，但是还没有send
> 
> 2：xhr已经send，但是还没有收到响应体
> 
> 3：xhr已经收到部分响应体数据
> 
> 4：xhr已经收到全部响应体数据

xhr.readyState属性值会随着xhr对象状态得变化而自动改变。

所以只要监听xhr.readyState的变化，就能准确知道xhr对象什么时候完全接收到响应数据。

xhr对象本身存在一个onreadystatechange事件处理程序属性，浏览器会监听xhr对象的readystate值的变化，并会触发对应xhr对象的onreadystatechange事件处理程序。而我们一般只关注xhr.readystate === 4时，即获取到完整的HTTP响应结果时的事件触发。

xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
                    // ......
            }
    }

### 小结 ###

现在已经可以接收到异步的HTTP响应了。

我们知道一个HTTP响应包含：

响应行（HTTP版本，状态码，状态码描述）、响应头、空行、响应体

而我们一般只关注红色部分标记的，所以XMLHttpRequest只会提供红色部分的HTTP响应，而这些响应数据都被挂载为了xhr对象的属性和方法。

## 如何通过xhr获取HTTP响应状态码和响应头 ##

### xhr.status属性和xhr.statusText属性 ###

xhr.status属性对应HTTP响应报文的状态码，xhr.statusText对应响应报文的状态码描述。

我们一般只关注成功的响应，即状态码2xx的响应，这些状态码表示HTTP请求被服务器成功处理并返回结果，

另外304表示HTTP请求的资源已被浏览器缓存，并且服务器确认该资源没有变动，所以HTTP请求的资源可以直接使用浏览器缓存中的资源。也可以被视为成功的响应。

xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
                if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){
                    // ...
                }    
            }
    }

### xhr.getRespnseHeader方法和xhr.getAllResponseHeaders方法 ###

xhr.getRespnseHeader用于获取指定HTTP响应报文头字段的值

xhr.getAllResponseHeaders用于获取所有HTTP响应报文头

xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
                if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){
                    console.log(xhr.getResonseHeader('Content-Type'))
                    console.log(xhr.getAllResponseHeader())
                    // ...
                }    
            }
    }

### 小结 ###

通过xhr.status,xhr.statusText，以及xhr.getResponseHeader，xhr.getAllResponseHeaders已经可以获取到HTTP响应的状态码及描述，以及响应头信息，还有响应体没有说明如何获取。

在考虑获取响应体之前，我们需要思考下，HTTP响应体的数据格式有哪些？

比如JSON格式，比如XML格式，HTML格式，二进制格式，字节流格式。虽然它们在HTTP响应体中都以文本字符串的形式存在，但是我们在处理时，无法直接基于字符串获取数据，只有转成对应的类型才能有效处理。

## 如何通过xhr获取HTTP响应体 ##

### xhr.response属性、xhr.responseText属性、xhr.responseXML属性 ###

xhr.response、xhr.responseText、xhr.responseXML都对应于HTTP响应报文中的响应体。

xhr.response用于接收HTTP响应体，但是数据类型不定（可能是JSON类型，HTML对应的DOM元素类型，二进制数据ArrayBuffer类型等....）

xhr.responseText 存放文本格式HTTP响应体,或者没有值

xhr.responseXML 存放XML或HTML格式的响应体，或者为null

而上述三个属性是否有值，值得数据类型是什么取决于三点：

1、HTTP响应成功状态码

2、HTTP响应报文的响应头字段Content-Type 或 设置的xhr.overrideMimeType

3、设置的xhr.responseType值

### xhr.overrideMimeType方法 ###

该方法是指定一个MIME类型用于替代服务器指定的类型，使服务端响应信息中传输的数据按照该指定MIME类型处理。此方法必须在send方法之前调用方为有效。

> 如果服务器没有指定一个`Content-Type` 头, [XMLHttpRequest][] 默认MIME类型为`"text/xml"`. 如果接受的数据不是有效的XML，将会出现格”格式不正确“的错误。你能够通过调用 `overrideMimeType()` 指定各种类型来避免这种情况。

xhr.overrideMimeType('application/json');

### xhr.responseType属性 ###

该属性是一个枚举字符串值，用于指定xhr.response的数据类型。可读可写。

如果将 `responseType` 的值设置为空字符串，则会使用 `text` 作为默认值。

需要注意得是xhr.responseType必须在xhr.readyState状态为0，1，2时设置，不能在3,4时设置，即不能等到已经获取了部分HTTP响应体之后再设置。

<table style="width:609px;"> 
 <tbody> 
  <tr> 
   <td style="width:242px;">xhr.responseType枚举值</td> 
   <td style="width:366px;">含义</td> 
  </tr> 
  <tr> 
   <td style="width:242px;">""</td> 
   <td style="width:366px;">空的&nbsp;<code>responseType</code>&nbsp;字符串与默认类型&nbsp;<code>"text"</code>&nbsp;相同。</td> 
  </tr> 
  <tr> 
   <td style="width:242px;">"arraybuffer"</td> 
   <td style="width:366px;"><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/response" title="response" rel="nofollow">response</a>&nbsp;是一个包含二进制数据的 JavaScript&nbsp;<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer" title="ArrayBuffer" rel="nofollow">ArrayBuffer</a>。</td> 
  </tr> 
  <tr> 
   <td style="width:242px;">"blob"</td> 
   <td style="width:366px;"><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/response" title="response" rel="nofollow">response</a>&nbsp;是一个包含二进制数据的&nbsp;<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Blob" title="Blob" rel="nofollow">Blob</a>&nbsp;对象。</td> 
  </tr> 
  <tr> 
   <td style="width:242px;">"document"</td> 
   <td style="width:366px;"><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/response" title="response" rel="nofollow">response</a>&nbsp;是一个&nbsp;<a href="https://developer.mozilla.org/zh-CN/docs/Glossary/HTML" title="HTML" rel="nofollow">HTML</a>&nbsp;<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Document" title="Document" rel="nofollow">Document</a>&nbsp;或&nbsp;<a href="https://developer.mozilla.org/zh-CN/docs/Glossary/XML" title="XML" rel="nofollow">XML</a>&nbsp;<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/XMLDocument" title="XMLDocument" rel="nofollow">XMLDocument</a>，根据接收到的数据的 MIME 类型而定</td> 
  </tr> 
  <tr> 
   <td style="width:242px;">"json"</td> 
   <td style="width:366px;"><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/response" title="response" rel="nofollow">response</a>&nbsp;是通过将接收到的数据内容解析为&nbsp;<a href="https://developer.mozilla.org/zh-CN/docs/Glossary/JSON" title="JSON" rel="nofollow">JSON</a>&nbsp;而创建的 JavaScript 对象。</td> 
  </tr> 
  <tr> 
   <td style="width:242px;">"text"</td> 
   <td style="width:366px;"><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/response" title="response" rel="nofollow">response</a>&nbsp;是&nbsp;<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/DOMString" title="DOMString" rel="nofollow">DOMString</a>&nbsp;对象中的文本</td> 
  </tr> 
 </tbody> 
</table>

xhr.responseType = 'json'

### 验证xhr.response和xhr.responseType，以及HTTP响应头中Content-Type之间关系 ###

当 xhr.responseType = '' || 'text' 并且 HTTP响应报文头中Content-Type: text/html

则 xhr.response中值为文本字符串，xhr.responseText中有值，且和xhr.response相同，xhr.responseXML为null

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

当xhr.responseType = 'document' 且 HTTP响应报文头中Content-Type:text/html

则xhr.response为DOM元素，xhr.responseText取值报错，xhr.responseXML有值，且和xhr.response值相同

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

当 xhr.responseType = 'json' 并且 HTTP响应报文头中Content-Type: application/json

则 xhr.response中值为Object对象，xhr.responseText，xhr.responseXML取值报错

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 5][]

### 小结 ###

> 前提条件：HTTP响应成功

xhr.responseText 只有在xhr.responseType设置为''或'text'时有值

xhr.responseXML只有在xhr.responseType设置为'document'时有值

而只要 xhr.responseType 和 HTTP响应头中Content-Type字段的值匹配，则xhr.response一定有值。

# 使用XMLHttpRequest发起AJAX请求 #

## 发起GET请求 ##

var xhr = new XMLHttpRequest()
    
    xhr.open('get', 'http://127.0.0.1/my/article/list?pagenum=1&pagesize=5')
    
    xhr.send()
    
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
                console.log(xhr.response)
            }
        }
    }

上面是一个最基本的xhr实现AJAX GET的过程。它有如下特点和注意事项：

1、GET请求的参数通常放在请求URL中，且需要按照请求字符串的格式。

> 如果GET请求将请求参数放在请求体中，则可能会被浏览器直接丢弃，或者可能服务器不考虑接收。
> 
> 如果GET请求参数在URL中不按照请求字符串格式，即key1=valule1&key2=value2格式，则浏览器和服务器都无法正常解析

2、由于GET请求参数都放在请求URL中，所以没有请求体，也就不需要设置请求头中的Content-Type，注意请求头中的Content-Type设置的是请求体的数据格式

## 发起POST请求 ##

var xhr = new XMLHttpRequest()
    
    xhr.open('post', 'http://127.0.0.1/my/article/updatecate')
    
    //xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    //xhr.send('id=1&name=时尚&alias=SHISHANG2')
    
    xhr.setRequestHeader('content-type', 'application/json')
    xhr.send(JSON.stringify({
    	id:1,
    	name:'时尚',
    	alias:'SHISHANG3'
    }))
    
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4) {
            if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
                console.log(xhr.response)
            }
        }
    }

上面是一个最基本的xhr实现AJAX POST的过程。它有如下特点和注意事项：

1、由于POST请求参数需要放在请求体，所以此时需要设置请求头中的Content-Type字段的值，目的是帮助服务器解析请求体内容。

> HTTP请求体被服务器接收到后，初始时都是文本字符串，从字符串中很难解析数据。
> 
> 而HTTP请求体通常都有特定数据格式，比如JSON格式，XML格式，二进制格式等......，所以发送者是可以知道自己发送的请求体的格式的，那么在请求头Content-Type中指定好请求体数据格式，这样服务器就可以快速将字符串转化为对应数据类型，实现快速解析。
> 
> 但是设置Content-Type的类型一定要和请求体数据格式匹配，如果不匹配就会导致服务器错误解析。

2、另外POST请求体的数据格式，需要和Content-Type匹配，常见匹配策略有：

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>请求头Content-Type</td> 
   <td>请求体数据格式</td> 
  </tr> 
  <tr> 
   <td>application/x-www-form-urlencode</td> 
   <td>key1=value1&amp;key2=value2</td> 
  </tr> 
  <tr> 
   <td>application/json</td> 
   <td>{"key1":value1, "key2":value2}</td> 
  </tr> 
  <tr> 
   <td>text/xml</td> 
   <td>&lt;key1&gt;value1&lt;/key1&gt;</td> 
  </tr> 
  <tr> 
   <td>multipart/form-data</td> 
   <td>有特定分隔符</td> 
  </tr> 
 </tbody> 
</table>

## 解析AJAX响应体 ##

有两种解析策略：

1、预先解析

预先解析的意思是，在收到HTTP响应体之前，就已经知道了响应体的数据格式，这种情况很常见，比如我们请求接口数据，通常响应体就是json格式，我们请求HTML文档，则响应体就是document格式等

此时我们可以通过提前设置 xhr.responseType来指定响应体的数据类型，这样就可以通过xhr.response直接获得想要的数据类型了，而不需要手动解析。

但是有时候，可能服务器响应时没有指定Content-Type，而默认的Content-Type又不符合需求，所以我们需要重置响应体的Content-Type，此时需要通过xhr.overrideMimeType方法来设置响应体的Content-Type。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 5][]

2、手动解析

就是使用默认的xhr.response，即xhr.responseType = 'text'，此时xhr.response就是文本字符产，我们需要自己调用相应方法来解析为想要的数据类型。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 6][]

肯定有人说了，手动解析不好，不如使用预先解析，但是手动解析存在的意义就是兼容性好，当前部分浏览器（IE11）还不支持xhr.responseType的部分枚举值(json)。

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/353c4f806a25458f99e46a7f1a35b3ed.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[8b874feddd7b432e966372e1111b55c6.gif]: https://img-blog.csdnimg.cn/8b874feddd7b432e966372e1111b55c6.gif
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/5d2978da41e3441997bda2850ec2f041.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/52dfcee1715c4fc3b81153f225912ecc.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[XMLHttpRequest]: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/41eded1b572a44fbaadfc1cefad80d8d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/e43c5cd908c44776b0c1b4e830e734b1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/6f3daa20ed1741019a475fe19ee29783.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/262d8721b0654a20a38b3c32052188c9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16