Ajax原理: XMLHttpRequest(XHR) 对象用于与服务器交互,通过XHR在不断刷新页面的情况下请求特定URL,获取数据.
其中: axios内部采用XHR与服务器进行交互.
使用XMLHttpReques步骤:
1. 创建XMLHttpReques对象.
2. 配置请求方法和请求url地址
3. 监听loadend事件,接收响应结果
4. 发起请求
const xhr = new XMLHttpReques() xhr.open('请求方法', 'URL地址') xhr.addEventListener('loadend', () => { console.log(xhr.response) //转化为字符串 //JSON格式字符串转换为js对象 JSON.parse(xhr.response) }) xhr.send()
XMLHttpReques查询参数:
浏览器提供给服务器的额外信息,让服务器返回浏览器想要的数据.
语法: http://xxx.com/xxx/xxx?参数名1 = 值1&参数名2 = 值2
将js转化为查询参数的字符串类型的:
//1. 创建 URLSearchParams对象
const paramsObj = new URLSearchParams({
参数名1: 值1,
参数名2: 值2
})
//2. 生成指定格式查询参数 字符串
const queryString = paramsObj.toString()
//结果: 参数名1 = 值1 & 参数名2 = 值2
XMLHttpReques数据提交:
const xhr = new XMLHttpReques()
xhr.open('请求方法', 'URL地址')
xhr.addEventListener('loadend', () => {
console.log(xhr.response)
//转化为字符串
JSON.parse(xhr.response)
})
// 告诉服务器,我传递的内容类型,是JSON字符串
xhr.setRequestHeader('Content-Type', 'application/json')
// 准备数据并转化为JSON字符串
const user = {username: 'ly', password: '123'}
//JSON.stringify()先将对象转换为字符串
const userStr = JSON.stringify(user)
// 发送请求数据
xhr.send()
Promise-三种状态:
1. 待定(pending) :初始状态,既没有被兑现,也没有被拒绝
2. resolve()已兑现(fulfilled) :意味着,操作成功完成 ---> .then(回调函数)
3. reject()已拒绝(rejected) : 意味着,操作失败 ---> .catch(回调函数)
注意: promise对象一旦被兑现|拒绝就是已敲定了,状态无法再改变.
案例: 获取省份列表
<!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>
<p class="mp"></p>
<!--
目标: 封装_简易axios函数_获取省份列表
1. 定义myAxios函数,接收配置对象,返回Promise对象
2. 发起XHR请求,默认请求方法为GET
3. 调用成功/失败的处理程序
4. 使用myAxios函数,获取省份列表
-->
<script>
function myAxios(config){
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
// 判断是否有查询参数
if(config.params){
// 存在查询参数,需要将js参数改为查询参数
const paramsObj = new URLSearchParams(config.params)
const queryString = paramsObj.toString()
// 把查询字符串拼接到url?后面
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))
}
})
xhr.send()
})
}
myAxios({
url:'http://hmajax.itheima.net/api/area',
params:{
pname:'四川省',
cname:'成都市'
}
}).then(result => {
console.log(result);
document.querySelector('.mp').innerHTML = result.list.join('<br>')
}).catch(errpr => {
console.log(error);
document.querySelector('.mp').innerHTML = error.message
})
</script>
</body>
</html>