jquery學習之AJAX

jquery學習之AJAX
1,關於AJAX的簡介

AJAX = Asynchronous JavaScript and XML（非同步 JavaScript 和 XML）。
AJAX 不是新的程式設計語言，而是一種使用現有標準的新方法。
AJAX 是與伺服器交換資料並更新部分網頁的藝術，在不重新載入整個頁面的情況下。

2，什麼是 AJAX ？AJAX = 非同步 JavaScript 和 XML。
AJAX 是一種用於建立快速動態網頁的技術。
通過在後台與伺服器進行少量資料交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。
傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面。

有很多使用 AJAX 的應用程式案例：新浪微博、Google 地圖、人人網、優酷等等。

3，AJAX的基本原理

XMLHttpRequest 是 AJAX 的基礎。
XMLHttpRequest 對象所有現代瀏覽器均支援 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用於在後台與伺服器交換資料。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。

XMLHttpRequest 對象的建立：

var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

AJAX請求
XMLHttpRequest 對象用於和伺服器交換資料。
向伺服器發送請求
如需將請求發送到伺服器，我們使用 XMLHttpRequest 對象的 open() 和 send() 方法：
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

方法	描述
open(method,url,async)	規定請求的類型、URL 以及是否非同步處理請求。 method：請求的類型；GET 或 POST url：檔案在伺服器上的位置 async：true（非同步）或 false（同步）
send(string)	將請求發送到伺服器。 string：僅用於 POST 請求

AJAX響應
伺服器響應
如需獲得來自伺服器的響應，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。

屬性	描述
responseText	獲得字串形式的響應資料。
responseXML	獲得 XML 形式的響應資料。

如：
xmlhttp.responseText;
xmlhttp.responseXML;

AJAX處理：
onreadystatechange 事件
當請求被發送到伺服器時，我們需要執行一些基於響應的任務。
每當 readyState 改變時，就會觸發 onreadystatechange 事件。
readyState 屬性存有 XMLHttpRequest 的狀態資訊。
下面是 XMLHttpRequest 對象的三個重要的屬性：

屬性	描述
onreadystatechange	儲存函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。
readyState	存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。 0: 請求未初始化 1: 伺服器串連已建立 2: 請求已接收 3: 請求處理中 4: 請求已完成，且響應已就緒
status	200: "OK" 404: 未找到頁面

在 onreadystatechange 事件中，我們規定當伺服器響應已做好被處理的準備時所執行的任務。
當 readyState 等於 4 且狀態為 200 時，表示響應已就緒：
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//xmlhttp.responseText; 對返回的結果進行處理；
}
}

4,jquery的AJAX（來自jquery 1.10的API）

Query.ajax(url,[settings])概述

通過 HTTP 要求載入遠端資料。

jQuery 底層 AJAX 實現。簡單易用的高層實現見 $.get, $.post 等。$.ajax() 返回其建立的 XMLHttpRequest 對象。大多數情況下你無需直接操作該函數，除非你需要操作不常用的選項，以獲得更多的靈活性。

最簡單的情況下，$.ajax()可以不帶任何參數直接使用。

注意，所有的選項都可以通過$.ajaxSetup()函數來全域設定。

回呼函數

如果要處理$.ajax()得到的資料，則需要使用回呼函數。beforeSend、error、dataFilter、success、complete。

beforeSend 在發送請求之前調用，並且傳入一個XMLHttpRequest作為參數。 error 在請求出錯時調用。傳入XMLHttpRequest對象，描述錯誤類型的字串以及一個異常對象（如果有的話） dataFilter 在請求成功之後調用。傳入返回的資料以及"dataType"參數的值。並且必須返回新的資料（可能是處理過的）傳遞給success回呼函數。success 當請求之後調用。傳入返回後的資料，以及包含成功碼的字串。 complete 當請求完成之後調用這個函數，無論成功或失敗。傳入XMLHttpRequest對象，以及一個包含成功或錯誤碼的字串。

資料類型

$.ajax()函數依賴伺服器提供的資訊來處理返回的資料。如果伺服器報告說返回的資料是XML，那麼返回的結果就可以用普通的XML方法或者jQuery的選取器來遍曆。如果見得到其他類型，比如HTML，則資料就以文本形式來對待。

通過dataType選項還可以指定其他不同資料處理方式。除了單純的XML，還可以指定 html、json、jsonp、script或者text。

其中，text和xml類型返回的資料不會經過處理。資料僅僅簡單的將XMLHttpRequest的responseText或responseHTML 屬性傳遞給success回呼函數，

'''注意'''，我們必須確保網頁伺服器報告的MIME類型與我們選擇的dataType所匹配。比如說，XML的話，伺服器端就必須聲明 text/xml 或者 application/xml 來獲得一致的結果。

如果指定為html類型，任何內嵌的JavaScript都會在HTML作為一個字串返回之前執行。類似的，指定script類型的話，也會先執行伺服器端產生JavaScript，然後再把指令碼作為一個文本資料返回。

如果指定為json類型，則會把擷取到的資料作為一個JavaScript對象來解析，並且把構建好的對象作為結果返回。為了實現這個目的，他首先嘗試使用JSON.parse()。如果瀏覽器不支援，則使用一個函數來構建。JSON資料是一種能很方便通過JavaScript解析的結構化資料。如果擷取的資料檔案存放在遠程伺服器上（網域名稱不同，也就是跨域擷取資料），則需要使用jsonp類型。使用這種類型的話，會建立一個查詢字串參數 callback=? ，這個參數會加在請求的URL後面。伺服器端應當在JSON資料前加上回呼函數名，以便完成一個有效JSONP請求。如果要指定回呼函數的參數名來取代預設的callback，可以通過設定$.ajax()的jsonp參數。

注意，JSONP是JSON格式的擴充。他要求一些伺服器端的代碼來檢測並處理查詢字串參數。更多資訊可以參閱 最初的文章。

如果指定了script或者jsonp類型，那麼當從伺服器接收到資料時，實際上是用了<script>標籤而不是XMLHttpRequest對象。這種情況下，$.ajax()不再返回一個XMLHttpRequest對象，並且也不會傳遞事件處理函數，比如beforeSend。

發送資料到伺服器

預設情況下，Ajax請求使用GET方法。如果要使用POST方法，可以設定type參數值。這個選項也會影響data選項中的內容如何發送到伺服器。

data選項既可以包含一個查詢字串，比如 key1=value1&key2=value2 ，也可以是一個映射，比如 {key1: 'value1', key2: 'value2'} 。如果使用了後者的形式，則資料再發送器會被轉換成查詢字串。這個處理過程也可以通過設定processData選項為false來迴避。如果我們希望發送一個XML對象給伺服器時，這種處理可能並不合適。並且在這種情況下，我們也應當改變contentType選項的值，用其他合適的MIME類型來取代預設的 application/x-www-form-urlencoded 。

進階選項

global選項用於阻止響應註冊的回呼函數，比如.ajaxSend，或者ajaxError，以及類似的方法。這在有些時候很有用，比如發送的請求非常頻繁且簡短的時候，就可以在ajaxSend裡禁用這個。