Ajax篇
XMLDocument和XMLHttpRequest對象
第一：創(chuàng)建XMLHttpRequest請求對象
復(fù)制代碼 代碼如下:
function getXMLHttpRequest() {
var xRequest=null;
if(window.XMLHttpRequest) {
xRequest=new XMLHttpRequest();
}else if(typeof ActiveXObject != "undefined"){
xRequest=new ActiveXObject("Microsoft.XMLHTTP");
}
return xRequest;
}

或者：
復(fù)制代碼 代碼如下:
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]
這個獨立的創(chuàng)建XMLHttpRequest請求對象的函數(shù)就可以被調(diào)用了。
注意：XMlHTTP對象不是W3C標(biāo)準(zhǔn)，因此在創(chuàng)建時要分別考慮不同瀏覽器環(huán)境的支持。
XMLHTTP對象一共就6個方法8個屬性，支持兩種執(zhí)行模式：同步和異步。
XMLHTTP對象的屬性和方法列表(來自IXMLHTTPRequest接口)： 屬性名
類型
描述
onreadystatechange
N/A
指定當(dāng)就緒狀態(tài)發(fā)生改變時調(diào)用的事件處理函數(shù)，僅用于異步操作
readyState
Long
異步操作的狀態(tài)：未初始化(0)，正在加載(1)，已加載(2)，交互(3)，已完成(4)
responseBody
Variant
將響應(yīng)信息正文作為unsigned byte數(shù)組返回
responseStream
Variant
將響應(yīng)信息正文作為一個ADO Stream對象返回
responseText
String
將響應(yīng)信息正文作為一個文本字符串返回
responseXML
Object
通過XMLDom將響應(yīng)信息正文解析為XMLDocument對象
status
Long
服務(wù)器返回的HTTP狀態(tài)碼
statusText
String
服務(wù)器HTTP響應(yīng)行狀態(tài)
方法名
描述
abort
取消當(dāng)前 HTTP 請求
getAllResponseHeaders
從響應(yīng)信息中檢索所有的首部字段
getResponseHeader
從響應(yīng)信息正文中獲得一個 HTTP 首部字段值
open(method,url,boolAsync,bstrUser,bstrPassword)
打開一個與 HTTP 服務(wù)器的連接
send(varBody)
向HTTP服務(wù)器發(fā)送請求。可包含正文。
setRequestHeader(bstrHeader, bstrValue)
設(shè)定一個請求的首部字段
第二：向服務(wù)器發(fā)送請求
通過XMLHttpRequest對象向服務(wù)器發(fā)送請求是非常簡單，只需要給它傳遞一個服務(wù)器頁面的URL，這個頁面將生成數(shù)據(jù)。
[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);
}
}

通過以上代碼對請求進(jìn)行設(shè)置后，會立即將控制權(quán)返回給我們，與此同時網(wǎng)絡(luò)和服務(wù)器則忙著執(zhí)行它們自己的任務(wù)。
第三：使用回調(diào)函數(shù)監(jiān)視請求
通過XMLHttpRequest對象我們向服務(wù)器發(fā)送了異步請求，那我們怎樣才能知道請求已經(jīng)完成了呢？因此處理異步通信的第二個部分是在代碼中設(shè)置一個入口點，以便在調(diào)用結(jié)束的時候可以獲取結(jié)果信息。這通常是通過分配一個回調(diào)函數(shù)來實現(xiàn)的。
回調(diào)函數(shù)非常適合用于大多數(shù)現(xiàn)代UI工具箱中的事件驅(qū)動的編程方法。
以下我們重寫sendRequest()函數(shù)，如下：
復(fù)制代碼 代碼如下:
var req=null; //聲明一個全局變量
function sendRequest(url,params,HttpMethod) {
if(!HttpMethod){
HttpMethod="GET";
}
req=getXMLHttpRequest();
if(req){
req.onreadystatechange=onReadyStateChange; //注意這就是onreadystatechange回調(diào)函數(shù)用來監(jiān)視請求。具體是通過自定義的Javascript函數(shù)onReadyStateChange()來進(jìn)行事件處理。
req.open(HttpMethod,url,true);
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
req.send(params);
}
}

以下的回調(diào)函數(shù)onReadyStateChange就是用來處理從服務(wù)器得到的響應(yīng)信息。
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 .....在這可以做一些與此返回信息有關(guān)的操作，比如輸出信息等。
13 }
上述代碼中使用了XMLHttpRequest對象的responseText屬性，以文本字符串的形式獲取響應(yīng)中的數(shù)據(jù)。對于簡單的數(shù)據(jù)來說這是有用的。當(dāng)我們需要服務(wù)器返回更大的結(jié)構(gòu)化的數(shù)據(jù)集，就可以使用responseXML屬性。如果已經(jīng)將響應(yīng)的MIME類型正確設(shè)置為text/xml，這個屬性就會返回一個DOM文檔，因此我們可以使用DOM的屬性和函數(shù)（例如getElementById()和childNodes)來對它進(jìn)行處理。
JQuery Ajax篇
jQuery.ajax( options ) : 通過 HTTP 請求加載遠(yuǎn)程數(shù)據(jù)
jQuery 的底層 AJAX 實現(xiàn)。$.ajax() 返回其創(chuàng)建的 XMLHttpRequest 對象。大多數(shù)情況下你無需直接操作該對象，但特殊情況下可用于手動終止請求。$.ajax() 只有一個選項參數(shù)：參數(shù) key/value 對象，包含各配置及回調(diào)函數(shù)信息。詳細(xì)參數(shù)選項見下。 參數(shù)名
類型
描述
url
String
(默認(rèn): 當(dāng)前頁地址) 發(fā)送請求的地址。
type
String
(默認(rèn): "GET") 請求方式 ("POST" 或 "GET")， 默認(rèn)為 "GET"。注意：其它 HTTP 請求方法，如 PUT 和 DELETE 也可以使用，但僅部分瀏覽器支持。
timeout
Number
設(shè)置請求超時時間（毫秒）。此設(shè)置將覆蓋全局設(shè)置。
async
Boolean
(默認(rèn): true) 默認(rèn)設(shè)置下，所有請求均為異步請求。如果需要發(fā)送同步請求，請將此選項設(shè)置為 false。注意，同步請求將鎖住瀏覽器，用戶其它操作必須等待請求完成才可以執(zhí)行。
beforeSend
Function
發(fā)送請求前可修改 XMLHttpRequest 對象的函數(shù)，如添加自定義 HTTP 頭。XMLHttpRequest 對象是唯一的參數(shù)。
function (XMLHttpRequest) {
this; // the options for this ajax request
}
cache
Boolean
(默認(rèn): true) jQuery 1.2 新功能，設(shè)置為 false 將不會從瀏覽器緩存中加載請求信息。
complete
Function
請求完成后回調(diào)函數(shù) (請求成功或失敗時均調(diào)用)。參數(shù)： XMLHttpRequest 對象，成功信息字符串。
function (XMLHttpRequest, textStatus) {
this; // the options for this ajax request
}
contentType
String
(默認(rèn): "application/x-www-form-urlencoded") 發(fā)送信息至服務(wù)器時內(nèi)容編碼類型。默認(rèn)值適合大多數(shù)應(yīng)用場合。
data
Object,
String
發(fā)送到服務(wù)器的數(shù)據(jù)。將自動轉(zhuǎn)換為請求字符串格式。GET 請求中將附加在 URL 后。查看 processData 選項說明以禁止此自動轉(zhuǎn)換。必須為 Key/Value 格式。如果為數(shù)組，jQuery 將自動為不同值對應(yīng)同一個名稱。如：
{foo:["bar1", "bar2"]}轉(zhuǎn)換為 '&foo=bar1&foo=bar2'。
dataType
String
預(yù)期服務(wù)器返回的數(shù)據(jù)類型。如果不指定，jQuery 將自動根據(jù)HTTP 包 MIME 信息返回responseXML 或 responseText，并作為回調(diào)函數(shù)參數(shù)傳遞，可用值：
"xml": 返回 XML 文檔，可用 jQuery 處理。
"html": 返回純文本 HTML 信息；包含 script 元素。
"script": 返回純文本 JavaScript 代碼。不會自動緩存結(jié)果。
"json": 返回 JSON 數(shù)據(jù) 。
"jsonp": JSONP 格式。使用 JSONP 形式調(diào)用函數(shù)時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數(shù)名，以執(zhí)行回調(diào)函數(shù)。
error
Function
(默認(rèn): 自動判斷 (xml 或 html)) 請求失敗時將調(diào)用此方法。這個方法有三個參數(shù)：XMLHttpRequest 對象，錯誤信息，（可能）捕獲的錯誤對象。
function (XMLHttpRequest, textStatus, errorThrown) {
// 通常情況下textStatus和errorThown只有其中一個有值
this; // the options for this ajax request
}
global
Boolean
(默認(rèn): true) 是否觸發(fā)全局 AJAX 事件。設(shè)置為 false 將不會觸發(fā)全局 AJAX 事件，如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件
ifModified
Boolean
(默認(rèn): false) 僅在服務(wù)器數(shù)據(jù)改變時獲取新數(shù)據(jù)。使用 HTTP 包 Last-Modified 頭信息判斷。
processData
Boolean
(默認(rèn): true) 默認(rèn)情況下，發(fā)送的數(shù)據(jù)將被轉(zhuǎn)換為對象(技術(shù)上講并非字符串) 以配合默認(rèn)內(nèi)容類型 "application/x-www-form-urlencoded"。如果要發(fā)送 DOM 樹信息或其它不希望轉(zhuǎn)換的信息，請設(shè)置為 false。
success
Function
請求成功后回調(diào)函數(shù)。這個方法有兩個參數(shù)：服務(wù)器返回數(shù)據(jù)，返回狀態(tài)
function (data, textStatus) {
// data could be xmlDoc, jsonObj, html, text, etc...
this; // the options for this ajax request
}
這里Ajax事件里面的 this 都是指向Ajax請求的選項信息的。
jQuery.ajaxSetup( options ) : 設(shè)置全局 AJAX 默認(rèn)選項。
如：設(shè)置 AJAX 請求默認(rèn)地址為 "/xmlhttp/"，禁止觸發(fā)全局 AJAX 事件，用 POST 代替默認(rèn) GET 方法。其后的 AJAX 請求不再設(shè)置任何選項參數(shù)。其示例代碼：
$.ajaxSetup({
url: "/xmlhttp/",
global: false,
type: "POST"
});
$.ajax({ data: myData });
serialize() 與 serializeArray()
serialize() : 序列表表格內(nèi)容為字符串。
serializeArray() : 序列化表格元素 (類似 '.serialize()' 方法) 返回 JSON 數(shù)據(jù)結(jié)構(gòu)數(shù)據(jù)。
以上JQuery Ajax的底層實現(xiàn)，我們一般很少用到，JQuery對jQuery.ajax()進(jìn)行了封裝，使我們能夠更加簡便的使用Ajax異步調(diào)用。
1. load( url, [data], [callback] ) ：載入遠(yuǎn)程 HTML 文件代碼并插入至 DOM 中。
url (String) : 請求的HTML頁的URL地址。
data (Map) : (可選參數(shù)) 發(fā)送至服務(wù)器的 key/value 數(shù)據(jù)。
callback (Callback) : (可選參數(shù)) 請求完成時(不需要是success的)的回調(diào)函數(shù)。
這個方法默認(rèn)使用 GET 方式來傳遞的，如果[data]參數(shù)有傳遞數(shù)據(jù)進(jìn)去，就會自動轉(zhuǎn)換為POST方式的。jQuery 1.2 中，可以指定選擇符，來篩選載入的 HTML 文檔，DOM 中將僅插入篩選出的 HTML 代碼。語法形如 "url #some > selector"。
這個方法可以很方便的動態(tài)加載一些HTML文件，例如表單。
2. jQuery.get( url, [data], [callback] ) ：使用GET方式來進(jìn)行異步請求
url (String) : 發(fā)送請求的URL地址.
data (Map) : (可選) 要發(fā)送給服務(wù)器的數(shù)據(jù)，以 Key/value 的鍵值對形式表示，會作為QueryString附加到請求URL中。
callback (Function) : (可選) 載入成功時回調(diào)函數(shù)(只有當(dāng)Response的返回狀態(tài)是success才是調(diào)用該方法)。
3. jQuery.post( url, [data], [callback], [type] ) ：使用POST方式來進(jìn)行異步請求
url (String) : 發(fā)送請求的URL地址.
data (Map) : (可選) 要發(fā)送給服務(wù)器的數(shù)據(jù)，以 Key/value 的鍵值對形式表示。
callback (Function) : (可選) 載入成功時回調(diào)函數(shù)(只有當(dāng)Response的返回狀態(tài)是success才是調(diào)用該方法)。
type (String) : (可選)官方的說明是：Type of data to be sent。其實應(yīng)該為客戶端請求的類型(JSON,XML,等等)
如果你設(shè)置了請求的格式為"json"， 此時你沒有設(shè)置Response回來的ContentType 為：Response.ContentType = "application/json"; 那么你將無法捕捉到返回的數(shù)據(jù)。
4. jQuery.getScript( url, [callback] ) : 通過 GET 方式請求載入并執(zhí)行一個 JavaScript 文件。
url (String) : 待載入 JS 文件地址。
callback (Function) : (可選) 成功載入后回調(diào)函數(shù)。
jQuery 1.2 版本之前，getScript 只能調(diào)用同域 JS 文件。 1.2中，您可以跨域調(diào)用 JavaScript 文件。注意：Safari 2 或更早的版本不能在全局作用域中同步執(zhí)行腳本。如果通過 getScript 加入腳本，請加入延時函數(shù)。
這個方法可以用在例如當(dāng)只有編輯器focus()的時候才去加載編輯器需要的JS文件。

JavaScript技術(shù)：從Ajax到JQuery Ajax學(xué)習(xí)，轉(zhuǎn)載需保留來源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。