Ajax

要點：最好先回答原生態Ajax使用的步驟，我們通常使用Jquery來實現Ajax請求和處理的。在回答
的時候儘量詳盡，包括方法的參數的個數，順序和作用   

參考：http://blog.csdn.net/hlinghling/article/details/52624757
http://blog.csdn.net/crystal6918/article/details/53310626

一、AJAX是什麼？

---

Ajax 是一種異步請求數據的一種技術

二、原生Ajax使用的步驟

---

(1)創建XMLHttpRequest對象,也就是創建一個異步調用對象.(兼容寫法)

var request;  
if (window.XMLHttpRequest)  
  {// 兼容 IE7+, Firefox, Chrome, Opera, Safari  
 request=new XMLHttpRequest();  
  }  
else  
  {// 兼容 IE6, IE5  
  request=newActiveXObject("Microsoft.XMLHTTP");  
  }  

(2)創建一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息.

• GET方法：

  req.open("GET", url, true);
  req.send(null);

• POST方法

xmlhttp.open("POST","ajax_test.html",true); 
//要成功發送請求頭部信息，必須在調用open方法之後且調用send方法之前調用setRequestHeader（）。 
//post請求一定要設置請求頭的格式內容
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
xmlhttp.send("fname=Henry&lname=Ford");  

(3)設置響應HTTP請求狀態變化的函數.
(4)發送HTTP請求.
(5)獲取異步調用返回的數據.

request.onreadystatechange=function() 
//異步請求 
  {  
  if (request.readyState==4 &&request.status==200)
  //內部寫回調函數  
    {  
   document.getElementById("myDiv").innerHTML=request.responseText;  
    }  
  }  

(6)使用JavaScript和DOM實現局部刷新.

三、XHR的用法和屬性

---

1.open(method,url,async);-----參數含義要記住  

method：請求的類型；GET 或 POST
url：文件在服務器上的位置
async：true（異步）或 false（同步）

2.send(string) post請求時才使用字符串參數，否則不用帶參數。

3.獲取響應的一些方法：

4.異步請求可以檢測XHR對象的readyState屬性，該屬性表示請求/響應過程的當前活動階段：

0：未初始化，尚未調用open（）方法
1：啓動。已經調用open（）方法，但尚未調用send（）方法。
2：發送。已經調用send（）方法，但尚未接收到響應。
3：接收。已經接收到部分相應數據。
4：完成。已經接受到全部響應數據，而且已經可以在客戶端使用了。

只要readyState的值由一個值變成另一個值，就會觸發一次readystatechange事件。可以利用這個事件來檢測每次狀態變化後readyState的值。    

5.在接收到響應之前還可以調用abort（）方法來取消異步請求：

xhr.abort（）;

調用這個方法後，XHR對象會停止觸發事件，而且也不再允許訪問任何與響應有關的對象屬性。 在終止請求之後，還應該對XHR對象進行解引用操作。
由於內存原因，不建議重用XHR對象。

四、原生Ajax代碼（手撕）

---

<script>
  var xmlhttp;

  function createXMLHttpRequest(){
    xmlhttp=null;

    if (window.XMLHttpRequest){
      xmlhttp=new xmlHttpRequest(); //Netscape瀏覽器中的創建方式
    }else if(window.ActiveXObject){
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//IE瀏覽器的創建方式
    }

    //異步調用服務器段數據
    if(xmlhttp!=null){
      xmlhttp.open("GET/POST",url,true);  //創建HTTP請求
      xmlhttp.onreadystatechange=httpStateChange;//設置HTTP請求狀態變化的函數，設置回調函數
      xmlhttp.send(null);  //發送請求
    }else{
      alert("不支持XHR")
    }
  }

   //響應HTTP請求狀態變化的函數，也就是回調函數
  function httpStateChange(){//判斷異步調用是否完成
    if(xmlhttp.readyState==4){//readyState==4表示後臺處理完成了
      if(xmlhttp.status==200||(xmlhttp.status==0){//狀態碼爲0是本地響應成果，200表示處理的結果是ok的
      //判斷異步調用是否成功,如果成功開始局部更新數據
        //code...
      }else{
        alert("出錯狀態碼："+xmlhttp.status+"出錯信息："+xmlhttp.statusText);
      }
    }
  }
</script>

五、XHR2

---

超時設定

XHR有一個timeout屬性，表示請求在等待響應多少毫秒之後就終止。
在給timeout設置一個數值後，如果在規定的時間內瀏覽器還沒有接收到響應，那麼就會觸發timeout事件，進而會調用ontimeout事件處理程序。

xhr.open("get","example.php",true);
xhr.timeout = 1000; //將超時設置爲1秒鐘=1000毫秒
xhr.ontimeout = function(){
    alert("request didn't return in a second");
}
xhr.send(null);

這個例子設置timeout屬性爲1000毫秒，意味着如果請求在1秒鐘內還沒有返回，就會自動終止。請求終止時，會調用ontimeout事件處理程序。

六、Ajax的優缺點

---

優點：

    無刷新更新數據
    異步與服務器通信
    前端和後端負載平衡
    基於標準被廣泛支持
    界面與應用分離

缺點：

• 動態更新的頁面，用戶無法回到前一個頁面狀態。解決方案是使用URL片斷標識符（通常被稱爲錨點，即URL中#後面的location. hash）來保持跟蹤。
• AJAX的安全問題
• 對搜索引擎支持較弱，降低系統性能
• 給調試帶來了很大的困難
• 違背URL和資源定位的初衷：你在一個URL地址下面看到的和我在這個URL地址下看到的內容是不同的。這個和資源定位的初衷是相背離的。

七、jQuery的Ajax

---

• $.ajax( )是最底層的方法
• load( )、.get()、$.get()、$ .post( )是第二層方法
• .getScript()和$.getScript()和$ .getJSON( )是第三層方法

(一)load( )

load(url [,data] [,callback])

1.url：請求HTML頁面的URL地址
2.data（可選）：發送至服務器的key/value數據
3.callback（可選）：請求完成時的回調函數，無論請求成功還是失敗。

$(#send).click(function(){
    $("container").load("test.html");
})

傳遞方式   

若load（）方法指定了參數data，則採用POST方式；如果沒有指定則採用GET方式傳遞：

//無參數傳遞，則是GET方式
$("#container").load("test.html",function(){
    ……
})

//有參數傳遞，則是POST方式
$("#container").load("test.html",{name:"rain"},function(){
    ……
})

 回調參數

對於必須在加載完成後才能繼續的操作，load（）方法提供了回調函數。
此函數有三個參數，分別代表responseText、textStatus和XMLHTTPRequest對象。

$("#container").load("test.html",function(responseText,textStatus,XMLHTTPRequest){
    //responseText：請求返回的內容
    //textStatus：請求狀態：success、error、notmodified、timeout4中
    //XMLHTTPRequest對象
})

在load（）方法中，無論Ajax請求是否成功，只要請求完成（complete），回調函數就被觸發。

(二)$.get（）

$.get()方法使用GET方式來進行異步請求。

$.get(url [,data] [,callback] [,type])

1.url：請求的url地址
2.data（可選）：發送至服務器的key/value數據，會作爲QueryString附加到請求URL中。
3.callback（可選）：載入成功時的回調函數（只有Response的返回狀態是success才調用該方法），自動將請求結果和狀態傳遞給該方法。
4.type（可選）：服務端返回內容的格式，包括xml、html、script、json、text

$.get("getInfo",{
            username:$("#username"),
            content:$("#content")
        },function(data,textStatus){
            //data：返回的內容
            //textStatus：請求狀態，success、error、notmodified、timeout
})

get方法中的回調函數只有當數據成功返回後才被調用，這點與load（）方法不一樣。

(三)$.post（）

$.post("getInfo",{
            username:$("#username"),
            content:$("#content")
        },function(data,textStatus){
            $("#resContent").html(data);
})

（四）.getScript（）$.getScript（）$ .getScript()方法來直接加載js文件。

$.getScript("test.js");

與其他方法一樣，$.getScript()方法也有回調函數，它會在js文件成功載入後運行。

（五）$.getJSON（）

.getJSON（）用於加載JSON文件，與$.getJSON（）用於加載JSON文件，與$ .getScript()用法相同。

$.getJSON("test.json",function(data){
    //data：返回的數據
})

（六）ajax（）
$.ajax()方法是jQuery最底層的Ajax實現。它的結構爲：

$.ajax(options)

該方法只有一個參數，但在這個對象裏包含了$.ajax()方法所需要的請求設置以及回調函數等信息。
參數以key/value的形式存在，所有參數都是可選的。常用參數有以下這些：

• url：發送請求的地址，默認爲當前頁
• type：請求方式（POST或GET），默認爲GET。其他HTTP請求方法，例如PUT和DELETE也可以使用，但僅部分瀏覽器支持。
• timeout：設置請求超時時間（毫秒）。此設置將覆蓋$.ajaxSetup()方法的全局設置。
• data：發送到服務器的數據。GET請求將附加在URL後面。
• dataType：預期服務器返回的數據類型。如果不指定，jQuery將自動根據HTTP包MIME信息返回responseXML或responseText，並作爲回調函數參數傳遞。
  可用的類型如下：

xml
html：返回純文本HTML信息，包含的script標籤會在插入DOM時執行。
script：返回純文本js代碼。
json：返回json數據
jsonp：JSONP格式
text

• beforeSend：發送請求前可以修改XMLHttpRequest對象的函數。例如添加自定義HTTP頭。在beforeSend中如果返回false可以取消本次Ajax請求。XMLHttpRequest是唯一的參數。

function(XMLHttpRequest){
    //this：調用本次Ajax請求時傳遞的options參數
}

• complete：請求完成後調用的回調函數（請求成功或失敗時均調用）。
  參數：XMLHttpRequest對象和一個描述成功請求類型的字符串。

function(XMLHttpRequest,textStatus){
    //this：調用本次Ajax請求時傳遞的options參數
}  

• success：請求成功後調用的回調函數。有兩個參數：

  1.由服務器返回，並根據dataType參數進行處理後的數據
  2.描述狀態的字符串
  

function(data,textStatus){
    //this：調用本次Ajax請求時傳遞的options參數
    //data：可能是XML、JSON、HTML、text等
}

• error：請求失敗時被調用的函數。該函數有三個參數，即XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象（可選）。

function(XMLHttpRequest,textStatus,errorThrown){
    //this：調用本次Ajax請求時傳遞的options參數
    //通常textStatus和errorThrown只有其中一個包含信息
}

• global：默認爲true，表示是否觸發全局Ajax事件。設置爲false將不會觸發全局Ajax事件。

代碼舉例：

$.ajax({  
            url:"url",  
            type:"get",  
            dataType:"json",  
            data:{  
                userID:"1"  
            },  
            success:function(response){  

            },  
            error:function() {  
            }  
        });  

八、對Ajax進行超時處理

---

設置timeout的時間，通過檢測complete時status的值判斷請求是否超時，如果超時執行響應的操作。   

var ajaxTimeoutTest = $.ajax({
　　url:'',  //請求的URL
　　timeout : 1000, //超時時間設置，單位毫秒
　　type : 'get',  //請求方式，get或post
　　data :{},  //請求所傳參數，json格式
　　dataType:'json',//返回的數據格式
　　success:function(data){ //請求成功的回調函數
　　　　alert("成功");
　　},
　　complete : function(XMLHttpRequest,status){ //請求完成後最終執行參數
　　　　if(status=='timeout'){//超時,status還有success,error等值的情況
 　　　　　 ajaxTimeoutTest.abort();
　　　　　  alert("超時");
　　　　}
　　}
});