AJAX
- AJAX是英文Asyncronise JavaScript And Xml 中文：异步的JS个XML
- AJAX不是web API
- AJAX也不是一项技术，AJAX是一种方法，通过多种技术的组合，实现动态更新页面的目的
- AJAX的最大特点：在不刷新页面的情况下，更新页面数据
- AJAX的实现方式有多种：
- 方式一：XMLHttpRequest API
- 方式二：操作标签的src属性
- 方式三：JSONP
- 不刷新页面更新网页
- 在页面加载后从服务器请求数据
- 在页面加载后从服务器接收数据
- 在后台向服务器发送数据
AJAX= Asynchronous JavaScript And XML.
AJAX并非编程语言。
AJAX 仅仅组合了：
- 浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据）
Request ： 请求 - JavaScript 和 HTML DOM（显示或使用数据）
XMLHttpRequest API
定义：
- XML：是英文“Extension Markup Language”的缩写；中文是：可扩展的标记语言
- HTML：是英文"Hyper Text Markup Language"的缩写，中文是：超文本标记语言。
- 用途：编写网页文档
- http：超文本传输协议
- Request：请求
- 字面意思：HTTP请求XML数据
- XML表示一种数据/文件格式。但是在这里，xml是个误会：不代表XMLHttpRequest只能请求
- xml数据，实际上，它可以请求任意类型数据，使用最多的数据类型是JSON。
-
定义：XMLHttpRequest是一种处理浏览器和服务器之间通信的API。XMLHttpRequest是对HTTP协议的一次通信
- 主要处理http请求。
- 主要处理浏览器端：主要处理请求，不处理响应。
- 请求是前端的工作
- 响应是后端的工作
- 它的核心对象是XMLHttpRequest 对象。
- 它的最大特点：页面局部数据的更新。
- 它是AJAX的最重要的实现手段
-
XMLHttpRequest通常有人这么简写：- xhr
- http
- xhhtp
请求数据的步骤
第一阶段：请求阶段
-
实例化一个xhr对象
const xhr = new XMLHttpRequest() -
准备发送请求：xhr.open()
xhrReq.open(method, url, async);-
method：要使用的 HTTP 方法，比如
GET、POST、PUT、DELETE、等。对于非 HTTP(S) URL 被忽略。 -
url：一个
DOMString表示要向其发送请求的 URL。 -
async(可选)：一个可选的布尔参数，表示是否异步执行操作，默认为
true。如果值为false，send()方法直到收到答复前不会返回。如果true，已完成事务的通知可供事件监听器使用。如果multipart属性为true则这个必须为true，否则将引发异常。
第二阶段：准备发起http请求
-
method：要使用的 HTTP 方法，比如
-
发送请求：xhr.send()
xhr.send() -
监控xhr实例对象的状态：xhr.onreadystatechange = function(){ }
xhr.onreadystatechange = function(){} -
查询xhr实例的状态：xhr.readyState
let state = xhr.readyState0 请求未初始化
1 服务器连接已建立
2 请求已收到
3 正在处理请求
4 下载操作已完成
第三阶段：响应阶段
-
响应已完成，接下来要获取数据：
xhr.responseText ：获取文本格式的数据
xhr.responseXml ：获取xml格式的数据
1.XMLHttpRequest()
定义：是一个构造函数。用于创建一个xhr实例对象。
语法：
const request = new XMLHttpRequest()
返回值：一个新的XMLHttpRequest对象
示例：
//初始化一个实例对象
const xhr = new XMLHttpRequest
2.xhr.open()
定义：用于创建一个HTTP请求
语法：
xhrReq.open(method, url);
xhrReq.open(method, url, async);
xhrReq.open(method, url, async, user);
xhrReq.open(method, url, async, user, password);
method：要使用的 HTTP 方法，比如 GET、POST、PUT、DELETE、等。对于非 HTTP(S) URL 被忽略
url：文件位置
async：true（异步）或 false（同步）
user：可选的用户名用于认证用途；默认为 null。
password：可选的密码用于认证用途，默认为 null。
返回值：文件地址
示例：
const url = "./data.xml"
console.log(url);//./data.xml
3.xhr.send()
定义：用于发送一个HTTP请求
语法：
xhr.send()
xhr.send(数据)
返回值：
示例：
4.xhr.onreadystatechange
定义：只要 readyState 属性发生变化，就会调用相应的处理函数 (en-US)。这个回调函数会被用户线程所调用。
语法：
XMLHttpRequest.onreadystatechange = callback;
- 当
readyState的值改变的时候，callback函数会被调用。
返回值：
示例：
//初始化一个实例对象
const xhr = new XMLHttpRequest
//利用实列对象xhr的open方法创建一个HTTP请求
const url = "./data.xml"
console.log(url);//./data.xml
xhr.open("GET",url,true)
//利用xhr。send（）方法发送请求
xhr.send()
//如何获取到服务器的响应
//1.查询xhr的状态 xhr.readyState：对象的状态
//onreadystatechange:请求对象的状态事件
xhr.onreadystatechange= function(){
console.log(xhr.readyState);//对象的状态码 1:服务器链接已经建立
console.log(xhr.status);//http状态码200
console.log(xhr.responseText);
//注意获取数据的时间点
if(xhr.readyState === 4 && xhr.status === 200){
const data = xhr.responseText
// console.log(data);
}
}
5.xhr.readyState
定义：用于查询xhr的状态码
语法：
xhr.readyState
返回值：
| 值 | 状态 | 描述 |
|---|---|---|
| 0 | UNSENT | 代理被创建，但尚未调用 open() 方法。 |
| 1 | OPENED | open() 方法已经被调用。 |
| 2 | HEADERS_RECEIVED | send() 方法已经被调用，并且头部和状态已经可获得。 |
| 3 | LOADING | 下载中；responseText 属性已经包含部分数据。 |
| 4 | DONE | 下载操作已完成。 |
示例：
const url = "./data.xml"
console.log(url);//./data.xml
xhr.open("GET",url,true)
//利用xhr。send（）方法发送请求
xhr.send()
//如何获取到服务器的响应
//1.查询xhr的状态 xhr.readyState：对象的状态
//onreadystatechange:请求对象的状态事件
xhr.onreadystatechange= function(){ console.log(xhr.readyState);//对象的状态码 1:服务器链接已经建立
console.log(xhr.status);//http状态码200
console.log(xhr.responseText);
//注意获取数据的时间点
if(xhr.readyState === 4 && xhr.status === 200){
const data = xhr.responseText
// console.log(data);
}
}
6.xhr.status
定义：用于查询xhr的http状态码
语法：
xhr.status
返回值：返回请求的状态号
- 200: "OK"
- 403: "Forbidden"
- 404: "Not Found"
示例：
xhr.onreadystatechange= function(){
console.log(xhr.readyState);//对象的状态码 1:服务器链接已经建立
console.log(xhr.status);//http状态码200
console.log(xhr.responseText);
//注意获取数据的时间点
if(xhr.readyState === 4 && xhr.status === 200){
const data = xhr.responseText
// console.log(data);
}
}
7.xhr.responseText
定义：在一个请求被发送后，从服务器端返回文本。
语法：
var resultText = XMLHttpRequest.responseText;
返回值：以字符串返回响应数据
示例：
xhr.onreadystatechange= function(){
console.log(xhr.readyState);//对象的状态码 1:服务器链接已经建立
console.log(xhr.status);//http状态码200
console.log(xhr.responseText);
//注意获取数据的时间点
if(xhr.readyState === 4 && xhr.status === 200){
const data = xhr.responseText
// console.log(data);
}
}
8.XMLHttpRequest.responseType
定义:属性responseType 是一个枚举字符串值，用于指定响应中包含的数据类型。
它还允许作者更改响应类型。如果将 responseType 的值设置为空字符串，则会使用 text 作为默认值。
语法：
XMLHttpRequest.responseType = 数据类型;
Global_Objects/String类型的值，指定响应包含的数据类型。它可以采用以下值：
- “ ”：空的 responseType 字符串与默认类型 text 相同。
- arraybuffer
response： 是一个包含二进制数据的 JavaScript ArrayBuffer - blob
response:是一个包含二进制数据的 Blob对象。 - document
response: 是一个 [HTML] 或 XMLDocument根据接收到的数据的 MIME 类型而定。 - json
response：是通过将接收到的数据内容解析为 JSON而创建的 JavaScript 对象。 - text
response：是 DOMString对象中的文本。 - ms-stream：非标准。请在使用前检查跨浏览器支持
response：是流式下载的一部分；此响应类型仅允许用于下载请求，并且仅受 Internet Explorer 支持。
返回值：
示例：
9.XMLHttpRequest.response
定义：该属性返回响应的正文。返回的类型为ArrayBuffer，Blob，Document。
JavaScript Object 或字符串中的一个。这取决于请求的 responseType属性。
语法：
XMLHttpRequest.response
返回值：该属性返回响应的正文。返回的类型为ArrayBuffer，Blob，Document。
示例：
//1.创建一个示例对象
const xhr =new XMLHttpRequest()
//2.准备请求 打开窗口输出地址
//GET:伸手要
xhr.open("GET","./dinx.html",true)
//8.设置响应数据的类型：xhl.reponseType = "document"
xhr.responseType = "document"
//3.发送 按下会车建
xhr.send()
//4.监控xhl的状态
xhr.onreadystatechange = ()=>{
//5.读取状态
let state = xhr.readyState
//10.查询实列对象http的状态：xhr.status
console.log(" ~ file: 3.html:39 ~ xhl.status:", xhr.status)
//6.状态为4时，拿到数据
if(state === 4 && xhr.status === 200){
// document.body.innerText = xhr.responseText
//7.拿到人看的：data是字符串，我希望data是一个对象
//可以拿到对象
const data = xhr.response
document.body.innerText = data.querySelector("h1").innerText
}
}
</script>
10.statusText
定义：该属性 以字符串返回响应数据
语法：
xhr.responseText
返回值：以字符串返回响应数据
