今天動手寫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相關的內容,但沒找到出問題的原因。