AJAX即“Asynchronous Javascript And XML”(異步JavaScript和XML),是指一種創建交互式網頁應用的網頁開發技術。
AJAX 是一種用於創建快速動態網頁的技術。其核心是 JavaScript 對象 XMLHttpRequest。該對象在 Internet Explorer 5 中首次引入,它是一種支持異步請求的技術。簡而言之,XMLHttpRequest使您可以使用 JavaScript 向服務器提出請求並處理響應,而不阻塞用戶。
通過在後台與服務器進行少量數據交換,AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下,對網頁的某部分進行更新。
傳統的網頁(不使用 AJAX)如果需要更新內容,必須重載整個網頁頁面。
試想如果在注冊時,提交了注冊信息,等了幾秒後頁面重載了,結果彈出一個提示框告訴你“用戶名已被使用”,那將是很令人惱火的一件事。所以在這裡,使用AJAX實現異步請求,即可在不重載頁面的情況下實現與數據庫的通訊。
創建XMLHTTPRequest對象
使用javascript在html頁面中創建XMLHTTPRequest對象,實現AJAX異步請求:
<span style="font-size:14px;"> var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); xmlhttp.open("POST", "AJAXTest.ashx?" + "i=5&j=10", true); xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) { alert(xmlhttp.responseText); } else { alert("AJAX服務器返回錯誤!"); } } } xmlhttp.send(); </span>
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //創建XMLHTTP對象,考慮兼容性
xmlhttp.open("POST", "AJAXTest.ashx?" + "i=5&j=10", true); //“准備”向服務器的GetDate1.ashx發出Post請求(GET可能會有緩存問題)。這裡還沒有發出請求。
readyState == 4 表示服務器返回完成數據了。之前可能會經歷2(請求已發送,正在處理中)、3(響應中已有部分數據可用了,但是服務器還沒有完成響應的生成)
注意:
不要以為if (xmlhttp.readyState == 4) 在send之前執行就覺得不對, xmlhttp.send(); 這時才開始發送請求。這時才開始發送請求後不等服務器返回數據,就繼續向下執行,所以不會阻塞,界面就不卡了,這就是AJAX中“A”的含義“異步”。
AJAX的封裝
在實際項目開發中,會有多處用到AJAX異步請求,可是創建對象代碼這麼長,復制粘貼都嫌麻煩,而且還會影響代碼的觀賞性,所以需要將AJAX進行封裝。將其封裝成js功能文件,並在網頁中導入即可進行引用。
簡單AJAX封裝後代碼:
<span style="font-family:Times New Roman;font-size:14px;"> function ajax(url,onsuccess,onfail) { var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); xmlhttp.open("POST", url, true); xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) { onsuccess(xmlhttp.responseText);//成功時邏輯操作 } else { onfail(xmlhttp.status);//失敗是邏輯操作 } } } xmlhttp.send(); //這時才開始發送請求 }</span>
封裝完成後,我們可以開始寫登陸判斷代碼(我是用的是.net):
首先,創建一個html頁login.htm以及ashx一般處理程序userhandle.ashx,請求的url中帶上一個action參數,在一般處理程序中對請求進行處理。
function Submit1_onclick() { var name = document.getElementById("name").value; var psw = document.getElementById("psw").value; if (psw != "" && name != "") { //調用AJAX ajax("../userhandle.ashx?operate=login&userName=" + name + "&psw=" + psw, function (resText) { if (resText == "fail") { alert("用戶名或密碼錯誤!"); return false; } else { document.write(resText); } }) } else { alert("請輸入完整登陸信息!"); return false; } }
在一般處理程序中接到請求動作,判斷並執行相關查詢,返回一個字符串,前台頁面接到後,判斷並執行相應功能。
public void login(HttpContext context) { userBLL ub = new userBLL(); string userName = context.Request["userName"]; string userPsw = context.Request["psw"]; bool b = ub.Login(userName, userPsw);//封裝好的bll層方法,判斷用戶名密碼是否正確 if (b == true) { context.Session["Name"] = userName; context.Session["role"] = "user"; context.Response.Write("success"); } else { context.Response.Write("fail"); } }
服務器判斷完後,將success或者fail發送到客戶端。這樣一個使用AJAX異步請求實現登陸就完成了。
至於注冊是判斷用戶名,我就只粘貼上來:
function check() { var userName = document.getElementById("Text1").value; if (userName == "" || userName == null) { document.getElementById("nameMeg").style.color = "red"; document.getElementById("nameMeg").innerHTML = "用戶名為6-10位英文或數字"; } else { ajax("../userhandle.ashx?operate=checkName&userName=" + userName, function (resText) { if (resText == "forbid") { document.getElementById("nameMeg").style.color = "red"; document.getElementById("nameMeg").innerHTML = "用戶名含有非法詞語"; } else if (resText == "already have") { document.getElementById("nameMeg").style.color = "red"; document.getElementById("nameMeg").innerHTML = "用戶名已被使用"; } else { document.getElementById("nameMeg").style.color = "green"; document.getElementById("nameMeg").innerHTML = "可以使用"; } }) } }
以上就是小編為大家帶來的用AJAX實現頁面登陸以及注冊用戶名驗證的簡單實例全部內容了,希望大家多多支持~