1, 使用JavaScriptJS文件,驗證用戶名是否存在
var AJax = function(option) { var request; var createRequest = function() { //var request; if (window.XMLHttpRequest) { request = new XMLHttpRequest(); } else { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { request = new ActiveXObject("Msxml2.XMLHTTP"); } } return request; } var sendRequest = function() { request = createRequest(); /*---------GET 和 POST的區別------------ 1、 get是把參數數據隊列加到提交表單的ACTION屬性所指的URL中,值和表單內各個字段一一對應,在URL中可以看到。 post是通過HTTP post機制,將表單內各個字段與其內容放置在Html HEADER內一起傳送到ACTION屬性所指的URL地址。用戶看不到這個過程。 2、 對於get方式,服務器端用Request.QueryString獲取變量的值, 對於post方式,服務器端用Request.Form獲取提交的數據。 兩種方式的參數都可以用Request來獲得。 3、 get傳送的數據量較小,不能大於2KB。 post傳送的數據量較大,一般被默認為不受限制。 4、 get安全性非常低,post安全性較高。 5、 當我們在提交表單的時候我們通常用post方式,當我們要傳送一個較大的數據文件時,需要用post。 當傳遞的值只需用參數方式(這個值不大於2KB)的時候,用get方式即可。 */ request.open("GET", option.url, true); //request.open("POST", option.url, true); //發送請求之前設置該屬性,獲取服務器上的准備狀態 request.onreadystatechange = ResponseRequest; request.send(null); } /* request.readyState == 4說明服務器已經收到一個響應 request.status == 200,HTTP服務器響應的狀態值,表示一切順利 HTTP的就緒狀態 0:請求沒有發出(在調用 open() 之前)。 1:請求已經建立但還沒有發出(調用 send() 之前)。 2:請求已經發出正在處理之中(這裡通常可以從響應得到內容頭部)。 3:請求已經處理,響應中通常有部分數據可用,但是服務器還沒有完成響應。 4:響應已完成,可以訪問服務器響應並使用它。 */ var ResponseRequest = function() { alert("HTTP的就緒狀態: "+request.readyState); if (request.readyState == 4) { if (request.status == 200) { alert("一切順利!"); option.Success(request); } else { alert("出現錯誤,錯誤信息為: "+request.status); option.Failure(request); } } } sendRequest(); } //判斷輸入的數值是否存在 function getIS() { /* 1,url是要鏈接的頁面和傳過去的值,傳過去值,讓動態頁面執行 2,Default.ASPx為要為這個執行的頁面 3,name是傳過去的參數名 4,document.getElementById('Text1').value傳過去的參數值 5,message.responseText成功之後從服務端返回的消息 */ var option = { url: "Default.ASPx?name="+document.getElementById('Text1').value, Success:function(message) { alert(message.responseText); } }; new AJax(option); }
ASPx文件
if (Request["name"] != null) { this.Response.Clear(); string name = Request["name"].ToString(); if (name == "1") { Response.Write("用戶名已存在,請填寫其他的用戶名!"); } else { Response.Write("該用戶名沒被注冊,可以使用!"); } this.Response.End(); }
2, 通過Jquery實現:
$(document).ready(function(){ $("#Button1").click(function(){ $.AJax({ type:"GET", url:"ResponsePage.ASPx?name="+document.getElementById('Text1').value, success:function(message) { alert(message); } }); }); });