用AJAX實現頁面登陸以及註冊使用者名稱驗證
阿新 • • 發佈:2019-02-10
AJAX即“Asynchronous
Javascript And XML”(非同步JavaScript和XML),是指一種建立互動式網頁應用的網頁開發技術。
AJAX 是一種用於建立快速動態網頁的技術。其核心是 JavaScript 物件 XMLHttpRequest。該物件在 Internet Explorer 5 中首次引入,它是一種支援非同步請求的技術。簡而言之,XMLHttpRequest使您可以使用 JavaScript 向伺服器提出請求並處理響應,而不阻塞使用者。 通過在後臺與伺服器進行少量資料交換,AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下,對網頁的某部分進行更新。
傳統的網頁(不使用 AJAX)如果需要更新內容,必須過載整個網頁頁面。
試想如果在註冊時,提交了註冊資訊,等了幾秒後頁面過載了,結果彈出一個提示框告訴你“使用者名稱已被使用”,那將是很令人惱火的一件事。所以在這裡,使用AJAX實現非同步請求,即可在不過載頁面的情況下實現與資料庫的通訊。
注意: 不要以為if (xmlhttp.readyState == 4) 在send之前執行就覺得不對, xmlhttp.send(); 這時才開始傳送請求。這時才開始傳送請求後不等伺服器返回資料,就繼續向下執行,所以不會阻塞,介面就不卡了,這就是AJAX中“A”的含義“非同步”。
簡單AJAX封裝後代碼:
封裝完成後,我們可以開始寫登陸判斷程式碼(我是用的是.net):
首先,建立一個html頁login.htm以及ashx一般處理程式userhandle.ashx,請求的url中帶上一個action引數,在一般處理程式中對請求進行處理。
伺服器判斷完後,將success或者fail傳送到客戶端。這樣一個使用AJAX非同步請求實現登陸就完成了。
至於註冊是判斷使用者名稱,我就只貼上上來:
AJAX 是一種用於建立快速動態網頁的技術。其核心是 JavaScript 物件 XMLHttpRequest。該物件在 Internet Explorer 5 中首次引入,它是一種支援非同步請求的技術。簡而言之,XMLHttpRequest使您可以使用 JavaScript 向伺服器提出請求並處理響應,而不阻塞使用者。 通過在後臺與伺服器進行少量資料交換,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(響應中已有部分資料可用了,但是伺服器還沒有完成響應的生成)
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 = "可以使用";
}
})
}
}