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

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

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

JavaScript技術：從Ajax到JQuery Ajax學習，轉載需保留來源！

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