AJAX問題之XMLHttpRequest status = 0

先看整個例子:

[html] view plaincopy
  1. <html>  
  2. <head>  
  3. <script type="text/javascript">  
  4.     var xmlhttp;  
  5.     function loadXMLDoc(url) {  
  6.         xmlhttp = null;  
  7.         if (window.XMLHttpRequest) {// code for all new browsers  
  8.             xmlhttp = new XMLHttpRequest();  
  9.         } else if (window.ActiveXObject) {// code for IE5 and IE6  
  10.             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  
  11.         }  
  12.   
  13.         if (xmlhttp != null) {  
  14.             xmlhttp.onreadystatechange = state_Change;  
  15.             xmlhttp.open("GET", url, true);  
  16.             xmlhttp.send(null);  
  17.         }  
  18.     }  
  19.   
  20.     function state_Change() {  
  21.         if (xmlhttp.readyState == 4) {  
  22.             alert(xmlhttp.status);  
  23.             alert(xmlhttp.responseText);  
  24.             if (xmlhttp.status == 200) {  
  25.                 alert("200");  
  26.             } else {  
  27.                 alert(xmlhttp.status);  
  28.                 alert("Problem retrieving XML data");  
  29.             }  
  30.         }  
  31.     }  
  32. </script>  
  33. <title>Document</title>  
  34. <button onclick="loadXMLDoc('file:///E:/test2.html')">click</button>  
  35. </head>  
  36. <body>  
  37. </body>  
  38. </html>  


1、爲什麼是xmlhttp.onreadystatechange = state_Change而不是xmlhttp.onreadystatechange = state_Change();

調用函數不是要用()寫明的嗎?難道它會根據函數名去找函數?問了幾個前端的,感覺對這個都是模模糊糊也不懂真正的原因在哪裏,最後還是去請教了另外一位師兄。


爲的是把整個函數給onreadystatechange,而不是將函數最後處理完的值返回給onreadystatechange。


再來理一遍思路,XMLHttpRequest對象是在我最近在重看xml的教程時看到了,立刻和AJAX聯繫在一起。

w3c這樣描述,它用於後臺與服務器交換數據,是開發者的夢想


現在的瀏覽器直接可以通過new拿到對象,但是IE就不可以了,xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

同時在IE6運行的時候瀏覽器會提示你設置ActiveX。


onreadystatechange是一個事件句柄,同樣功能的還有onclick這些,就是有點擊事件的時候會進行特定處理,具體看你的函數怎麼寫了。而onreadystatechange是由readyState觸發,readyState存着XMLHttpRequest的狀態,

 0: 請求未初始化
 1: 服務器連接已建立
 2: 請求已接收
 3: 請求處理中
 4: 請求已完成,且響應已就緒

readyState改變,調用onreadystatechange這個函數,注意,是這個函數,那我們是不是要賦值一個函數給他,而不是單純地返回一個值。


所以,問題解決了。

同時不同於:

[html] view plaincopy在CODE上查看代碼片派生到我的代碼片
  1. <button onclick="dodo()">click</button>  
這個是HTML裏面的,雖然也是事件句柄,但是格式不同。上面那個是在JS代碼裏面的。


2、XMLHttpRequest status = 0 問題。

xmlhttp.readyState =4的時候,一直xmlhttp.status != 200。便隨手輸出,發現xmlhttp.status=0,http協議裏可是沒這個狀態碼的。最後翻啊翻啊,找啊找啊,最後找到一個XMLHttpRequest的說明:http://www.w3.org/TR/XMLHttpRequest/ 。

The status attribute must return the result of running these steps:

status的值一定會返回運行這些步驟的結果。


1、If the state is UNSENT or OPENED, return 0.(如果狀態是UNSENT或者OPENED,返回0)
2、If the error flag is set, return 0.(如果錯誤標籤被設置,返回0)
3、Return the HTTP status code.(返回HTTP狀態碼)



如果在HTTP返回之前就出現上面兩種情況,就出現0了。

先說兩個button,一個是url是:file:///E:/test2.html,另外一個是:http://www.baidu.com。


第一個button的url訪問只是本地打開沒有通過服務器,自己可以用Wireshark捉包(感謝某位高人指點)。

這裏面還有一個問題,就是xmlhttp.readyState一直會變,

1: 服務器連接已建立

2: 請求已接收  

3: 請求處理中  

4: 請求已完成,且響應已就緒。

以這種情況看的話,應該是xmlhttp自己在模擬,因爲根本就沒通過服務器。本地直接打開而已。OPENED了,所以status爲0。


第二個button的url訪問雖然是其他域名,抓包是有的,但是,這是跨域訪問了,

If the cross-origin request status is network error

    This is a network error.

雖然去訪問了,應該是瀏覽器跨域的返回頭沒有允許,所以瀏覽器阻止,Access-Control-Allow-Origin這個屬性。


真確的方法是在自己的服務器,訪問自己域名內的url。

在tomcat上跑:

[html] view plaincopy在CODE上查看代碼片派生到我的代碼片
  1. <button onclick="loadXMLDoc('http://localhost:8080/TestServlet/MyServlet')">click</button>  
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章