Ajax中onreadystatechange函數放在open()後不執行這件事

今天動手寫Ajax時遇到的問題:按照下面的順序來寫Ajax,功能是alert出txt文檔的內容,在Chrome下可以執行onreadystatechange中的事件,在IE11及以下、FF就不能執行onreadystatechange中的代碼。

ajax:
1.創建Ajax對象  ——new XMLHttpRequest;/ new ActiveXObject('Microsoft.XMLHTTP');
2.連接到服務器 ——open
3.發送請求 ——send
4.接收返回值 ——onreadystatechange

解決:將onreadystatechange代碼塊放到open之前,即可在Chrome、IE11及以下、FF完成功能。

爲了弄清楚原因以及查看這樣對Ajax的影響,添加了一些alert readyState,js代碼如下,html中就是寫一個"id=btn1"的按鈕,open中的文件自行替換:

可以發現onreadystatechange在Chrome和FF中是當狀態更改時才執行,在IE11不同版本以後則是順序有些不同,感興趣的小夥伴可以跟着查看一下,將onreadystatechange提到open前之後,就全靠函數內的if判斷狀態來控制http狀態碼不同情況要做的事情了;

以上提及的瀏覽器最後都能完成功能解析txt並彈出,而一般開發過程中是關注狀態ready State=4的情況就可以,所以可以忽略這些差異。(另外問了其他開發,這樣會不會造成資源浪費,大概意思是一般只關注4的,readyState從0到4有限可以忽略)

window.onload = function(){
	var oBtn = document.getElementById('btn1');
	
	oBtn.onclick = function(){
		if(window.XMLHttpRequest){
			var oAjax = new XMLHttpRequest();
		}
		else{
			var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
		};
		alert('創建對象後:'+oAjax.readyState);
		
		oAjax.onreadystatechange = function(){
			alert('enter onreadystatechange'+oAjax.readyState);
			if(oAjax.readyState==4){
				if(oAjax.status==200){
					alert(oAjax.responseText);
				}
				else{
					alert('status!=200:'+oAjax.readyState);
				};
			};
		};
		
		oAjax.open('GET', 'readmee.txt', true);
		alert('連接服務器後:'+oAjax.readyState);
		
		oAjax.send();
		alert('發送請求後'+oAjax.readyState);
	};
}

查看《JavaScript高級程序設計(第3版)》中關於onreadystatechange相關的內容,但沒找到出問題的原因。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章