原生JavaScript手写Ajax
代码实现如下：
<script>
// 封装通用的xhr对象，兼容各个版本
function creatXHR() {
// 判断浏览器是否将XMLHttpRequest作为本地对象实现，针对IE7,firefox, opera等
if (typeof XMLHttpRequest != "undefined") {
return new XMLHttpRequest();
}
else if (typeof ActiveXObject != "undefined") {
// 将所有可能出现的ActiveXObject版本放在一个数组中
var xhrArr = [
'Microsoft.XMLHTTP',
'MSXML2.XMLHTTP.6.0',
'MSXML2.XMLHTTP.5.0',
'MSXML2.XMLHTTP.4.0',
'MSXML2.XMLHTTP.3.0',
'MSXML2.XMLHTTP.2.0'
];
// 遍历创建XMLHttpRequest对象
var xhr;
for (let i = 0; i < array.length; i++) {
try {
// 创建XMLHrrpRequest对象
xhr = new ActiveXObject(xhrArr[i]);
break;
} catch (error) {
}
}
return xhr;
}
else{
throw new Error('不支持XMLHttpRequest对象');
}
}
// 创建xhr
var xhr = creatXHR();
// 存储获取到的数据
var data;
// 响应XMLHttpRequest对象状态变化的函数，onreadystatechange在readyState属性发生改变时触发
xhr.onreadystatechange = function (/* callback */) {
// 异步调用成功，响应内容解析完成，可以在客户端调用
if (xhr.readyState == 4) {
// 200 OK，304 读取缓存
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
// 获取服务器返回的数据
// 数据以字符串类型存放在 xhr.responseText
// json序列化解析xhr.responseText
// 将ajax获取到的数据传递出去
data = JSON.parse(xhr.responseText);
// 或者在参数中传入callback，在此处执行回调函数
// callback && callback();
}
}
};
// 创建请求，这里只是创建，并不发送
xhr.open("get", "./xxx.json", true);
// 发送请求
xhr.send(null);
/* 使用post方法，传参方式
// 创建请求，这里只是创建，并不发送
xhr.open("post", "./xxx.json", true);
// 设置http头部信息
xhr.setRequestHeader("Content-type", "application/x-www-form-urlcoded");
xhr.send({param1:'strrr', param2:789});
*/
</script>本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
