原生Ajax書寫

1.建立XMLHttpRequest物件

Js程式碼  

1. function createXMLHTTPRequest() {     
2.                  //1.建立XMLHttpRequest物件     
3.                  //這是XMLHttpReuquest物件無部使用中最複雜的一步     
4.                  //需要針對IE和其他型別的瀏覽器建立這個物件的不同方式寫不同的程式碼     
5.                  var xmlHttpRequest;  
6.                  if (window.XMLHttpRequest) {     
7.                      //針對FireFox，Mozillar，Opera，Safari，IE7，IE8     
8.                     xmlHttpRequest = new XMLHttpRequest();     
9.                      //針對某些特定版本的mozillar瀏覽器的BUG進行修正     
10.                      if (xmlHttpRequest.overrideMimeType) {     
11.                          xmlHttpRequest.overrideMimeType("text/xml");     
12.                      }     
13.                  } else if (window.ActiveXObject) {     
14.                      //針對IE6，IE5.5，IE5     
15.                      //兩個可以用於建立XMLHTTPRequest物件的控制元件名稱，儲存在一個js的陣列中     
16.                      //排在前面的版本較新     
17.                      var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];     
18.                      for ( var i = 0; i < activexName.length; i++) {     
19.                          try {     
20.                              //取出一個控制元件名進行建立，如果建立成功就終止迴圈     
21.                              //如果建立失敗，回丟擲異常，然後可以繼續迴圈，繼續嘗試建立     
22.                             xmlHttpRequest = new ActiveXObject(activexName[i]);   
23.                             if(xmlHttpRequest){  
24.                                 break;  
25.                             }  
26.                          } catch (e) {     
27.                          }     
28.                      }     
29.                  }     
30.                  return xmlHttpRequest;  
31.              }     

 2.get請求

Js程式碼  

1. function get(){  
2.     var req = createXMLHTTPRequest();  
3.     if(req){  
4.         req.open("GET", "http://test.com/?keywords=手機", true);  
5.         req.onreadystatechange = function(){  
6.             if(req.readyState == 4){  
7.                 if(req.status == 200){  
8.                     alert("success");  
9.                 }else{  
10.                     alert("error");  
11.                 }  
12.             }  
13.         }  
14.         req.send(null);  
15.     }  
16. }  

 3.post請求

Js程式碼  

1.    function post(){  
2.     var req = createXMLHTTPRequest();  
3.     if(req){  
4.         req.open("POST", "http://test.com/", true);  
5.         req.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=gbk;");     
6.         req.send("keywords=手機");  
7.         req.onreadystatechange = function(){  
8.             if(req.readyState == 4){  
9.                 if(req.status == 200){  
10.                     alert("success");  
11.                 }else{  
12.                     alert("error");  
13.                 }  
14.             }  
15.         }  
16.     }  
17. }  

post請求需要設定請求頭

4.    readyState與status:

         readyState有五種狀態：

　　0 (未初始化)： (XMLHttpRequest)物件已經建立，但還沒有呼叫open()方法；
　　1 (載入)：已經呼叫open() 方法，但尚未傳送請求；
　　2 (載入完成)： 請求已經傳送完成；
　　3 (互動)：可以接收到部分響應資料；
　　4 (完成)：已經接收到了全部資料，並且連線已經關閉。
如此一來，你應該就能明白readyState的功能，而status實際是一種輔狀態判斷，只是status更多是伺服器方的狀態判斷。關於status，由於它的狀態有幾十種，我只列出平時常用的幾種：
　　100——客戶必須繼續發出請求
　　101——客戶要求伺服器根據請求轉換HTTP協議版本
　　200——成功
　　201——提示知道新檔案的URL
　　300——請求的資源可在多處得到
　　301——刪除請求資料
　　404——沒有發現檔案、查詢或URl
　　500——伺服器產生內部錯誤