先來看看jQuery.ajax(options)的簡單介紹:
通過 HTTP 請求加載遠程數據。
jQuery 底層 AJAX 實現。簡單易用的高層實現見 $.get, $.post 等。
$.ajax() 返回其創建的 XMLHttpRequest 對象。大多數情況下你無需直接操作該對象,但特殊情況下可用於手動終止請求。
$.ajax() 隻有一個參數:參數 key/value 對象,包含各配置及回調函數信息。
返回值:
XMLHttpRequest
參數:
options(可選) : AJAX 請求設置。所有選項都是可選的。
選項(隻對此實例用到的選項進行解釋):
type(String) : (默認: "GET") 請求方式 ("POST" 或 "GET"), 默認為 "GET"。註意:其它 HTTP 請求方法,如 PUT 和 DELETE 也可以使用,但僅部分瀏覽器支持。
url(String) : (默認: 當前頁地址) 發送請求的地址。
data(Object,String) : 發送到服務器的數據。將自動轉換為請求字符串格式。GET 請求中將附加在 URL 後。查看 processData 選項說明以禁止此自動轉換。
必須為 Key/Value格式。如果為數組,jQuery 將自動為不同值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉換為 '&foo=bar1&foo=bar2'。
beforeSend(Function) : 發送請求前可修改 XMLHttpRequest 對象的函數,如添加自定義 HTTP 頭。XMLHttpRequest 對象是唯一的參數。 Ajax 事件.
success(Function) : 請求成功後回調函數。參數:服務器返回數據,數據格式。 Ajax 事件。
實例:
用$.ajax()提交兩個數值並返回這兩個數值的和。
本實例使用jQuery 1.4.2類庫。
先看HTML文件的部分代碼:
<body> <form id="form1" runat="server"> <p style="font-size:12px; padding-left:15px; padding-top:15px;"> <input type="button" id="btn_ok" value="測試" onclick="FunAjax()" /> <span id="span_content">顯示結果</span> </p> </form> </body>
當點擊"測試"按鈕時觸發FunAjax函數,下面來看這個函數代碼:
function FunAjax() { $.ajax({ type: "POST", url: "jQueryAjaxTest.ashx", data: "begin=1&end=9", beforeSend: function(){ $("#span_content").text("數據處理中..."); }, success: function(msg){ $("#span_content").text("兩個數的和為: " + msg); } }); }
FunAjax函數利用$.ajax()調用瞭jQueryAjaxTest.ashx文件,並通過data選項向jQueryAjaxTest.ashx文件傳遞瞭兩個數值,即begin=1&end=9,jQueryAjaxTest.ashx文件將返回這兩個數值相加的結果,jQueryAjaxTest.ashx文件部分代碼:
//返回類型 context.Response.ContentType = "text/plain"; int iBegin = 0; int iEnd = 0; //接收參數 int.TryParse(context.Request["begin"].ToString(), out iBegin); int.TryParse(context.Request["end"].ToString(), out iEnd); Thread.Sleep(1000); //為瞭能體現加載過程,在此我將程序延遲瞭一秒鐘 //計算並返回結果 context.Response.Write((iBegin+iEnd).ToString());
這個實例隻是$.ajax()的一個很簡單的應用,但很大程度上簡化瞭AJAX的開發,實現頁面無刷新從服務器獲取數據。