1、Ajax技术
专于前端网页与后台服务器进行“交互”的技术,特点在于不需要加载整个网页的情况下,实现页面局部数据的刷新。
AJax技术在底层使用异步对象XMLHttpRequest,代替浏览器发起请求。
其原本实现可分为如下四步:
// 1、创建异步对象
let xmlHttp = new XMLHttpRequest();
// 2、绑定事件
/**
* readyState值的含义
* 0: 请求未初始化
* 1: 服务器连接已建立
* 2: 请求已接收 接收到了响应头
* 3: 请求处理中 正在下载响应体
* 4: 请求已完成,且响应已就绪
*/
xmlHttp.onreadystatechange = function () {
// 处理服务器返回数据
alert(xmlHttp.readyState)
}
// 3、设置初始请求
// type:代表请求方式 get/post
// 最后一个参数:
// true: 本次处理为异步处理请求
// false: 本次处理为同步处理请求
xmlHttp.open("type", "url", true);
// 4、发起请求
xmlHttp.send();
2、使用Promise封装Ajax请求
使用promise实际上也是基于以上四个步骤,参考别人我自己改了改:
/**
* @param {Object} obj
* {
* url: "" 请求地址,
* methods: "get/post" 请求方法,
* data: {} 请求参数
* }
* @returns {JSON}
*/
var promise_ajax = function (obj) {
//返回promise对象
return new Promise((res, rej) => {
let xhr = null
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest()
} else {
//兼容ie5、ie6
xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
// 监听请求状态变化
xhr.onreadystatechange = function () {
try {
if (xhr.readyState == 4 && xhr.status == 200) {
if (xhr.responseXML) {
res(xhr.responseXML)
} else {
res(JSON.parse(xhr.responseText))
}
} else {
if (xhr.status == 404) throw '404,未找到页面'
}
} catch (e) {
rej(e)
}
}
if (obj.methods != undefined && obj.methods != '') {
var method = String(obj.methods).toUpperCase;
if (method == 'GET') {
let data = '?'
for (let key in obj.data) {
data += key + '=' + obj.data[key] + '&'
}
data.substring(data.length - 1)
obj.data = data
}
} else {
throw new Error("请求方式不能为空!")
}
xhr.open(obj.methods, obj.url, true) //发起请求
//发送请求
method == 'GET' ? xhr.send() : xhr.send(obj.data);
})
}