《前端》Ajax（1）（黑马ajax两天课程）

1、概述

在此之前，我们可以通过以下几种方式让浏览器发出对服务端的请求，获得服务端的数据：

•     地址栏输入地址，回车，刷新
•     特定元素的 href 或 src 属性
•     表单提交

这些方案都是我们无法通过或者很难通过代码的方式进行编程（对服务端发出请求并且接受服务端返回的响应），
如果我们可以通过 JavaScript 直接发送网络请求，那么 Web 的可能就会更多，随之能够实现的功能也会更多，至
少不再是“单机游戏”。

AJAX（Asynchronous JavaScript and XML），最早出现在 2005 年的 Google Suggest，是在浏览器端进行网络编
程（发送请求、接收响应）的技术方案，它使我们可以通过 JavaScript 直接获取服务端最新的内容而不必重新加载
页面。让 Web 更能接近桌面应用的用户体验。
说白了，AJAX 就是浏览器提供的一套 API，可以通过 JavaScript 调用，从而实现通过代码控制请求与响应。实现
网络编程。

AJAX - 简书  https://www.jianshu.com/p/eefc83ab59ca

Ajax使用_cedricdx的博客-CSDN博客  https://blog.csdn.net/cedricdx/article/details/101296127

如何在网页中引用本地js/css（localhost）-百度经验  https://jingyan.baidu.com/article/c1465413e86e7f0bfcfc4cfd.html

2. 快速上手

使用 AJAX 的过程可以类比平常我们访问网页过程，代码中的xhr就是浏览器的作用。

  打开浏览器-------------------------->输入网址--------->发送------->出现网页

创建XMLHttpRequset类型对象-->打开一个链接-->发送请求-->指定 xhr 状态变化事件处理函数,通过 xhr 的 readyState 判断此次请求的响应是否接收完成,通过 xhr 的 responseText 获取到响应的响应体

// 1. 创建一个 XMLHttpRequest 类型的对象 —— 相当于打开了一个浏览器
var xhr = new XMLHttpRequest()
// 2. 打开与一个网址之间的连接 —— 相当于在地址栏输入访问地址
xhr.open('GET', './time.php')
// 3. 通过连接发送一次请求 —— 相当于回车或者点击访问发送请求
xhr.send(null)
// 4. 指定 xhr 状态变化事件处理函数 —— 相当于处理网页呈现后的操作
xhr.onreadystatechange = function () {
// 通过 xhr 的 readyState 判断此次请求的响应是否接收完成
if (this.readyState === 4) {
// 通过 xhr 的 responseText 获取到响应的响应体
console.log(this)
}
}

2.1. readyState
由于 readystatechange 事件是在 xhr 对象状态变化时触发（不单是在得到响应时），也就意味着这个事件会被
触发多次，所以我们有必要了解每一个状态值代表的含义：

2.1.1. 时间轴

var xhr = new XMLHttpRequest()
console.log(xhr.readyState)
// => 0
// 初始化 请求代理对象
xhr.open('GET', 'time.php')
console.log(xhr.readyState)
// => 1
// open 方法已经调用，建立一个与服务端特定端口的连接
xhr.send()
xhr.addEventListener('readystatechange', function () {
switch (this.readyState) {
case 2:
// => 2
// 已经接受到了响应报文的响应头
// 可以拿到头
// console.log(this.getAllResponseHeaders())
console.log(this.getResponseHeader('server'))
// 但是还没有拿到体
console.log(this.responseText)
break
case 3:
// => 3
// 正在下载响应报文的响应体，有可能响应体为空，也有可能不完整
// 在这里处理响应体不保险（不可靠）
console.log(this.responseText)
break
case 4:
// => 4
// 一切 OK （整个响应报文已经完整下载下来了）
// 这里处理响应体
console.log(this.responseText)
break
}
})

通过理解每一个状态值的含义得出一个结论：一般我们都是在 readyState 值为 4 时，执行响应的后续逻辑。

所以，只需要考虑readystate为4 的情况。如下：

xhr.onreadystatechange = function () {
if (this.readyState === 4) {
// 后续逻辑......
}
}

onload事件等效为readyState 值为 4的onreadystatechange事件。

2.2. 遵循 HTTP

本质上 XMLHttpRequest 就是 JavaScript 在 Web 平台中发送 HTTP 请求的手段，所以我们发送出去的请求仍然是
HTTP 请求，同样符合 HTTP 约定的格式：

// 设置请求报文的请求行
xhr.open('GET', './time.php')
// 设置请求头
xhr.setRequestHeader('Accept', 'text/plain')
// 设置请求体
xhr.send(null)
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
// 获取响应状态码
console.log(this.status)
// 获取响应状态描述
console.log(this.statusText)
// 获取响应头信息
console.log(this.getResponseHeader('Content‐Type')) // 指定响应头
console.log(this.getAllResponseHeader()) // 全部响应头
// 获取响应体
console.log(this.responseText) // 文本形式
console.log(this.responseXML) // XML 形式，了解即可不用了
}
}

参考链接：
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

3. 具体用法

什么是数据接口？返回的响应就是一个 JSON 内容（返回的就是数据）。  

对于返回数据的地址一般我们称之为接口（形式上是 Web 形式）

3.1. GET 请求

通常在一次 GET 请求过程中，参数传递都是通过 URL 地址中的 ? 参数传递。

如取到delete.php中id为1的数据：xhr.open('GET', './delete.php?id=1')

var xhr = new XMLHttpRequest()
// GET 请求传递参数通常使用的是问号传参
// 这里可以在请求地址后面加上参数，从而传递数据到服务端
xhr.open('GET', './delete.php?id=1')
// 一般在 GET 请求时无需设置响应体，可以传 null 或者干脆不传
xhr.send(null)
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
console.log(this.responseText)
}
}
// 一般情况下 URL 传递的都是参数性质的数据，而 POST 一般都是业务数据

实例见文件夹。

3.2. POST 请求

POST 请求过程中，都是采用请求体承载需要提交的数据。

var xhr = new XMLHttpRequest()
// open 方法的第一个参数的作用就是设置请求的 method
xhr.open('POST', './add.php')
// 设置请求头中的 Content‐Type 为 application/x‐www‐form‐urlencoded
// 标识此次请求的请求体格式为 urlencoded 以便于服务端接收数据
xhr.setRequestHeader('Content‐Type', 'application/x‐www‐form‐urlencoded')
// 需要提交到服务端的数据可以通过 send 方法的参数传递
// 格式：key1=value1&key2=value2
xhr.send('key1=value1&key2=value2')
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
console.log(this.responseText)
}
}

介绍一款很好用的软件叫做 postman，可以用来调试接口。

3. 同步与异步