AJAX原理（笔记）

XMLHttpRequest

• AJAX原理-XMLHttpRequest

定义：XHR对象用于与服务器交互。通过XHR可以在不刷新页面的情况下请求特定URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的布局内容。

关系：axios内部采用XHR与服务器交互

• 使用XMLHttpRequest

步骤：

1.创建XHR对象

2.调用open方法，配置请求方法和请求url地址

3.监听loadend事件，接收响应结果

4.调用send方法，发起请求

• XMLHttpRequest-查询参数

定义：浏览器提供给服务器的额外信息。让服务器返回浏览器想要的数据

语法：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2

// 1.创建URLSearchParams对象
const paramsObj = new URLSearchParams({
  参数名1: 值1,
  参数名2: 值2
})
// 2.生成指定格式查询参数 字符串
const queryString = paramsObj.toString()
// 结果：参数名1=值1&参数名2=值2

Promise

• Promise

定义：Promise对象用于表示一个异步操作的最终完成（或失败）及其结果值

好处：

1.逻辑更清晰

2.了解axios函数内部运作机制

3.能解决回调函数地域问题

语法：

// 1.创建Promise对象
const p = new Promise((resolve, reject) => {
  //2.执行异步任务-并传递结果
  // 成功调用：resolve(值) 触发then()执行
  // 失败调用：reject(值) 触发catch()执行
})
// 3.接收结果
p.then(result => {
  //成功
}).catch(error => {
  //失败
})

• Promise-三种状态

概念：一个Promise对象，必然处于一下几种状态之一

待定（pending）:初始状态，既没有被兑现，也没有被拒绝

已兑现（fulfilled）:操作成功

已拒绝（rejected）:操作失败

注意：Promise对象一旦被兑现/拒绝,就是已敲定了，状态无法再改变