利用jQuery實現的Ajax 驗證使用者名稱是否存在
非同步重新整理實現方式有多種，也可以藉助JS的多種框架，下面是使用jQuery框架實現的AJAX 驗證使用者名稱是否存在
jQuery.ajax概述
HTTP 請求載入遠端資料。
通過jQuery 底層 AJAX 實現。簡單易用的高層實現見 $.get, $.post 等。$.ajax() 返回其建立的 XMLHttpRequest 物件。大多數情況下你無需直接操作該物件，但特殊情況下可用於手動終止請求。
$.ajax() 只有一個引數：引數 key/value 物件，包含各配置及回撥函式資訊。詳細引數選項見下。
注意： 如果你指定了 dataType 選項，請確保伺服器返回正確的 MIME 資訊，(如 xml 返回 "text/xml")。錯誤的 MIME 型別可能導致不可預知的錯誤。見
注意：如果dataType設定為"script"，那麼在遠端請求時(不在同一個域下)，所有POST請求都將轉為GET請求。(因為將使用DOM的script標籤來載入)
jQuery 1.2 中，您可以跨域載入 JSON 資料，使用時需將資料型別設定為 JSONP。使用 JSONP 形式呼叫函式時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函式名，以執行回撥函式。資料型別設定為 "jsonp" 時，jQuery 將自動呼叫回撥函式。
引數列表：
|
引數名 |
型別 |
描述 |
|
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, |
傳送到伺服器的資料。將自動轉換為請求字串格式。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事件引數：beforeSend ，success ，complete ，error 。我們可以定義這些事件來很好的處理我們的每一次的Ajax請求。注意一下，這些Ajax事件裡面的 this 都是指向Ajax請求的選項資訊的(請參考說 get() 方法時的this的圖片)。請認真閱讀上面的引數列表，如果你要用jQuery來進行Ajax開發，那麼這些引數你都必需熟知的。
例項：
1、請求頁面AJax.aspx
HTML程式碼
Code<div><input id="txtName" type="text"/><input type="button" value="檢視使用者名稱是否存在" id="btn" onclick="JudgeUserName();"/><div id="showResult" style="float:left">div>div>
JS程式碼
Code<script type="text/javascript" src="CSS/jquery-1.3.2.js"></script><script type="text/javascript">function JudgeUserName()
{
$.ajax({
type:"GET",
url:"AjaxUserInfoModify.aspx",
dataType:"html",
data:"userName="+$("#txtName").val(),
beforeSend:function(XMLHttpRequest)
{
$("#showResult").text("正在查詢
");//Pause(this,100000); },
success:function(msg)
{
$("#showResult").html(msg);
$("#showResult").css("color","red");
},
complete:function(XMLHttpRequest,textStatus)
{
//隱藏正在查詢圖片 },
error:function()
{
//錯誤處理 }
});
}
</script>
2 、頁面AjaxUserInfoModify.aspx
後臺程式碼
Codeprotected void Page_Load(object sender, EventArgs e)
{
string userName = Request.QueryString["userName"].ToString ();
if (userName =="James Hao")
{
Response.Write ("使用者名稱已經存在！");
}
else
{
Response.Write ("您可以使用此使用者名稱！");
}
}
3、執行介面
(1)初始化介面
（2）正在查詢提示頁面
（3） 驗證使用者名稱已經存在頁面
（4） 驗證使用者名稱未存在頁面
至此 AJAX驗證使用者名稱是否存在的功能已經完成。