Ajax（交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)）已經(jīng)存在了很長時間，在我們的BS項(xiàng)目中，我們會經(jīng)常用到Ajax，帶來更友好的用戶體驗(yàn)。一切為了方便我們的開發(fā)。jQuery中為我們提供了很多有關(guān)處理Ajax的函數(shù)。此文就和大家一起學(xué)習(xí)下jQuery中處理Ajax。 （1）jQuery.ajax(options) >>通過 HTTP 請求加載遠(yuǎn)程數(shù)據(jù) 這個是jQuery 的底層 AJAX 實(shí)現(xiàn)。簡單易用的高層實(shí)現(xiàn)見 $.get, $.post 等。 Options: async (Boolean) : (默認(rèn): true) 默認(rèn)設(shè)置下，所有請求均為異步請求。如果需要發(fā)送同步請求，請將此選項(xiàng)設(shè)置為 false。注意，同步請求將鎖住瀏覽器，用戶其它操作必須等待請求完成才可以執(zhí)行。 beforeSend (Function) : 發(fā)送請求前可修改 XMLHttpRequest 對象的函數(shù)，如添加自定義 HTTP 頭。XMLHttpRequest 對象是唯一的參數(shù)。 Ajax Event. cache (Boolean) : (默認(rèn): true) jQuery 1.2 新功能，設(shè)置為 false 將不會從瀏覽器緩存中加載請求信息。 complete (Function) : 請求完成后回調(diào)函數(shù) (請求成功或失敗時均調(diào)用)。參數(shù)： XMLHttpRequest 對象，成功信息字符串。 Ajax 事件。 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 選項(xiàng)說明以禁止此自動轉(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 對象，錯誤信息，（可能）捕獲的錯誤對象。Ajax 事件。 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)換的信息，請?jiān)O(shè)置為 false。 success (Function) : 請求成功后回調(diào)函數(shù)。參數(shù)：服務(wù)器返回?cái)?shù)據(jù)，數(shù)據(jù)格式。 Ajax 事件。 timeout (Number) : 設(shè)置請求超時時間（毫秒）。此設(shè)置將覆蓋全局設(shè)置。 type (String) : (默認(rèn): "GET") 請求方式 ("POST" 或 "GET")， 默認(rèn)為 "GET"。注意：其它 HTTP 請求方法，如 PUT 和 DELETE 也可以使用，但僅部分瀏覽器支持。 url (String) : (默認(rèn): 當(dāng)前頁地址) 發(fā)送請求的地址。 Example: //加載并執(zhí)行一個 JS 文件。 $(document).ready(function() {$("p").bind("click", function() {$.ajax({type: "GET",url: "test.js",dataType: "script"});}); }); //保存數(shù)據(jù)到服務(wù)器，在服務(wù)器進(jìn)行處理。成功時顯示信息。 $(document).ready(function() {$("p").bind("click", function() {$.ajax({type: "POST",url: "LeaveMsg.aspx",data: "title=Hello&Message=Brian",success: function(msg){alert( "Data Saved: " + msg );} }); $.ajax() 使Ajax 由復(fù)雜變簡單。 （2）load(url,[data],[callback])>>載入遠(yuǎn)程 HTML 文件代碼并插入至 DOM 中 Options:? Ajax 最常見的用法就是把一塊 HTML 代碼加載到頁面的某個區(qū)域中去。為此，只需簡單地選擇所需的元素，然后使用load()函數(shù)即可。 url (String) : 待裝入 HTML 網(wǎng)頁網(wǎng)址。 data (Map) : (可選) 發(fā)送至服務(wù)器的 key/value 數(shù)據(jù)。 callback (Callback) : (可選) 載入成功時回調(diào)函數(shù)。 Example: //加載 DoubleColorTable.htm 文件內(nèi)容$(document).ready(function() {$("p").load("DoubleColorTable.htm"); }); ? （3）jQuery.get(url,[data],[callback])>>通過遠(yuǎn)程 HTTP GET 請求載入信息 這是一個簡單的 GET 請求功能以取代復(fù)雜 $.ajax 。請求成功時可調(diào)用回調(diào)函數(shù)。 Options: url (String) : 待裝入 HTML 網(wǎng)頁網(wǎng)址。 data (Map) : (可選) 待發(fā)送 Key/value 參數(shù)。 callback (Function) : (可選) 載入成功時回調(diào)函數(shù)。 Example: //顯示 test.aspx返回值(HTML 或 XML，取決于返回值)。 $.get("test.aspx", function(data){alert("Data Loaded: " + data); }); （4）jQuery.post(url,[data],[callback])>>通過遠(yuǎn)程 HTTP POST 請求載入信息。 這是一個簡單的 POST 請求功能以取代復(fù)雜 $.ajax 。請求成功時可調(diào)用回調(diào)函數(shù)。 Options: url (String) : 發(fā)送請求地址。 data (Map) : (可選) 待發(fā)送 Key/value 參數(shù)。 callback (Function) : (可選) 發(fā)送成功時回調(diào)函數(shù)。 （5）Ajax事件 ajaxComplete(callback): AJAX 請求完成時執(zhí)行函數(shù)。XMLHttpRequest 對象和設(shè)置作為參數(shù)傳遞給回調(diào)函數(shù)。 ajaxError(callback): AJAX 請求發(fā)生錯誤時執(zhí)行函數(shù)。XMLHttpRequest 對象和設(shè)置作為參數(shù)傳遞給回調(diào)函數(shù)。捕捉到的錯誤可作為最后一個參數(shù)傳遞。 ajaxSend(callback) AJAX 請求發(fā)送前執(zhí)行函數(shù)。XMLHttpRequest 對象和設(shè)置作為參數(shù)傳遞給回調(diào)函數(shù)。 ajaxStart(callback) AJAX 請求開始時執(zhí)行函數(shù)。Ajax 事件。 ajaxStop(callback) AJAX 請求結(jié)束時執(zhí)行函數(shù)。Ajax 事件。 ajaxSuccess(callback) AJAX 請求成功時執(zhí)行函數(shù)。Ajax 事件。XMLHttpRequest 對象和設(shè)置作為參數(shù)傳遞給回調(diào)函數(shù)。 jQuery Ajax 實(shí)例體驗(yàn) 下面借助一個留言板實(shí)例來體驗(yàn)下jQuery中的Ajax使用。從而體驗(yàn)jQuery帶給我們的方便。 先來看看原始Ajax的代碼： function $(e) {return document.getElementById(e);} function String.prototype.trim(){return this.replace(/(^s*)|(s*$)/g,"");}var xmlHttp; var xmlHttpGet function getXmlHttp()//創(chuàng)建XMLHttpRequest對象 {var xmlHttpNew = null;try{xmlHttpNew = new XMLHttpRequest();}catch (e){try{xmlHttpNew = new ActiveXObject("Msxml2.XMLHTTP");}catch (e){xmlHttpNew = new ActiveXObject("Microsoft.XMLHTTP");}}return xmlHttpNew; }function addMessage()//向數(shù)據(jù)庫中添加數(shù)據(jù) {xmlHttp = getXmlHttp();if (xmlHttp == null){alert("瀏覽器不支持 AJAX!");return;}var postParam = '';postParam = "Name=" + $("txtName").value.trim();postParam = postParam + "&Email=" + $("txtEmail").value.trim();postParam = postParam + "&Title=" + $("txtTitle").value.trim();postParam = postParam + "&Message=" + $("txtContent").value.trim();var url = 'AddMessage.aspx';url = url + "?SID=" + Math.random();xmlHttp.onreadystatechange = addMessageOK;xmlHttp.open("POST", url, true);xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//----這句話很重要！xmlHttp.send(postParam); }function addMessageOK()//添加留言板的回調(diào)函數(shù) {if(xmlHttp.readyState==4){if(xmlHttp.status==200){//alert('謝謝留言，留言成功！');GuestMessage();clearall();}} }function GuestMessage()//獲取留言信息 {xmlHttpGet = getXmlHttp();if (xmlHttpGet == null){alert("瀏覽器不支持 AJAX!");return;}var url = 'GetMessage.aspx';url = url + "?SID=" + Math.random();xmlHttpGet.onreadystatechange = MessageGetOK;xmlHttpGet.open("GET", url, true);xmlHttpGet.send(null); }function MessageGetOK()//留言的回調(diào)函數(shù) {if (xmlHttpGet.readyState == 4) {document.getElementById("ShowMessagePanel").innerHTML = xmlHttpGet.responseText;} } 再來看看jQuery的實(shí)現(xiàn)代碼： <script src="js/jquery-1.2.6.js" type="text/javascript"></script> <script type="text/javascript">function GetMsg() {$.ajax({url: "GetMessage.aspx?SID=" + Math.random(),success: function(msg) {$("#ShowMessagePanel").html(msg);}});}$(document).ready(function() {GetMsg();$("#btnSend").bind("click", function() {var name = $("#txtName").val();var email = $("#txtEmail").val();var title = $("#txtTitle").val();var msg = $("#txtContent").val();$.ajax({type: "POST",url: "AddMessage.aspx",data: "Name=" + name + "&Email=" + email + "&Title=" + title + "&Message=" + msg + "",success: function(msg) {alert('添加成功');GetMsg();}});});}); </script> 效果： ? 實(shí)例下載：/Files/gaoweipeng/JQAjax.rar 小結(jié)： jQuery給開發(fā)中給我們帶來了很多方便，使我們在處理Ajax上更簡單。這些都是大家有目共睹的。 文章作者：高維鵬（Brian） 文章出處：http://www.cnblogs.com/gaoweipeng

轉(zhuǎn)載于:https://www.cnblogs.com/gxldan/archive/2012/08/09/4066865.html

總結(jié)

以上是生活随笔為你收集整理的JQuery-让Ajax变的更简单的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。