3.AJAX请求5步法

布满荆棘的人生 2023-06-13 09:28 18阅读 0赞

# AJAX请求5步法 #

### 大纲 ###

**（1）AJAX请求步骤(初版)  
（2）AJAX请求类型  
（3）跨域+CORS+Network  
（4）JSON序列化与反序列化/解析  
（5）AJAX请求步骤(微调)**

# AJAX请求步骤 #

**AJAX请求5部曲：**  
（1）创建XMLHttpRequest异步对象  
（2）设置回调函数，针对不同的响应状态进行处理  
           —监听Ajax的状态readyState的改变事件onreadystatechange  
（3）使用open方法与服务器建立连接  
（4）send注册事件，设置和服务器的交互信息，向服务器发送数据  
（5）在回调函数中针对不同的响应状态进行处理，更新界面

# AJAX前言 #

**【前言】**  
简称：AJAX为异步处理，也叫异步请求  
作用：访问远程API(Application Programming Interface)应用程序编程接口.  
本质：动态获取远程数据，局部渲染更新页面，所以也叫局部刷新技术.

# AJAX请求步骤一 #

（1）**创建XMLHttpRequest异步对象**  
有两种方式，主流浏览器方式和兼容IE低版本。之所以要兼容IE低版本是因为ajax技术的推广使用主要得力于IE（微软）。

**1、主流浏览器方式**  
IE7+、Firefox、Opera、Safari、Chrome都支持原生的XHR对象，在这些浏览器里创建XHR对象可以直接实例化XMLHttpRequest即可。

![在这里插入图片描述][20191115145526800.png]

**2、兼容IE低版本方式**

![在这里插入图片描述][20191115145551671.png]

**3、开发时兼容处理，平时创建ajax对象XHR时一般需要封装一下**

![在这里插入图片描述][20191115145555611.png]

**（2）使用open方法与服务器建立连接**  
语法：open(method,url,async)

解析：open方法有3个参数：method请求类型、url文件在服务器上的位置即接口路径、async布尔值设置请求同步异步  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]

1、method 请求类型：对应的取值是get和post（get方式的安全性比post的要低，包含机密信息的话，建议用post数据提交方式；在做数据查询是，建议用get方式，而在做数据添加、修改、删除时，建议用post方式 )

2、url文件在服务器上的位置即接口文件路径

注意：  
该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）。

3、async布尔值设置请求同步异步  
async-默认值true异步，false为同步  
boolean 取值为“true” 的时候，服务器的请求是异步的，也就是脚本执行send()方法后不等待服务器的执行结果，继续执行脚本代码 ；  
beelean取值为“false”的时候，服务器的请求是同步的 ， 也就是脚本执行send() 后等待服务器的执行结果，若在等待过程中超时，则不再等待，继续执行后面的脚本代码

常用默认值true异步即可，例如朋友圈点赞，点赞完毕后界面没有刷新，但局部更新了点赞数，所以称之为局部刷新技术。  
false则是等待代码执行完毕后，再去执行后续操作。

### 异步VS同步 ###

①异步为请求和后续代码同时执行，即将异步JS请求和XML/HTML的加载同时执行  
②同步为等待请求完成后，再去执行后续代码(例如美团点餐同一时间收到10000个请求，需要等待请求完成再去执行后续操作，影响体验)

综上所述，一般open方法的第3个参数async用默认值true异步即可，所以开发中一般省略不写，只写前两个参数method和url。

接下来拓展下method请求类型，除了常见的get和post请求，还有delete删除请求、update更新请求、put添加请求等等，而post请求可以实现增删改查所有操作，get一般用于读取数据。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]

# 请求分类 #

请求方式分两种get和post  
最直观的区别就是get把参数包含在URL中，post通过request body传递参数  
1、get方式安全性较Post方式差些，包含机密信息的话，建议用Post数据提交方式；  
2、做数据查询时，建议用Get方式；而做数据添加、修改或删除时，建议Post方式；  
案例：一般情况下，登录的时候都是用的POST传输，涉及到密码传输，而页面查询的时候，如文章id查询文章，用get 地址栏的链接为：article.php?id=11，用post查询地址栏链接为：article.php， 不会将传输的数据展现出来。

**HTTP请求方法**  
（1）get方法：一般用于信息获取、使用URL传递参数、对发送的信息数量有所限制，常用于查询，数据可见，一般在2000个字符（默认的HTTP请求方法）。  
优势：因为数据通过URL传递，所以可以将其存放在书签里。  
注意：get方法也叫幂等，即查询结果不受查询次数影响，例如查询一个员工信息1次和1000次，并不会随着查询次数的叠加而有所改变。  
（2）post方法：一般用于修改服务器上的资源，常用于新建和修改数据等操作，数据不可见，被嵌入了HTTP请求体里，且对所发送信息的数量无限制。  
（3）区别：常用get方法做查询和获取操作，post方法做发送数据、新建修改数据等操作。

# AJAX请求步骤二 #

（2）使用open方法与服务器建立连接

![在这里插入图片描述][20191115150002340.png]

开发中一般省略参数async使用默认值true即可  
![在这里插入图片描述][20191115150007377.png]

上面是get方法，如果是post方式发送数据 需要设置请求头

![在这里插入图片描述][20191115150029590.png]

小结：open方法中get&&post方法区别

![在这里插入图片描述][201911151500315.png]

# AJAX请求步骤三 #

**（3）注册事件，设置和服务器的交互信息，向服务器发送数据**  
在第（2）步中已经与服务器建立了链接，规定了请求的类型、URL 以及是否异步处理请求，接下来通过第（3）步注册事件，设置交互信息，并将请求发送到服务器

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]

这里着重强调下get与post请求区别–传值方式

![在这里插入图片描述][20191115150105460.png]  
get方式通过url拼接传值，所以不会通过send发送，会将请求数据展示到url，例如百度、淘宝搜索商品… …  
而post请求则是通过send传参将数据传递到服务器，不会在url展示数据，所以安全性较高，例如登录、修改密码等操作，均不会将信息展示到url中… …

**这里着重强调下get与post请求区别–传值方式，get如下所示**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]

**（3）注册事件，设置和服务器的交互信息，向服务器发送数据**  
语法：xhr.send(\[string\])

①当请求类型method为get时，发送send需要加上参数string，即xhr.send(string)  
②当请求类型method为post时，发送send不需要加参数，即xhr.send()

小结：给服务器发送数据xhr.send(string)；向服务器读取数据xhr.send()

因为上面请求类型为get，所以这里直接发送请求即可，无需传参

![在这里插入图片描述][201911151502015.png]

小结：send方法中get&&post区别

![在这里插入图片描述][2019111515020653.png]

# AJAX请求步骤四 #

（4）响应—针对不同的响应状态进行处理  
接下来使用AJAX对象即xhr的相关属性接收和监听返回的数据，正式介绍前，先来介绍下Ajax对象常用属性

在创建xhr异步对象之后输出下，控制台查看验证

![在这里插入图片描述][20191115150227844.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]

**（4）响应—针对不同的响应状态进行处理**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 5]

读取状态readyState

![在这里插入图片描述][20191115150314481.png]

分析可得当状态readyState为4时才可以获得返回的数据

![在这里插入图片描述][20191115150315149.png]

监听状态改变事件onreadystatechange：当Ajax的状态readyState发生变化时触发执行，为了获得较多的状态，最好在创建好Ajax对象后就设置。  
最多可以感知到1、2、3、4四种状态。

![在这里插入图片描述][20191115150329691.png]

# 跨域 #

基础扫盲—跨域  
理论上控制台应该显示出1，2，3，4四个状态值，但验证后会发现显示不全，且存在报错

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 6]  
![在这里插入图片描述][20191115150417635.png]

什么是跨域？  
跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。

**同源策略限制了以下行为：**  
![在这里插入图片描述][20191115150427238.png]

## 常见跨域场景？ ##

**所谓的同源是指，域名、协议、端口均为相同。URI统一资源标识符**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 7]

### 常见跨域场景？ ###

**所谓的同源是指，域名、协议、端口均为相同。**  
![在这里插入图片描述][20191115150507112.png]

**所谓的同源是指，域名、协议、端口均为相同。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 8]

# CORS #

**基础扫盲之CORS**  
CORS全称Cross-Origin Resource Sharing ，是一种允许当前域（domain）的资源（比如html/js/web service）被其他域（domain）的脚本请求访问的机制，通常由于同域安全策略（the same-origin security policy）浏览器会禁止这种跨域请求。

即浏览器的同源策略Same origin policy会阻止不同源的文件访问交互，对于跨域问题可以使用CORS来解决。

**基础扫盲之CORS**  
浏览器区别→chrome存在同源策略，所以不可以跨域。接下来使用HBuilder打开Firefox（自带服务器）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 9]

# AJAX请求步骤四 #

（4）响应—针对不同的响应状态进行处理  
XMLHttpRequest 对象的三个重要的属性  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 10]

（4）响应—针对不同的响应状态进行处理  
当 readyState 等于 4 时，表示响应已就绪  
当 status 等于 200 时，表示服务器返回数据成功  
responseText 为字符串形式接收服务器端返回的信息

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 11]

将上述代码简化如下，当 readyState 等于 4 且状态为 200 时，表示响应已就绪且服务器返回数据成功

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 12]

**接下来添加url文件，先用本地文件index.txt测试下**  
![在这里插入图片描述][20191115150738669.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 13]

# 状态码 #

上面用到了状态码xhr.status，当status为200时表示服务器返回数据成功，所以接下来介绍下状态码相关概念。

详见下节课程4.AJAX之状态值+状态码+HTTP请求.pptx

# AJAX状态码 #

控制台network检验查看AJAX相关信息

![在这里插入图片描述][20191115150810100.png]

首先介绍下控制台chrome开发者工具最常用的四个功能模块：Elements、console、Sources、Network。

# 谷歌开发者工具Network #

**chrome开发者工具最常用的四个功能模块：**  
1、Elements：主要用来查看前面界面的html的Dom结构，和修改css的样式。css可以即时修改，即使显示。大大方便了开发者调试页面  
2、console：这个除了查看错误信息、打印调试信息(console.log())、写一些测试脚本以外，还可以当作Javascript API查看用  
3、Sources：主要用来调试js和查看源代码  
4、Network：网络连接的信息读取。例如接口调用、资源加载耗时等

### Network详细介绍 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 14]

#### Network详细介绍 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 15]

**点击某个具体请求后的界面，如下图所示：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 16]

Network详细介绍：一共分为四个模块：  
**（1）Headers**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 17]

**（2）Preview：预览面板，用于资源的预览。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 18]

（3）Response  
响应信息面板包含资源还未进行格式处理的内容  
（4）Timing  
资源请求的详细信息花费时间  
（5）更新渲染界面  
通过之前步骤，已经从服务器获取到外部数据，接下来在页面动态渲染，即可实现局部更新页面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 19]

分析即可得知，获取json格式数据可以通过response或者responseText即可，一般常用responseText。

注意：后台给前台返回数据一般为JSON格式，也有xml格式。但后台获取得来的数据是json，而json本质是字符串（对象型+数组型），没有办法直接应用到页面，所以需要将JSON数据解析/反序列化成普通JS数组对象才可以使用JS方法进一步操作。

# JSON解析和序列化 #

JSON解析和序列化指的是JSON格式数据和普通数组对象格式的来回转换。

解析：如果是载入的JSON文件，需要对其进行使用，那么就必须将JSON字符串解析成原生的JavaScript值。即将JSON字符串解析成原生JavaScript值。

序列化：如果是原生的JavaScript值，即原生的JavaScript对象和数组，也可以转换成JSON字符串。所以序列化是将原生JavaScript值转换成JSON字符串。

### JS解析和序列化 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 20]

# JSON小结 #

（1）JOSN概念：以上即为JSON解析/反序列化和序列化过程，加载过程放到后续课程进行讲解。  
很多人搞不清楚 JSON 和 JS对象的关系，甚至连谁是谁都不清楚。其实，可以这么理解：  
JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。  
![在这里插入图片描述][20191115151945189.png]  
（2）转换：JSON 和 JS 对象互转

![在这里插入图片描述][20191115152105545.png]

（3）作用：存储和传递数据  
（4）JSON方法：解析与序列化，解析也叫反序列化

# AJAX请求步骤五 #

（5）更新渲染界面  
将JSON数据解析/反序列化成普通JS数组对象才可以使用JS方法进一步操作，如下所示![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 21]

（5）更新渲染界面  
遍历数据并局部更新页面，代码如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 22]

目前为止，都是页面初始化刷新时获取展示数据，并不能很好的体现出AJAX的本质：动态获取远程数据，局部渲染更新页面，所以也叫局部刷新技术。所以接下来做下修改，当点击按钮时触发

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 23]

此时，点击按钮时便会发送AJAX请求，然后获取数据→解析JSON数据成JS对象和数组→渲染至页面→实现局部刷新（没有刷新整个页面的情况下，不断从外部获取数据更新页面），这便是AJAX的直观体现。

接下来修改服务器接口文档数据，这里是本地数据，所以先测试下本地文档，修改index.txt如下所示

修改index.txt如下所示:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 24]  
**目前为止，已经实现了AJAX的请求，但步骤有些问题，接下来重新微调下代码**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 25]  
**修整后的请求步骤如下所示**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 26]

# 如有疑问或者问题请留言联系小编！！！ #

# 感谢来访！！！！ #

[20191115145526800.png]: https://img-blog.csdnimg.cn/20191115145526800.png
[20191115145551671.png]: https://img-blog.csdnimg.cn/20191115145551671.png
[20191115145555611.png]: https://img-blog.csdnimg.cn/20191115145555611.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191115145752400.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191115145922962.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[20191115150002340.png]: https://img-blog.csdnimg.cn/20191115150002340.png
[20191115150007377.png]: https://img-blog.csdnimg.cn/20191115150007377.png
[20191115150029590.png]: https://img-blog.csdnimg.cn/20191115150029590.png
[201911151500315.png]: https://img-blog.csdnimg.cn/201911151500315.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191115150054590.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[20191115150105460.png]: https://img-blog.csdnimg.cn/20191115150105460.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2019111515013473.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[201911151502015.png]: https://img-blog.csdnimg.cn/201911151502015.png
[2019111515020653.png]: https://img-blog.csdnimg.cn/2019111515020653.png
[20191115150227844.png]: https://img-blog.csdnimg.cn/20191115150227844.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191115150249122.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191115150259783.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[20191115150314481.png]: https://img-blog.csdnimg.cn/20191115150314481.png
[20191115150315149.png]: https://img-blog.csdnimg.cn/20191115150315149.png
[20191115150329691.png]: https://img-blog.csdnimg.cn/20191115150329691.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191115150407729.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[20191115150417635.png]: https://img-blog.csdnimg.cn/20191115150417635.png
[20191115150427238.png]: https://img-blog.csdnimg.cn/20191115150427238.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20191115150444356.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[20191115150507112.png]: https://img-blog.csdnimg.cn/20191115150507112.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20191115150532213.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20191115150602621.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20191115150615804.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20191115150631964.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20191115150659260.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[20191115150738669.png]: https://img-blog.csdnimg.cn/20191115150738669.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20191115150743483.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[20191115150810100.png]: https://img-blog.csdnimg.cn/20191115150810100.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/20191115150842834.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/20191115150902621.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 16]: https://img-blog.csdnimg.cn/20191115150920243.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 17]: https://img-blog.csdnimg.cn/2019111515095027.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 18]: https://img-blog.csdnimg.cn/20191115151020390.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 19]: https://img-blog.csdnimg.cn/20191115151743158.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 20]: https://img-blog.csdnimg.cn/20191115151910140.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[20191115151945189.png]: https://img-blog.csdnimg.cn/20191115151945189.png
[20191115152105545.png]: https://img-blog.csdnimg.cn/20191115152105545.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 21]: https://img-blog.csdnimg.cn/20191115152133768.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 22]: https://img-blog.csdnimg.cn/20191115152154674.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 23]: https://img-blog.csdnimg.cn/20191115152222472.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 24]: https://img-blog.csdnimg.cn/20191115152253855.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 25]: https://img-blog.csdnimg.cn/201911151523195.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 26]: https://img-blog.csdnimg.cn/20191115152347589.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70