原生Ajax書寫

標籤：需要   部分   資料   cat   app   其他   伺服器   override   不同的   

1.建立XMLHttpRequest對象

function createXMLHTTPRequest() {                      //1.建立XMLHttpRequest對象                      //這是XMLHttpReuquest對象無部使用中最複雜的一步                      //需要針對IE和其他類型的瀏覽器建立這個對象的不同方式寫不同的代碼                      var xmlHttpRequest;                   if (window.XMLHttpRequest) {                          //針對FireFox，Mozillar，Opera，Safari，IE7，IE8                         xmlHttpRequest = new XMLHttpRequest();                          //針對某些特定版本的mozillar瀏覽器的BUG進行修正                          if (xmlHttpRequest.overrideMimeType) {                              xmlHttpRequest.overrideMimeType("text/xml");                          }                      } else if (window.ActiveXObject) {                          //針對IE6，IE5.5，IE5                          //兩個可以用於建立XMLHTTPRequest對象的控制項名稱，儲存在一個js的數組中                          //排在前面的版本較新                          var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];                          for ( var i = 0; i < activexName.length; i++) {                              try {                                  //取出一個控制項名進行建立，如果建立成功就終止迴圈                                  //如果建立失敗，回拋出異常，然後可以繼續迴圈，繼續嘗試建立                                 xmlHttpRequest = new ActiveXObject(activexName[i]);                               if(xmlHttpRequest){                                  break;                              }                           } catch (e) {                              }                          }                      }                      return xmlHttpRequest;               }     

 

2.get請求

function get(){      var req = createXMLHTTPRequest();      if(req){          req.open("GET", "http://test.com/?keywords=手機", true);          req.onreadystatechange = function(){              if(req.readyState == 4){                  if(req.status == 200){                      alert("success");                  }else{                      alert("error");                  }              }          }          req.send(null);      }  }  

 

 3.post請求

   function post(){      var req = createXMLHTTPRequest();      if(req){          req.open("POST", "http://test.com/", true);          req.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=gbk;");             req.send("keywords=手機");          req.onreadystatechange = function(){              if(req.readyState == 4){                  if(req.status == 200){                      alert("success");                  }else{                      alert("error");                  }              }          }      }  }  

 

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——伺服器產生內部錯誤

 

原生Ajax書寫