Ajax到JQuery Ajax學習的幾個步驟

2024-05-06 15:45:21

字體：大中小

來源：轉載

供稿：網友

jQueryAjax通常用于Web應用程序開發，主要包括Ajax、get、post、load、getscript等等，現在錯新技術頻道將為大家介紹Ajax到JQuery Ajax學習的幾個步驟，一起來學習吧！

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文件。