AJAX原理 - XMLHttpRequest
定义:XMLHttpRequest
(XHR)对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL,获取数据。这允许网页在不影响用户操作的情况下,更新页面的局部内容。XMLHttpRequest
在 AJAX 编程中被大量使用。
![](https://i-blog.csdnimg.cn/direct/7f84677ac1884739b02b8fbd4ad8077d.png)
使用 XMLHttpRequest
步骤: 1. 创建 XMLHttpRequest 对象 2. 配置 请求方法 和请求 url 地址 3. 监听 loadend 事件,接收 响应结果 4. 发起请求
![](https://i-blog.csdnimg.cn/direct/d9fba23599d243dba8c8aa216658dbd4.png)
Promise
定义:Promise
对象表示异步操作最终的完成(或失败)以及其结果值
使用步骤:
![](https://i-blog.csdnimg.cn/direct/4682d5700df041ff84261dd5e0050549.png)
XML与promise和aixos的关系图
封装代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>封装_简易axios函数_注册用户</title>
</head>
<body>
<button class="reg-btn">注册用户</button>
<script>
/**
* 目标:封装_简易axios函数_注册用户
* 1. 判断有data选项,携带请求体
* 2. 转换数据类型,在send中发送
* 3. 使用myAxios函数,完成注册用户
*/
function myAxios(config) {
// 创建Promise对象
return new Promise((resolve, reject) => {
// 执行XHR异步代码,获取省份列表
const xhr = new XMLHttpRequest()
// 判断有params选项,携带查询参数
if (config.params) {
// 使用URLSearchParams转换,并携带到url上
const paramsObj = new URLSearchParams(config.params)
const queryString = paramsObj.toString()
// 把查询参数字符串,拼接在url?后面
config.url += `?${queryString}`
}
// 发起XHR请求,默认请求方法为GET
xhr.open(config.method || 'GET', config.url)
xhr.addEventListener('loadend', () => {
// 调用成功/失败的处理程序
// xhr如何判断响应成功还是失败的?
// 2xx开头的都是成功响应状态码
if (xhr.status >= 200 && xhr.status < 300) {
resolve(JSON.parse(xhr.response))
} else {
reject(new Error(xhr.response))
}
})
// 1. 判断有data选项,携带请求体
if (config.data) {
// 2. 转换数据类型,在send中发送
const jsonStr = JSON.stringify(config.data)
xhr.setRequestHeader('Content-Type', 'application/json')
xhr.send(jsonStr)
} else {
// 如果没有请求体数据,正常的发起请求
xhr.send()
}
})
}
document.querySelector('.reg-btn').addEventListener('click', () => {
// 3. 使用myAxios函数,完成注册用户
myAxios({
url: 'http://hmajax.itheima.net/api/register',
method: 'POST',
data: {
username: 'itheima999',
password: '666666'
}
})
//获取成功函数,做后续处理
.then(result => {
console.log(result)
})
//获取失败函数,做后续处理
.catch(error => {
console.dir(error)
})
})
</script>
</body>
</html>
标签:XML,axios,XMLHttpRequest,请求,url,xhr,简易版,config
From: https://blog.csdn.net/m0_73890048/article/details/141103847