一：jQuery.ajax語法基礎
jQuery.ajax([options])
概述：通過 HTTP 請求加載遠程數據。
jQuery 底層 AJAX 實現。簡單易用的高層實現見 $.get, $.post 等。$.ajax() 返回其創建的 XMLHttpRequest 對象。使用這個方法可以獲得更多的靈活性。
數據類型
$.ajax()函數依賴服務器提供的信息來處理返回的數據。通過dataType選項還可以指定其他不同數據處理方式。其中，text和xml類型返回的數據不會經過處理。如果指定為html類型，任何內嵌的JavaScript都會在HTML作為一個字符串返回之前執行。如果指定為json類型，則會把獲取到的數據作為一個JavaScript對象來解析，並且把構建好的對象作為結果返回。發送數據到服務器，默認情況下，Ajax請求使用GET方法。如果要使用POST方法，可以設定type參數值。這個選項也會影響data選項中的內容如何發送到服務器。
使用場景一：
描述:保存數據到服務器，成功時顯示信息。jQuery 代碼:
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
使用場景二：
描述:裝入一個 HTML 網頁最新版本。jQuery 代碼:
$.ajax({
url: "test.html",
cache: false,
success: function(html){
$("#results").append(html);
}
});
load(url, [data], [callback])
概述：載入遠程 HTML 文件代碼並插入至 DOM 中。
默認使用 GET 方式 - 傳遞附加參數時自動轉換為 POST 方式。
使用場景一：
描述:加載 feeds.html 文件內容。jQuery 代碼:
$("#feeds").load("feeds.html");
jQuery.get(url, [data], [callback], [type])和jQuery.post(url, [data], [callback], [type])
概述：通過遠程 HTTP GET或POST 請求載入信息。
這是一個簡單的 GET或POST 請求功能以取代復雜 $.ajax 。請求成功時可調用回調函數。如果需要在出錯時執行函數，請使用 $.ajax。
描述:顯示 test.aspx 返回值(HTML 或 XML，取決於返回值)，添加一組請求參數。jQuery 代碼:
$.get("test.aspx", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
$.post("test.aspx", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
上面是基本的語法，我們只是先做一個了解，要是你已經熟悉，那么我們將開始一步一步對上面的方法和使用場景進行具體討論。
二：jQuery.ajax伴隨ASP.NET的實戰練習
首先創建Default.aspx頁面，作為請求發起頁面，並會獲得返回值。頁面的代碼Default.aspx是：
View Code
<!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<script src= " js\jquery-1.6.2.min.js " type= " text/javascript "></script>
<script type= " text/javascript ">
$(function() {
$( ' #showinfo ').click(function() {
var data = { key1: " 劉明豐 ", key2: " 林望 " };
$.ajax({
type: " POST ",
url: " response.aspx ",
data: data,
dataType: " text ",
success: function(msg) {
$( " #ajax ").append(msg);
}
});
$.ajax({
url: " test.htm ",
cache: false,
success: function(html) {
$( " #resulthtml ").append(html);
}
});
$( " #load ").load( " test.htm ");
$. get( " response.aspx ", data, success1, " text ");
$. get( " TextJson.txt ", success3, " json ");
$.post( " response.aspx ", data, success2, " text ");
function success1(message) {
$( " #get ").append(message);
}
function success2(message) {
$( " #post ").append(message);
}
function success3(siteData) {
var result = " <li>334一號床: " + siteData.key1 + " </li> ";
result += " <li>334二號床: " + siteData.key2 + " </li> ";
result += " <li>334三號床: " + siteData.key3 + " </li> ";
result += " <li>334四號床: " + siteData.key4 + " </li> ";
$( " #result ").html(result);
}
});
});
</script>
<html xmlns= " http://www.w3.org/1999/xhtml " >
<head runat= " server ">
<title></title>
</head>
<body>
<input type= " button " id= " showinfo " value= " show info "></input>
<ul id= " ajax ">ajax:</ul>
<ul id= " resulthtml ">resulthtml:</ul>
<ul id= " load ">load:</ul>
<ul id= " get "> get:</ul>
<ul id= " post ">post:</ul>
<ul id= " result "></ul>
</body>
</html>
Default.aspx.cs里面有沒寫任何代碼，默認即可。
請求的接受者這里面有三種角色：response.aspx頁面、test.htm靜態頁面和TextJson.txt。
response.aspx頁面：主要是在服務器端獲得客戶端提交的數據，並返回數據給客戶端。
test.htm靜態頁面：主要是給客戶端局部裝入一個HTML網頁最新版本。
TextJson.txt：是作為數據儲存在文件中，讓客戶端來異步訪問的。
response.aspx頁面代碼，response.aspx是：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="response.aspx.cs" Inherits="JqueryAjax2.response" %>
沒有任何html代碼，因為主要是在服務器端獲得客戶端提交的數據，並返回數據給客戶端，不需要顯示html內容，所以可以不含html標記。
response.aspx.cs頁面代碼：
View Code
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Runtime.Serialization.Json;
using System.Runtime.Serialization;
namespace JqueryAjax2
{
public partial class response : System.Web.UI.Page
{
protected void Page_Load( object sender, EventArgs e)
{
string str = Request[ " key1 "];
Response.Write( " success " + str);
}
}
}
在代碼中可以看到服務器端獲得客戶端提交的數據，並返回數據給客戶端的方式。
test.htm靜態頁面的代碼是：
View Code
<html xmlns= " http://www.w3.org/1999/xhtml " >
<head>
<title></title>
</head>
<body>
test.html
</body>
</html>
當靜態頁面被請求后，會作為html的格式返回客戶端，使用 $("#resulthtml").append(html);這樣的方法來顯示test.htm靜態頁面的內容。
TextJson.txt里面保存着一段文本，是json格式的：
{ "key1": "劉明豐", "key2": "林望", "key3": "陳文傑", "key4": "耿殿佳" }
在被訪問后返回的是json格式的數據，在客戶端獲得json后會自動轉換成對象。
好了，jQuery的異步使用場景基本滿足我們的需求，自己試試看吧。