IE中同一个url第二次AJAX调用无法触发onreadystatechange事件

 

今天在做一个ajax请求的时候，在IE下遇到了一个很奇怪的问题：

 

如果第二次通过XMLHttpRequest去请求一个URL，则不会触发onreadystatechange时间，虽然从调试插件来看，ie是进行了这次请求。

 

后来发现，这个是因为在ie下，如果请求的URL已经被浏览器cache，则调用send方法以后，xhr的readyState已经成为了4，即一开始就是请求完成的状态，当然以后readystate不会再被赋值，也不会触发onreadystatechange事件。

 

解决办法：在调用send后立即检查xhr的readystate，如果已经结束，则直接处理，不必再等待onreadystatechange事件。

 

		getJSON : function(url, callback, onerror) { // 处理ajax get请求
			var xhr = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
			onerror = $X.isFunction(onerror) ? onerror : null;
			xhr.open('GET', url, true);
			xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
			xhr.send();
			var f = function() {
				if (xhr.readyState == 4) {  
			        if (xhr.status == 200) {  
			            try { 
							var data = eval('('+xhr.responseText+')');
						} catch (e){
							onerror && onerror(); // 处理json解析错误
							xhr = null;
							return;
						};
						callback(data);
			        } else {
						onerror && onerror();
					}
					xhr = null; // fix memory leaks
			    }
			};
			if (xhr.readyState == 4) { // for the stupid ie
				f();
			} else {
				xhr.onreadystatechange = f;
			}
		}

 

检查状态干什么？给url上随机参数啊。

缓存的原因

xhr.open('POST', url, true);  

或者get参数后加上时间戳

楼主这样做的话比较麻烦，造成这种情况是因为浏览器缓存的问题（在Firefox中貌似没有这种现象），相对简单的办法就是在URL上加一个时间戳