Ajax_3 Ajax原理

---

01-Ajax原理-XMLHttpRequest

---

使用XMLHttpRequest

步骤：

1. 创建XMLHttpRequest对象
2. 配置请求方法请求url网址
3. 监听loadend事件，接受响应结果
4. 发起请求

---

需求：使用XMLHttpRequest对象与服务器通信

代码示例

 //  1. 创建 XMLHttpRequest 对象const xhr = new XMLHttpRequest()//  2. 配置请求方法和请求 url 地址xhr.open('GET','http://hmajax.itheima.net/api/province')// 3. 监听 loadend 事件，接收响应结果xhr.addEventListener('loadend', () => {console.log(xhr.response)// 字符串转对象const data = JSON.parse(xhr.response)console.log(data.list)// 数组转字符串console.log(data.list.join('<br>'))// 插入到页面中document.querySelector('.my-p').innerHTML = data.list.join('<br>')})//  4. 发起请求xhr.send()
</script>

---

02-XMLHttpRequest-查询参数

---

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

---

语法：

1. ?参数名1=值1&参数名2=值2 （在问号后面，多个值用&连接）

参数名是接口文档里面设定的哦！

---

需求：使用XHR携带查询参数，展示某个省下属的城市列表

代码示例

<script>  
// 1、创建xhr实例对象const xhr = new XMLHttpRequest()// 2、发起请求xhr.open('GET','http://hmajax.itheima.net/api/city?pname=江西省')xhr.addEventListener('loadend', () => {console.log(xhr.response)// 对象转字符串const data = JSON.parse(xhr.response)console.log(data)// 数组转字符串，用换行符分隔console.log(data.list.join('<br>'))// 插入渲染document.querySelector('.city-p').innerHTML = data.list.join('<br>')})xhr.send()</script>

---

03-地区查询

---

需求： 根据省份和城市名字, 查询对应的地区列表

---

代码示例

<script>// 注册点击事件document.querySelector('.sel-btn').addEventListener('click', () => {// 2.收集省份和城市名字const pname = document.querySelector('.province').valueconst cname = document.querySelector('.city').value// 3.组织查询参数的字符串const qObj = {pname,cname}// 将查询参数对象   ->  查询参数的字符串const paramsObj = new URLSearchParams(qObj)// 使用toString（）方法将实例对象转为字符串const queryString = paramsObj.toString()console.log(queryString)// 1.创建xhr实例对象const xhr = new XMLHttpRequest()// 2.向服务器发送请求xhr.open('GET', `http://hmajax.itheima.net/api/area?${queryString}`)// 3.监听函数监听服务器响应的信息xhr.addEventListener('loadend', () => {console.log(xhr.response)// 将返回结果对象转字符串const data = JSON.parse(xhr.response)console.log(data.list)// 将数组里面的数据通过map数组映射给标签，记得将数组转为大的字符串const htmlStr = data.list.map(item => {return `<li class="list-group-item">${item}</li>`}).join('')console.log(htmlStr)document.querySelector('.list-group').innerHTML = htmlStr})// 4.发送请求xhr.send()})</script>

---

04-XMLHttpRequest-提交数据

---

需求： 通过XHR提交用户名和密码，完成注册功能

---

代码示例

 document.querySelector('.reg-btn').addEventListener('click', () => {const xhr = new XMLHttpRequest()xhr.open('POST', 'http://hmajax.itheima.net/api/register')xhr.addEventListener('loadend', () => {console.log(xhr.response)})// 自己配置请求参数xhr.setRequestHeader('Content-Type', 'application/json')// 准备好提交的数据const userObj = {username: 'liubuzhu',password: '7654321'}//将参数对象转为字符串  请求体const userStr = JSON.stringify(userObj)// 设置请求体：发起请求xhr.send(userStr)})
</script>

无论是请求还是查询都需要自己配置对象通过API转换后进行操作

查询参数使用路径传参在?后面。

提交请求参数则自己配置请求对象后，在xhr.send（请求参数）

---

05-认识 Promise

---

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

promise的好处

1. 逻辑更清晰
2. 了解axios函数内部运作机制
3. 能解决回调函数低于问题

---

语法：

1. 创建一个promise对象，传入resolve和reject参数
2. 执行异步任务，并传递结果，成功传入resolve，失败传入reject
3. 接受结果：成功then方法 ， 失败 catch方法

---

代码示例

<script>  
const p = new Promise((resolve,reject) => {// 2.执行异步代码setTimeout(() => {// 成功就直接给resolve传入实参resolve('模拟Ajax请求成功结果')// 失败就直接给reject传入实参reject('模拟Ajax请求失败结果')},2000)})// 3.获取结果p.then(result => {console.log(result)}).catch(error => {console.log(error)})</script>

• 注意第二步的使用。

---

06-Promise对象的三种状态

---

作用

1. 了解Promise对象如何关联的处理函数，以及代码的执行顺序。

---

1. pending状态（待定） new Promise() ： 初始状态，既没有被兑现，也没有被拒绝
2. fulfilled状态 （已兑现） .then（回调函数） :意味着，操作成功完成
3. rejected状态 （已拒绝） .catch(回调函数) : 意味着，操作失败

• 注意：Promise对象一旦被 兑现 或者 拒绝，就已经被敲定了， 状态无法再被改变。

---

代码示例

<script>    
// Promise对象创建时(待定状态)，这里的代码都会被执行console.log('Promise对象内开始执行')// 2. 执行异步代码，等待执行结果返回给实参，然后兑现 或者 拒绝给结果setTimeout(() => {// resolve被调用后，  fulfilled状态-已兑现 then（）resolve('模拟AJAX请求-成功结果')// reject被调用后，rejected状态-已拒绝 catch（）reject(new Error('模拟AJAX请求-失败结果'))}, 2000)
</script>

了解三种状态的执行时机，先是执行Promise里面的同步语句，然后调用兑现和拒绝两种状态，等到 异步代码执行完结果在返回给两种状态。

---

07-使用Promise + XHR获取省份列表

---

步骤：

* 1. 创建Promise对象

* 2. 执行XHR异步代码，获取省份列表

* 3. 关联成功或失败函数，做后续处理

---

代码示例

<script>// 1. 创建Promise对象const p = new Promise((resolve,reject) => {// 2. 执行XHR异步代码，获取省份列表const xhr = new XMLHttpRequest()xhr.open('GET','http://hmajax.itheima.net/api/province')xhr.addEventListener('loadend',() => {// 查看响应状态码// console.log(xhr.status)if (xhr.status >= 200 && xhr.status < 300) {resolve(JSON.parse(xhr.response))  //字符串转对象} else {// 错误我们需要创建一个错误实例对象，并且给构造函数传递错误信息。当实现传递给对调函数reject(new Error(xhr.response))  }})xhr.send()})// 3. 关联成功或失败函数，做后续处理p.then(result => {document.querySelector('.my-p').innerHTML = result.list.join('<br>')}).catch(error => {// 服务器返回的错误信息返回给页面document.querySelector('.my-p').innerHTML = error.message})</script>

---

08-封装简易的axios-查询、请求、提交

---

需求：基于Promise + XHR 封装 myAxios函数，获取省份列表展示。

---

• 目标：封装_简易axios函数_获取省份列表
  1. 定义myAxios函数，接收配置对象，返回Promise对象
  * 2. 发起XHR请求，默认请求方法为GET
  * 3. 调用成功/失败的处理程序
  * 4. 使用myAxios函数，获取省份列表展示

---

代码示例

function myAxios(config) {return new Promise((resolve, reject) => {const xhr = new XMLHttpRequest()if (config.params) {const paramsObj = new URLSearchParams(config.params)const queryString = paramsObj.toString()config.url += `?${queryString}`}xhr.open(config.method || 'GET', config.url)xhr.addEventListener('loadend', () => {if (xhr.status >= 200 && xhr.status < 300) {resolve(JSON.parse(xhr.response))} else {reject(new Error(xhr.response))}})if (config.data) {const jsonStr = JSON.stringify(config.data)xhr.setRequestHeader('Content-Type', 'application/json')xhr.send(jsonStr)} else {xhr.send()}})
}
//下面直接调用函数（就先使用axios（）一样的）根据实际需求配置  myAxios({url: 'http://hmajax.itheima.net/api/register',method: 'POST',data: {usename: 'myaxios010',password: '99999999'}}).then(result => {console.log(result)}).catch(error => {console.dir(error)  })})

---

2023年8月7日15:38:27

会有综合案例，会单独出一期，同时会补全。