從Ajax到JQuery Ajax學習_jquery

Ajax篇
XMLDocument和XMLHttpRequest對象
第一：建立XMLHttpRequest請求對象

複製代碼 代碼如下:

function getXMLHttpRequest() {
var xRequest=null;
if(window.XMLHttpRequest) {
xRequest=new XMLHttpRequest();
}else if(typeof ActiveXObject != "undefined"){
xRequest=new ActiveXObject("Microsoft.XMLHTTP");
}
return xRequest;
}

或者：

複製代碼 代碼如下:

var request=null;
function createRequest() {
try {
request=new XMLHttpRequest(); //非Microsoft IE瀏覽器
} catch (trymicrosoft) { //Microsoft IE
try {
request=new ActiveXObject(“Msxml2.XMLHTTP”);
} catch (othermicrosoft) {
try {
request=new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (failed) {
request=null;
}
}
}
if (request==null)
alert(“Error creating request object!”);
}
[code]
這個獨立的建立XMLHttpRequest請求對象的函數就可以被調用了。
注意：XMlHTTP對象不是W3C標準，因此在建立時要分別考慮不同瀏覽器環境的支援。
XMLHTTP對象一共就6個方法8個屬性，支援兩種執行模式：同步和非同步。
XMLHTTP對象的屬性和方法列表(來自IXMLHTTPRequest介面)： 屬性名稱
類型
描述
onreadystatechange
N/A
指定當就緒狀態發生改變時調用的事件處理函數，僅用於非同步作業
readyState
Long
非同步作業的狀態：未初始化(0)，正在載入(1)，已載入(2)，互動(3)，已完成(4)
responseBody
Variant
將響應資訊本文作為unsigned byte數組返回
responseStream
Variant
將響應資訊本文作為一個ADO Stream對象返回
responseText
String
將響應資訊本文作為一個文本字串返回
responseXML
Object
通過XMLDom將響應資訊本文解析為XMLDocument對象
status
Long
伺服器返回的HTTP狀態代碼
statusText
String
伺服器HTTP響應行狀態
方法名
描述
abort
取消當前 HTTP 要求
getAllResponseHeaders
從響應資訊中檢索所有的首部欄位
getResponseHeader
從響應資訊本文中獲得一個 HTTP 首部欄位值
open(method,url,boolAsync,bstrUser,bstrPassword)
開啟一個與 HTTP 伺服器的串連
send(varBody)
向HTTP伺服器發送請求。可包含本文。
setRequestHeader(bstrHeader, bstrValue)
設定一個請求的首部欄位
第二：向伺服器發送請求
通過XMLHttpRequest對象向伺服器發送請求是非常簡單，只需要給它傳遞一個伺服器頁面的URL，這個頁面將產生資料。
[code]
function sendRequest(url,params,HttpMethod) {
if(!HttpMethod){
HttpMethod="POST";
}
var req=getXMLHttpRequest();
if(req){
req.open(HttpMethod,url,true);
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
req.send(params);
}
}

通過以上代碼對請求進行設定後，會立即將控制權返回給我們，與此同時網路和伺服器則忙著執行它們自己的任務。
第三：使用回呼函數監視請求
通過XMLHttpRequest對象我們向伺服器發送了非同步請求，那我們怎樣才能知道請求已經完成了呢？因此處理非同步通訊的第二個部分是在代碼中設定一個進入點，以便在調用結束的時候可以擷取結果資訊。這通常是通過分配一個回呼函數來實現的。
回呼函數非常適合用於大多數現代UI工具箱中的事件驅動的編程方法。
以下我們重寫sendRequest()函數，如下：

複製代碼 代碼如下:

var req=null; //聲明一個全域變數
function sendRequest(url,params,HttpMethod) {
if(!HttpMethod){
HttpMethod="GET";
}
req=getXMLHttpRequest();
if(req){
req.onreadystatechange=onReadyStateChange; //注意這就是onreadystatechange回呼函數用來監視請求。具體是通過自訂的Javascript函數onReadyStateChange()來進行事件處理。
req.open(HttpMethod,url,true);
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
req.send(params);
}
}

以下的回呼函數onReadyStateChange就是用來處理從伺服器得到的響應資訊。
view sourceprint?01 function onReadyStateChange(){
02 var data=null;
03 if (req.readyState==4){
04
05 if (req.status==200) {
06 data=req.responseText;
07 } else {
08 data="loading.....["+req.readState+"]";
09 }
10
11 }
12 .....在這可以做一些與此返回資訊有關的操作，比如輸出資訊等。
13 }
上述代碼中使用了XMLHttpRequest對象的responseText屬性，以文本字串的形式擷取響應中的資料。對於簡單的資料來說這是有用的。當我們需要伺服器返回更大的結構化的資料集，就可以使用responseXML屬性。如果已經將響應的MIME類型正確設定為text/xml，這個屬性就會返回一個DOM文檔，因此我們可以使用DOM的屬性和函數（例如getElementById()和childNodes)來對它進行處理。
JQuery Ajax篇
jQuery.ajax( options ) : 通過 HTTP 要求載入遠端資料
jQuery 的底層 AJAX 實現。$.ajax() 返回其建立的 XMLHttpRequest 對象。大多數情況下你無需直接操作該對象，但特殊情況下可用於手動終止請求。$.ajax() 只有一個選項參數：參數 key/value 對象，包含各配置及回呼函數資訊。詳細參數選項見下。 參數名
類型
描述
url
String
(預設: 當前頁地址) 發送請求的地址。
type
String
(預設: "GET") 請求方式 ("POST" 或 "GET")， 預設為 "GET"。注意：其它 HTTP 要求方法，如 PUT 和 DELETE 也可以使用，但僅部分瀏覽器支援。
timeout
Number
佈建要求逾時時間（毫秒）。此設定將覆蓋全域設定。
async
Boolean
(預設: true) 預設設定下，所有請求均為非同步請求。如果需要發送同步請求，請將此選項設定為 false。注意，同步請求將鎖住瀏覽器，使用者其它操作必須等待請求完成才可以執行。
beforeSend
Function
發送請求前可修改 XMLHttpRequest 對象的函數，如添加自訂 HTTP 頭。XMLHttpRequest 對象是唯一的參數。
function (XMLHttpRequest) {
this; // the options for this ajax request
}
cache
Boolean
(預設: true) jQuery 1.2 新功能，設定為 false 將不會從瀏覽器緩衝中載入請求資訊。
complete
Function
請求完成後回呼函數 (請求成功或失敗時均調用)。參數： XMLHttpRequest 對象，成功資訊字串。
function (XMLHttpRequest, textStatus) {
this; // the options for this ajax request
}
contentType
String
(預設: "application/x-www-form-urlencoded") 發送資訊至伺服器時內容編碼類別型。預設值適合大多數應用場合。
data
Object,
String
發送到伺服器的資料。將自動轉換為請求字串格式。GET 請求中將附加在 URL 後。查看 processData 選項說明以禁止此自動轉換。必須為 Key/Value 格式。如果為數組，jQuery 將自動為不同值對應同一個名稱。如：
{foo:["bar1", "bar2"]}轉換為 '&foo=bar1&foo=bar2'。
dataType
String
預期伺服器返回的資料類型。如果不指定，jQuery 將自動根據HTTP 包 MIME 資訊返回responseXML 或 responseText，並作為回呼函數參數傳遞，可用值：
"xml": 返回 XML 文檔，可用 jQuery 處理。
"html": 返回純文字 HTML 資訊；包含 script 元素。
"script": 返回純文字 JavaScript 代碼。不會自動緩衝結果。
"json": 返回 JSON 資料 。
"jsonp": JSONP 格式。使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數名，以執行回呼函數。
error
Function
(預設: 自動判斷 (xml 或 html)) 請求失敗時將調用此方法。這個方法有三個參數：XMLHttpRequest 對象，錯誤資訊，（可能）捕獲的錯誤對象。
function (XMLHttpRequest, textStatus, errorThrown) {
// 通常情況下textStatus和errorThown只有其中一個有值
this; // the options for this ajax request
}
global
Boolean
(預設: true) 是否觸發全域 AJAX 事件。設定為 false 將不會觸發全域 AJAX 事件，如 ajaxStart 或 ajaxStop 。可用於控制不同的Ajax事件
ifModified
Boolean
(預設: false) 僅在伺服器資料改變時擷取新資料。使用 HTTP 包 Last-Modified 頭資訊判斷。
processData
Boolean
(預設: true) 預設情況下，發送的資料將被轉換為對象(技術上講並非字串) 以配合預設內容類型 "application/x-www-form-urlencoded"。如果要發送 DOM 樹資訊或其它不希望轉換的資訊，請設定為 false。
success
Function
請求成功後回呼函數。這個方法有兩個參數：伺服器返回資料，返回狀態
function (data, textStatus) {
// data could be xmlDoc, jsonObj, html, text, etc...
this; // the options for this ajax request
}
這裡Ajax事件裡面的 this 都是指向Ajax請求的選項資訊的。
jQuery.ajaxSetup( options ) : 設定全域 AJAX 預設選項。
如：設定 AJAX 請求預設地址為 "/xmlhttp/"，禁止觸發全域 AJAX 事件，用 POST 代替預設 GET 方法。其後的 AJAX 請求不再設定任何選項參數。其範例程式碼：
$.ajaxSetup({
url: "/xmlhttp/",
global: false,
type: "POST"
});
$.ajax({ data: myData });
serialize() 與 serializeArray()
serialize() : 序列表表格內容為字串。
serializeArray() : 序列化表格元素 (類似 '.serialize()' 方法) 返回 JSON 資料結構資料。
以上JQuery Ajax的底層實現，我們一般很少用到，JQuery對jQuery.ajax()進行了封裝，使我們能夠更加簡便的使用Ajax非同步呼叫。
1. load( url, [data], [callback] ) ：載入遠程 HTML 檔案代碼並插入至 DOM 中。
url (String) : 請求的HTML頁的URL地址。
data (Map) : (選擇性參數) 發送至伺服器的 key/value 資料。
callback (Callback) : (選擇性參數) 請求完成時(不需要是success的)的回呼函數。
這個方法預設使用 GET 方式來傳遞的，如果[data]參數有傳遞資料進去，就會自動轉換為POST方式的。jQuery 1.2 中，可以指定選擇符，來篩選載入的 HTML 文檔，DOM 中將僅插入篩選出的 HTML 程式碼。文法形如 "url #some > selector"。
這個方法可以很方便的動態載入一些HTML檔案，例如表單。
2. jQuery.get( url, [data], [callback] ) ：使用GET方式來進行非同步請求
url (String) : 發送請求的URL地址.
data (Map) : (可選) 要發送給伺服器的資料，以 Key/value 的索引值對形式表示，會作為QueryString附加到請求URL中。
callback (Function) : (可選) 載入成功時回呼函數(只有當Response的返回狀態是success才是調用該方法)。
3. jQuery.post( url, [data], [callback], [type] ) ：使用POST方式來進行非同步請求
url (String) : 發送請求的URL地址.
data (Map) : (可選) 要發送給伺服器的資料，以 Key/value 的索引值對形式表示。
callback (Function) : (可選) 載入成功時回呼函數(只有當Response的返回狀態是success才是調用該方法)。
type (String) : (可選)官方的說明是：Type of data to be sent。其實應該為用戶端請求的類型(JSON,XML,等等)
如果你設定了請求的格式為"json"， 此時你沒有設定Response回來的ContentType 為：Response.ContentType = "application/json"; 那麼你將無法捕捉到返回的資料。
4. jQuery.getScript( url, [callback] ) : 通過 GET 方式請求載入並執行一個 JavaScript 檔案。
url (String) : 待載入 JS 檔案地址。
callback (Function) : (可選) 成功載入後回呼函數。
jQuery 1.2 版本之前，getScript 只能調用同域 JS 檔案。 1.2中，您可以跨域調用 JavaScript 檔案。注意：Safari 2 或更早的版本不能在全域範圍中同步執行指令碼。如果通過 getScript 加入指令碼，請加入延時函數。
這個方法可以用在例如當只有編輯器focus()的時候才去載入編輯器需要的JS檔案。