愛不釋手的Ajax

什麼是Ajax？爲何要使用它？

Ajax全稱 Asynchronous(異步) JavaScript and XML，終結了「單擊，等待」的交互模式，它是指一種建立交互式網頁應用的網頁開發技術，Ajax並非一種技術，它是一系列規範的集合，包含：

• 基於web標準（standards-basedpresentation）XHTML+CSS的表示；

• 使用 DOM（Document ObjectModel）進行動態顯示及交互；

• 使用 XML 和 XSLT 進行數據交換及相關操做；

• 使用 XMLHttpRequest 進行異步數據查詢、檢索；

• 使用 JavaScript 將全部的東西綁定在一塊兒。

Ajax應用程序的優點在於：

1. 經過異步模式，提高了用戶體驗

2. 優化了瀏覽器和服務器之間的傳輸，減小沒必要要的數據往返，減小了帶寬佔用

3. Ajax引擎在客戶端運行，承擔了一部分原本由服務器承擔的工做，從而減小了大用戶量下的服務器負載。

基礎-HTTP協議

在使用Ajax以前，必須先了解客戶端和服務器間通訊的基礎是怎樣的，在這裏，他們使用的規則是HTTP協議，二者之間經過必定格式的報文（請求報文和響應報文）進行交流，詳細的看這篇文章。連接：http://www.jianshu.com/p/8163...

核心-XMLHttpRequest對象

支撐起Ajax大橋的即是XHR這個對象了，它是一種支持異步請求的技術。簡而言之，XmlHttpRequest可讓JavaScript向服務器提出請求並處理響應，而不阻塞用戶。經過XMLHttpRequest對象，Web開發人員能夠在頁面加載之後進行頁面的局部更新。
在使用它以前，咱們先來了解一下XHR對象，簡單起見。關於不一樣瀏覽器之間的XHR對象暫時不敘述，直接使用原生XHR對象，在瀏覽器裏面建立一個新的XHR對象var xhr = new XMLHttpRequest();，在調試窗口裏面輸出它能夠看到：

它是一個對象，擁有一些屬性，常見的以下：

• readyState：該屬性表示請求/響應過程的當前活動階段，可用取值以下：

0：請求未初始化（尚未調用 open()）。
1：請求已經創建，可是尚未發送（尚未調用 send()）。
2：請求已發送，正在處理中（一般如今能夠從響應中獲取內容頭）。
3：請求在處理中；一般響應中已有部分數據可用了，可是服務器尚未完成響應的生成。
4：響應已完成；已經接收到所有響應數據，並且已經能夠在客戶端使用了。

只要readyState屬性的值發生變化，即可以觸發readystatechange事件，下面來體驗一下。

//演示readystatechange事件
var log = function(tmp){
    console.log(tmp);
};
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    log(xhr.readyState);
};
xhr.open("get","./content.txt",true);
xhr.send(null);

觀察運行結果，能夠很明確地看到狀態的發生改變。

• responseText：做爲響應主體被返回的文本，不管內容類型是什麼，響應主體的內容都會保存在這裏。

• responseXML：若是響應的內容類型是text/xml或application/xml，這個屬性中將保存着響應數據的XML DOM文檔。

• status：響應的HTTP狀態，就是HTTP的狀態代碼，200,304（表示請求的資源沒有被修改，能夠直接使用瀏覽器中緩存的版本）這些，確保接收到適當的響應。

• statusText：HTTP狀態的說明

基礎用法

var xhr = new XMLHttpRequest();
//建立一個XHR對象
xhr.open("get","test.txt",true);
//啓動一個請求以備發送，這個時候xhr的readyState爲1
xhr.send(null);
//正式發送請求，readyState爲2，隨後請求成功，readyState爲4

咱們來詳細說一下細節。

• 首先是open方法：
  第一個參數是HTTP的請求方式，經常使用的好比get和post，第二個參數是請求的url，若是是get方式的話那麼通常請求的參數就附加在這裏。第三個參數是控制同步或者異步，true表示異步，false表示同步。簡單來講，若是使用同步的話，那麼會阻塞後面的代碼，必須等到本次請求完畢才能夠，異步則是另開一個線程去執行ajax，下面代碼繼續進行。

• 再說send方法：
  send方法有一個參數，這個參數將被寫入到請求報文裏面傳遞，上面說到了get方式的參數是直接寫到url裏面的，因此對於這種方法，send的參數應該爲null，而對於post方式，url和請求參數是分離的，因此須要寫入到send方法裏。

HTTP頭部信息

咱們可使用已有的API來對上面建立的請求報文進行增添或對響應報文進行處理，好比設置Cookie。

xhr.setRequestHeader("imake","myValue");//添加頭部信息
xhr.getResponseHeader(headerName);//獲取頭部信息
xhr.getAllResponseHeaders();//獲取所有頭部信息

GET請求

GET方法將須要查詢的字符串追加到URL的末尾，也就是在XHR的open方法的URL末尾進行添加，須要進行encodeURIComponent()處理，對此封裝函數以下：

function addURLParam(url,name,value){
    url+=(url.indexOf("?") == -1 ? "?" : "&");
    url+=encodeURIComponent(name)+"="+encodeURIComponent(value);
}
xhr.open("get",url,true);

POST請求

討論POST以前，咱們先回想一下，POST主要用在表單提交，表單提交的寫法不少，好比：

<button>提交</button>
<input type="submit" value="提交">
<div id="submit">我用來提交表單</div>

var sub = document.getElementById("submit");
sub.addEventListener("click",function(){
    document.getElementById("test").submit();
});

前兩種方式在使用的時候很是不便，好比咱們再檢測它們點擊以前須要進行表單驗證，那麼由於它們自身具備默認的提交功能，因此咱們得把它們的默認功能阻止一下，因此使用第三種比較舒服。
在表單進行post時，背地裏它將請求的Content-Type設置爲了application/x-www-form-urlencoded（這種類型是上傳不了文件的，先挖個坑），而且把表單序列化了。咱們來演示一下：

明白了傳統的post表單提交以後，咱們來講說Ajax，其實它也是模仿表單提交，因此要主動地告訴服務器，我是post方式，比較複雜，你作好準備，因此要設置Content-Type頭部信息爲application/x-www-form-urlencoded，其次是對錶單進行序列化，咱們可使用jQuery裏面的serialize()方法，測試以下：