Ajax原理-XMLHttpRequest

最新推荐文章于 2025-06-20 22:15:06 发布

原创最新推荐文章于 2025-06-20 22:15:06 发布 · 662 阅读

CC 4.0 BY-SA版权

文章标签：

定义：XMLHpptRequest(XHR)对象用于与服务器交互。通过XMLHttpRequest可以在不刷新页面的情况下请求特定URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest在AJAX编程中被大量使用。

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

好处：掌握使用XHR与服务器进行数据交互，了解axios内部原理

使用XMLHttpRequest

步骤：

创建XMLHttpRequest对象
配置请求方法和请求url地址
监听loadend事件，接收响应结果
发起请求

const xhr = new XMLHttpRequest()
xhr.open('请求方法'，'请求url网址')
xhr.addEventListener('loadend',() => {
//响应结果
console.log(xhr,response)
})

//发送请求
xhr.send()

需求：获取并展示所有省份名字

const xhr = new XMLHpptRequest()
xhr.open('GET','http://hmajax.itheima.net/api/province')
xhr.addEventListener('loadend',() => {
console.log(xhr.response)
//对响应结果做后续处理
})
xhr.send()

总结：

AJAX原理是什么？

XMLHttpRequest对象

为什么学习XHR？

有更多与服务器数据通信方式

了解axios内部原理

XHR使用步骤？

创建XHR对象

调用open方法，设置url和请求方法

监听loadend事件，接收结果

调用send方法，发起请求

let xhr = new XMLHttpRequest()
xhr.open('请求方法','请求url网址')
xhr.addEventListener('loadend',() => {
//响应结果
console.log(xhr.response)
})
xhr.send()

XMLHttpRequest——查询参数

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

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

案例：地区查询

需求：输入省份和城市名字，查询地区列表

请求地址：http://hmajax.itheima.net/api/area?参数名1=值1&参数名2=值2

//1.创建URLSearchParams 对象
const paramsObj = new URLSearchParams({
参数名1：值1，
参数名2：值2
})

//2.生成指定格式查询参数 字符串
const queryString = paramsObj.toString()
//结果：参数名1=值1&参数名2=值2

HMLHttpRequest——数据提交

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

核心

请求头设置Content-Type:application/json

请求体携带JSON字符串

const xhr = new XMLHttpRequest()
xhr.open('请求方法'，'请求url网址')
xhr.addEventListener('loadend'() => {
console.log(xhr.response)
})

//告诉服务器，我传递的内容类型，是JSON字符串
xhr.setRequestHeader('Content-Type','application/json')
//准备数据并转成JSON字符串
const user = {username:'itheima007',password:'765321'}
const userStr = JSON.stringify(user)
//发送请求体数据
xhr.send(userStr)

Promise

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

好处：

逻辑更清晰
了解axios函数内部运作机制
能解决回调函数地狱问题

语法：

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

总结

1.什么是Promise？

表示（管理）一个异步操作最终状态和结果值的对象

2.为什么学习Promise?

成功和失败状态，可以关联对应处理程序

了解axios内部原理

3.Promise使用步骤？

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

Promise的三种状态

作用：了解Promise对象如何关联的处理函数，以及代码执行顺序

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

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

已兑现（fulfilled）:意味着，操作成功完成

已拒绝（rejected）:意味着，操作失败

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

使用Promise+XHR获取省份列表

需求：使用Promise管理XHR获取省份列表，并展示到页面上

步骤：

创建Promise对象
执行XHR异步代码，获取深粉列表
关联成功或失败函数，做后续处理

分装——简易axios_获取省份列表

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

步骤：

定义myaxio函数，接收配置对象，返回Promise对象
发起XHR请求，默认请求方法为GET
调用成功/失败的处理程序
使用myAxios函数，获取深分列表展示

function myAxios(config){
return new Promise((resolve,reject)=>{
//XHR请求
//调用成功/失败的处理程序
})}

myAxios({
url:'目标资源地址'
}).then(result => {
}).catch(error => {
})

需求：修改myAxios函数支持传递查询参数，获取”辽宁省“，”大连市“对应地区列表展示

步骤：

myAios函数调用后，判断params选项
基于URLSearchParams转换查询参数字符串
使用自己封装的myAxios函数展示地区列表

function myAxios(config){
return new Promise((resolve,reject)=>{
//XHR请求——判断params选项，携带查询参数
//调用成功/失败的处理程序
})
}

myAxios({
url:'目标资源地址'，
params:{
参数名1：值1，
参数名2：值2
}
})

封装-简易axios_注册用户

需求：修改myAaxios函数支持传递请求体数据，完成注册用户功能

步骤：

myAxios函数调用后，判断data选项
转换数据类型，在send方法中发送
使用自己封装的myAxios函数完成注册用户功能

function myAxios(config){
return new Promise((resolve,reject)=>{
//XHR请求——判断data选项，携带请求体
//调用成功/失败的处理程序
})
}

myAxios({
url:'目标资源地址'，
data:{
参数名1：值1
参数名2：值2
}})