【JavaScript】Ajax简单封装
什么是Ajax?
AJAX 是异步的 JavaScript 和 XML(Asynchronous JavaScript And XML)。简单点说,就是使用 XMLHttpRequest 对象与服务器通信。 它可以使用 JSON,XML,HTML 和 text 文本等格式发送和接收数据。AJAX 最吸引人的就是它的“异步”特性,也就是说他可以在不重新刷新页面的情况下与服务器通信,交换数据,或更新页面。
Ajax基本代码实现
var xhr = new XMLHttpRequest()
xbr.open('GET', '/api', false)
xhr.onreadystatechange = function () {
// readyState状态码变化:
// 0(未初始化) 1(载入) 2(载入完成) 3(交互) 4(解析完成)
if (xhr.readyState == 4) {
// status状态码变化:
// 2xx(请求成功)3xx(重定向)4xx(客户端请求错误)5xx(服务端错误)
if (xhr.status == 200) {
alert(xhr.responseText)
}
}
}
xhr.send()
基于Promise发送Ajax请求
/**
* @description 基于Promise发送Ajax请求
* @param {String} url 请求地址
*/
function queryDate(url) {
const promise = new Promise(function (resolve, reject) {
const xhr = new XMLHttpRequest()
xhr.open('get', url)
xhr.send()
if (xhr.onload) {
// onload 只有状态码为4时才能回调一次函数
xhr.onload = function () {
if (xhr.status === 200) {
// 处理正常情况
resolve(xhr.responseText)
} else {
// 处理异常的情况
reject('服务器错误')
}
}
} else {
// 支持低版本ie
// onreadystatechange是只要返回的状态码只要变化时就回调一次函数
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// 处理正常情况
resolve(xhr.responseText)
} else {
// 处理异常情况
reject('服务器错误')
}
}
}
})
return promise
}