XMLHttpRequest对象
通过
ActiveXObject实现（）
new ActiveXObject('Microsoft.XMLHTTP')- IE5是第一个引入
XMLHttpRequest对象的浏览器；- IE5中,
XHR对象是通过MSXML库中的一个ActiveX对象实现的；- IE中可能会遇到3种不同版本的
XHR对象，即MSXML2.XMLHttp.6.0,MSXML2.XMLHttp.3.0,MSXML2.XMLHttp；- 适用于IE7之前的版本
通过
XMLHttpRequest构造函数
var xhr = new XMLHttpRequest();- IE7+、FireFox、Opera、Chrome和Safari都支持原生
XMLHttpRequest对象；
生成XMLHttpRequest对象的方法
function createXHR() {
if (typeof XMLHttpRequest !== 'undefined') {
return new XMLHttpRequest();
} else if (typeof ActiveXObject !== 'undefined'){
// 支持IE7之前的版本
if (typeof arguments.callee.activeXString !== 'string') {
var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'];
for (var i = 0; i < versions.length; i++) {
try {
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
} catch (e) {
//
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
} else {
throw new Error("No XHR Object available!");
}
} XHR对象的readyState属性
readyState表示请求/响应过程的当前活动阶段；readyState值变化将触发readystatechange事件，利用该事件检测每次状态变化后的readyState值；- 通常只对
readyState值为4的阶段感兴趣，此时所有数据已就绪；- 为了确保跨浏览器兼容性，必须在调用
open()之前指定readystatechange事件处理程序；
readyState属性取值：
| 值 | 阶段 | 说明 |
|---|---|---|
| 0 | 未初始化 | 还没有调用 open() 方法 |
| 1 | 启动 | 已调用 send() 方法，正在发送请求 |
| 2 | 发送 | send() 方法完成，已收到全部响应内容 |
| 3 | 接收 | 正在解析响应内容 |
| 4 | 完成 | 响应内容解析完成，可以在客户端调用 |
XHR对象收到响应后添加的属性
| 属性 | 说明 |
|---|---|
| responseText | 作为响应主体被返回的文本； |
| responseXML | 若响应内容类型是”text/xml”或”application/xml”, 其值包含着响应数据的XML DOM文档； 对于非XML数据而言，responseXML值为 null |
| status | 响应的HTTP状态 |
| statusText | HTTP状态的说明 |
封装AJAX方法
/**
*
* @param type 请求类型：get,post,...
* @param url
* @param dataObj 请求参数：对象字面量{key:value,...}
* @param callback
* @param async 是否异步
*/function ajax(type, url, dataObj, callback, async) {
var paramsStr = buildParamsStr(dataObj), xhr = null;
if (type === 'get' && dataObj) {
url = addURLParams(url, paramsStr);
}
xhr = createXHR();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var status = xhr.status;
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
console.log(xhr.responseText);
callback && callback(xhr.responseText);
} else {
console.log("请求异常！状态码：" + xhr.status);
}
}
};
xhr.open(type, url, async); // open()方法启动一个请求以备发送；
if (type == 'get') {
xhr.send(null);
} else {
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
xhr.send(paramsStr);
}
} encodeURIComponent()方法
GET请求经常发生查询字符串格式引发的错误；- 可以对查询字符串中每个参数的名称和值用
encdoeURIComponent()进行编码；
function buildParamsStr(paramsObj){
var str = '';
for (key in paramsObj) {
// 排除原型中属性
if (dataObj.hasOwnProperty(key)) {
// 对查询字符串中每个参数名称和值用encdoeURIComponent()进行编码
str += "&" + encodeURIComponent(key) + "=" + encodeURIComponent(paramsObj[key]);
}
}
return str.slice(1);
}function addURLParams(url, paramsStr) {
url += (url.indexOf('?') === -1) ? '?' : '&';
url += paramsStr + '&' + new Date().getTime();
return url;
}调用示例
window.onload = function(){
var btn = document.getElementById("btn1");
btn.onclick = function(){
ajax('get', 'a.txt', function fnSucc(str){
alert(str)
});
}
}