Ajax (Asynchronous JavaScript and XML) 是一种在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术。现代浏览器都支持Ajax,但Internet Explorer (IE) 特别是旧版本有其特殊的实现方式。
IE浏览器(特别是IE10及以下版本)在Ajax实现上有以下主要差异:
XMLHttpRequest
,而IE6/7使用ActiveXObject
attachEvent
而非标准addEventListener
XDomainRequest
而非标准XMLHttpRequest
处理跨域function createXHR() {
if (typeof XMLHttpRequest !== 'undefined') {
return new XMLHttpRequest(); // 现代浏览器
} else if (typeof ActiveXObject !== 'undefined') {
if (typeof arguments.callee.activeXString !== 'string') {
var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'],
i, len;
for (i = 0, len = versions.length; i < len; i++) {
try {
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
} catch (ex) {
// 跳过
}
}
}
return new ActiveXObject(arguments.callee.activeXString); // IE6/7
} else {
throw new Error('No XHR object available.');
}
}
var xhr = createXHR();
xhr.open('get', 'example.php?rand=' + Math.random(), true); // 添加随机参数
xhr.send(null);
或者设置请求头:
xhr.setRequestHeader("If-Modified-Since", "0");
xhr.setRequestHeader("Cache-Control", "no-cache");
对于IE8/9的跨域请求:
function createCORSRequest(method, url) {
var xhr = new XMLHttpRequest();
if ('withCredentials' in xhr) {
// 现代浏览器
xhr.open(method, url, true);
} else if (typeof XDomainRequest !== 'undefined') {
// IE8/9
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
// 不支持CORS
xhr = null;
}
return xhr;
}
jQuery等库已经内置了对IE的兼容处理:
$.ajax({
url: 'example.php',
cache: false, // 防止缓存
success: function(data) {
// 处理数据
}
});
es5-shim
、es6-shim
等console.log
或alert
逐步调试通过以上方法,可以解决大多数Ajax在IE中的兼容性问题。
没有搜到相关的文章