原生js完成Ajax

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 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属性取值：

XHR对象收到相应后增加的属性

封装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)
});
}
}