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

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

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

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

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