ajax是日常开发最常用的,写两种,最简易版和promise版
注意 xhr.readyState 和 xhr.status 的取值
具体可以去文档查看
https://www.w3cschool.cn/ajax/
最简易版
function ajax(url, callback) {
// 不考虑IE6
const xhr = new XMLHttpRequest()
xhr.open('Get', url, true)
/*规定请求的类型、URL 以及是否异步处理请求。
method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)
*/
xhr.onreadystatechange = function(){
if (xhr.readyState === 4) {
/** 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
**/
if (xhr.status === 200) {
callback(xhr.responseText)
} else {
// 其他各种情况,这里只简写
console.log(xhr.status)
}
}
}
xhr.send(null)
}
promise版
function ajax(url){
const p = new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest()
xhr.open('Get', url, true)
xhr.onreadyStateChange = function(){
if (xhr.readyState === 4) {
if (xhr.status === 200) {
resolve(JSON.parse(xhr.responseText))
} else if (xhr.status === 404) {
reject(new Error('404 not found'))
}
// 这里状态码404 仅举一个失败的例子
}
}
xhr.send(null)
})
return p
}
// 调用
const url = 'data.json'
ajax(url).then(res => console.log(res))
.catch(err => console.log(err))