ajax

Ajax的核心是 XMLHttpReuest 对象,简称 XHR

由于 IE7 之前存在不同的 XHR 对象,所以如果要兼容所有浏览器,就必须做预处理。对于其他浏览器,任何版本都支持相同的 XHR 对象。仅仅 IE7 之前有差异。

  • IE7 之前存在 MSXML2.XMLHttp.6.0–MSXML2.XMLHttp.3.0–MSXML2.XMLHttp 这三个版本

构造函数

在其他浏览器包括 IE7+ 中,直接使用 new XMLHttpRequest() 即可创建原生 XHR 对象。但是如果要做 IE7- 的兼容就必须预处理,因为 IE- 中并没有 XMLHttpRequest 这个构造函数,只有 ActiveXObject 这个构造函数并且该构造函数需指定版本

  • 下面的函数适用于所有浏览器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function createXHR() {  
if(typeof XMLHttpRequest != "undefined") { //若不是 IE7 之前的版本直接返回通用构造函数
return new XMLHttpRequest();
} else if(typeof ActiveXObject != "undefined") { //若是 IE7 之前的版本则需要逐个尝试找到对应的版本
if(typeof arguments.callee.activeXString != "string") {
const version = \["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"\];
version.forEach((item) => {
try {
new ActiveXObject(item);
arguments.callee.activeXString = item;
return;
} catch (error) {
console.log("无法创建 XHR 对象");
}
})
}
return new ActiveXObject(arguments.callee.activeXString);
} else {
throw new Error("该浏览器或宿主环境不支持 XHR 对象"); // 若是 IE7 的三个 XHR 版本都没有那说明运行环境不支持 XHR 对象
}
}
console.log(createXHR());
// XMLHttpRequest {onreadystatechange: null, readyState: 0, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}

常用属性

  • status 响应码,例如 200、404、500等
  • readyState 请求阶段过程
    • 0 未初始化,连 open() 都没调用
    • 1 开始,已经调用 open() ,尚未调用 send()
    • 2 发送,调用 send() ,但未收到响应
    • 3 接受,收到部分数据
    • 4 完成,收到所有数据,可以直接使用
  • statusText 响应码对应的提示文本
  • responseText 收到的内容主体,例如 html、css、js、图片等等
  • responseXML 如果收到的是 xml 才会有内容,否则就为空
  • getRequestHeader() 获取部分响应报文头部信息
  • getAllRequestHeaders() 获取所有响应报文头部信息
Author: Greatiga
Link: http://example.com/javaScript/ajax/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.