【H2O2|全栈】JS进阶知识（四）Ajax

类型	作用
Authentication（认证）	用于系统进行身份/用户验证的凭据
Authorization（授权）	顺序上在认证之后，不同的用户提供对应的访问系统的权限

特别的，对于POST类型数据，还需要在key处单独设置Content-type，即设置发送数据的格式。

此时，对应的值类型如下------

值	数据类型
application/json	发送json数据
application/x-www-form-urlencoded	发送表单数据
text/plain	发送纯文本
text/html	发送html文本

比如，我们需要设置发送表单类型的数据，就可以像下面这样------

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

发送请求

接下来，我们需要用send()向服务器发送我们设置好的请求信息。

get方式发送

使用该方式发送请求时，我们需要在open()中的url地址的 **?**后拼接需要传输的数据内容。

拼接的字符串通常为下面的格式------

'http://xxx/xxx/xxx?key1=value1\&key2=value2\&...'

然后，我们就可以直接使用AJAX对象发送请求了------

xhr.send()

post方式发送

除了在请求头中声明参数类型之外，post()方式需要设置发送的数据字符串。

拼接参数的实示例代码如下------

var parmas = "key1=" + value1 + "&key2=" + value2

这里我们就不需要把字符串拼到open()里的url中了。

发送请求时，直接将数据字符串放入send()------

xhr.send(parmas)

注意，post方式传递的数据通常为对象格式的字符串，即------

"{

'key1': 'value1',

'key2': 'value2'

}"

获取响应数据

当我们需要获取服务器传来的数据时，有两种事件供我们选择------

事件	作用
onload	加载服务端响应数据
onreadystatechange	侦测 Ajax 状态码并在条件符合时返回数据

用onload方式时，我们直接获取数据字符串即可。

使用xhr的responseText属性获取数据字符串，注意，如果我们需要其中的数据，还得将这个对象格式的字符串转为真正的对象。

在之前的博客中，我们提到了可以使用JSON.parse()方法解析对象格式字符串，因此我们可以用类似下面的方式来获取需要的数据------

var obj = JSON.parse(xhr.responseText)

AJAX状态码和HTTP状态消息

而对于onreadystatechange方式，即检查状态码改变的方式，我们需要用到xhr的readyState属性我们首先需要了解一个请求的五种状态码------

状态码	状态
0	请求未初始化(还没有调用open())
1	请求已经建立，但是还没有发送(还没有调用send())
2	请求已经发送
3	请求正在处理中，通常响应中已经有部分数据可以用了
4	响应已经完成，可以获取并使用服务器的响应了

在到达onreadystatechange这一步之后，至少也是2即以后的状态了，当状态码为4时，接收数据即可。

判断和获取的示例代码如下------

if (xhr.readyState == 4) {

var obj = JSON.parse(xhr.responseText)

console.log(obj);

}

此外，还有一种http状态消息也可以用来判断请求是否成功，比如我们常见的404错误，就是一种状态消息。

一般来说，这个数值在[200, 300)的区间内，说明请求是成功的。

常见的状态消息如下------

消息	含义
200	请求已成功，请求所希望的响应头或数据体将随此响应返回
302	请求的资源临时从不同的 URI响应请求。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。只有在Cache-Control或Expires中进行了指定的情况下，这个响应才是可缓存的
304	如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。304响应禁止包含消息体，因此始终以消息头后的第一个空行结尾
403	服务器已经理解请求，但是拒绝执行它
404	请求失败，请求所希望得到的资源未被在服务器上发现
500	服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器端的源代码出现错误时出现

错误捕获

使用onerror方式，来捕获接收数据过程中发生的错误（如网络中断等） ------

xhr.onerror = function () {

// 提示错误信息

}

这里的错误消息也可以是报告HTTP状态消息中的错误类型。

原生JS封装AJAX方法

回顾一下使用AJAX请求数据的全过程，总结起来无非就是下面几步------

创建AJAX对象 var xhr = new XMLHttpRequest()
设置请求方式和地址 xhr.open('way', 'url')
设置请求头 xhr.setRequestHeader(key, headers[key])
POST请求时，需要设置请求体 xhr.setRequestHeader('Content-Type', 'xxx')
发送请求 xhr.send() / xhr.send(parmas)
请求状态检查

那么，我们就可以使用一种方式，将上述过程封装起来，每当我们需要使用AJAX请求时，就调用这个函数。

一个示例的封装函数代码如下------

javascript 复制代码

function ajax(url, method = 'GET', data = null, headers = {}, onSuccess = null, onError = null) {
            const xhr = new XMLHttpRequest();
            xhr.open(method, url, true);

            // 设置请求头  
            for (let key in headers) {
                xhr.setRequestHeader(key, headers[key]);
            }

            xhr.onload = function () {
                if (this.status >= 200 && this.status < 300) {
                    // 请求成功  
                    if (onSuccess) {
                        onSuccess(this.responseText, this.status, this);
                    }
                } else {
                    // 请求失败  
                    if (onError) {
                        onError(this.status, this.statusText, this);
                    }
                }
            };


            // 发送POST请求时，需要设置请求体  
            if (method === 'POST' && data) {
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                xhr.send(typeof data === 'string' ? data : Object.keys(data).map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key])).join('&'));
            } else {
                xhr.send();
            }
        }

data处可以填待传输的数据对象，一般是get方式时填null，post方式时填需要传输的对象。

headers为请求头设置，如果为get方式，则直接按照对象的方式设置即可，比如------

{Authorization: 'aaaaa...'}

如果为post方式，需要写成对象格式字符串------

{'Authorization': 'aaaaa...'}

onSuccess和onError处分别填成功和失败时调用的函数。

$ 调用AJAX方法

$ 对AJAX进行了函数封装，格式和我们上述的封装几乎一致------

$.ajax({

type：请求方式的格式 get post

url：请求的地址

async：是否是异步，默认表示异步

data：发送到服务器的数据

dataType：预期服务器返回的数据类型 json text

headers：设置请求头

success：请求成功时调用此函数

error：请求失败时调用此函数

})

结束语

本期内容到此结束。关于本系列的其他博客，可以查看我的JS进阶专栏。

在全栈领域，博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历，然后把自己领悟到的一些东西总结一下，分享给大家。

文章全篇的操作过程都是笔者亲自操作完成的，一些定义性的文字加入了笔者自己的很多理解在里面，所以仅供参考。如果有说的不对的地方，还请谅解。

==期待与你在下一期博客中再次相遇==

------临期的【H2O2】