使用原生javascript實現ajax

　　以前使用ajax基本上都是使用jquery框架實現的，前段時間在知乎上看到有人在抱怨，說是面試的時候面試官瞧不起他使用框架來實現。於是想多接觸一下原生javascript。

　　主要參考了http://www.cnblogs.com/yjzhu/archive/2013/01/28/2879542.html關於ajax基礎的介紹。非常感謝。

　　ajax分為4個步驟：1、創建ajax對象，2、連接伺服器，3、發送請求，4、接收返回值。

首先創建對象：

　　這裡由於不同瀏覽器所提供的環境不一樣，因此參考了另一種的創建方式：

　　這裡使用了異常處理

 1 var request = false;  
 2          try {  
 3              request = new XMLHttpRequest();  
 4          }  
 5          catch (trymicrosoft) {  
 6              try {  
 7                  request = new ActiveXObject("Msxml2.XMLHTTP");  
 8              }  
 9              catch (othermicrosoft) {  
10                  try {  
11                      request = new ActiveXObject("Microsoft.XMLHTTP");  
12                  }  
13                  catch (failed) {  
14                      request = false;  
15                  }  
16              }  
17          }

連接伺服器：

使用open()函數，open('GET',url,true)，第一個參數為'POST'或'GET'，第二個參數為url，第三個參數為是否非同步傳輸。

request.open('GET',url,true);

 發送數據：

request.send();

接收返回值：onreadystatechange事件接收返回信息。

readyState：請求狀態，返回的是整數（0-4）。

0（未初始化）：還沒有調用 open() 方法。

1（載入）：已調用 send() 方法，正在發送請求。

2（載入完成）：send() 方法完成，已收到全部響應內容。

3（解析）：正在解析響應內容。

4（完成）：響應內容解析完成，可以在客戶端調用。

status：請求結果，返回 200 或者 404。

200 => 成功。

404 => 失敗。

responseText：返回內容，即我們所需要讀取的數據。需要註意的是：responseText 返回的是字元串。

在這裡補充一條：如果在onreadystatechange事件中使用return返回特定數據的，請將open()函數中設置為false（即使用同步方式傳遞數據），否則return將在onreadystatechange之前就執行，傳輸undefined數據。

整體函數是這樣的：

 1 function ajax_get(url,node){
 2 
 3    request.open("GET",url,true);
 4    request.send();
 5    request.onreadystatechange=function(){
 6        if(request.readyState == 4){  //4為完成
 7            if(request.status == 200){    //200為成功
 8               fnSucc(request.responseText,node);                      
 9            }else{
10               alert(request.status);
11            }                   
12        }         
13    }
14 }

在這裡的node我指的是節點。由於我的程式中ajax成功會修改select節點下的option，因此我將節點直接放入。這裡接受到的data數據為json格式的二維數組。

 1 //ajax交互成功後插入節點
 2 function fnSucc(data,node){
 3         var arr = eval(data);
 4         for(i in arr){
 5             var opt = document.createElement("option");
 6             opt.value=arr[i].mark;
 7             opt.text=arr[i].name;
 8             node.appendChild(opt);
 9        }
10  }

下麵這個函數用於清空select節點下的option。

//清空某個select節點下的option
function cleanOpt(node){
    node.options.length=0;
}