AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。
AJAX 是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)。其核心是 JavaScript 對象 XMLHttpRequest。該對象在 Internet Explorer 5 中首次引入，它是一種支持異步請求的技術(shù)。簡而言之，XMLHttpRequest使您可以使用 JavaScript 向服務(wù)器提出請求并處理響應(yīng)，而不阻塞用戶。
通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進(jìn)行更新。
傳統(tǒng)的網(wǎng)頁（不使用 AJAX）如果需要更新內(nèi)容，必須重載整個網(wǎng)頁頁面。
試想如果在注冊時，提交了注冊信息，等了幾秒后頁面重載了，結(jié)果彈出一個提示框告訴你“用戶名已被使用”，那將是很令人惱火的一件事。所以在這里，使用AJAX實現(xiàn)異步請求，即可在不重載頁面的情況下實現(xiàn)與數(shù)據(jù)庫的通訊。
創(chuàng)建XMLHTTPRequest對象
使用javascript在html頁面中創(chuàng)建XMLHTTPRequest對象，實現(xiàn)AJAX異步請求：
span style="font-size:14px;"> var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
xmlhttp.open("POST", "AJAXTest.ashx?" + "i=5j=10", true);
xmlhttp.onreadystatechange = function ()
{
if (xmlhttp.readyState == 4)
{
if (xmlhttp.status == 200)
{
alert(xmlhttp.responseText);
}
else
{
alert("AJAX服務(wù)器返回錯誤！");
}
}
}
xmlhttp.send();
/span>
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //創(chuàng)建XMLHTTP對象，考慮兼容性
xmlhttp.open("POST", "AJAXTest.ashx?" + "i=5j=10", true); //“準(zhǔn)備”向服務(wù)器的GetDate1.ashx發(fā)出Post請求（GET可能會有緩存問題）。這里還沒有發(fā)出請求。
readyState == 4 表示服務(wù)器返回完成數(shù)據(jù)了。之前可能會經(jīng)歷2（請求已發(fā)送，正在處理中）、3（響應(yīng)中已有部分?jǐn)?shù)據(jù)可用了，但是服務(wù)器還沒有完成響應(yīng)的生成）
注意：
不要以為if (xmlhttp.readyState == 4) 在send之前執(zhí)行就覺得不對， xmlhttp.send(); 這時才開始發(fā)送請求。這時才開始發(fā)送請求后不等服務(wù)器返回數(shù)據(jù)，就繼續(xù)向下執(zhí)行，所以不會阻塞，界面就不卡了，這就是AJAX中“A”的含義“異步”。
AJAX的封裝
在實際項目開發(fā)中，會有多處用到AJAX異步請求，可是創(chuàng)建對象代碼這么長，復(fù)制粘貼都嫌麻煩，而且還會影響代碼的觀賞性，所以需要將AJAX進(jìn)行封裝。將其封裝成js功能文件，并在網(wǎng)頁中導(dǎo)入即可進(jìn)行引用。
簡單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(); //這時才開始發(fā)送請求
}/span>
封裝完成后，我們可以開始寫登陸判斷代碼(我是用的是.net)：
首先，創(chuàng)建一個html頁login.htm以及ashx一般處理程序userhandle.ashx，請求的url中帶上一個action參數(shù)，在一般處理程序中對請求進(jìn)行處理。
function Submit1_onclick() {
var name = document.getElementById("name").value;
var psw = document.getElementById("psw").value;
if (psw != "" name != "") {
//調(diào)用AJAX
ajax("../userhandle.ashx?operate=loginuserName=" + name + "psw=" + psw, function (resText) {
if (resText == "fail") {
alert("用戶名或密碼錯誤！");
return false;
}
else {
document.write(resText);
}
})
}
else {
alert("請輸入完整登陸信息！");
return false;
}
}
在一般處理程序中接到請求動作，判斷并執(zhí)行相關(guān)查詢，返回一個字符串，前臺頁面接到后，判斷并執(zhí)行相應(yīng)功能。
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");
}
}
服務(wù)器判斷完后，將success或者fail發(fā)送到客戶端。這樣一個使用AJAX異步請求實現(xiàn)登陸就完成了。
至于注冊是判斷用戶名，我就只粘貼上來：
function check() {
var userName = document.getElementById("Text1").value;
if (userName == "" || userName == null) {
document.getElementById("nameMeg").style.color = "red";
document.getElementById("nameMeg").innerHTML = "用戶名為6-10位英文或數(shù)字";
}
else {
ajax("../userhandle.ashx?operate=checkNameuserName=" + 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 = "可以使用";
}
})
}
}
以上就是小編為大家?guī)淼挠肁JAX實現(xiàn)頁面登陸以及注冊用戶名驗證的簡單實例全部內(nèi)容了，希望大家多多支持腳本之家~
您可能感興趣的文章:- jquery+ajax實現(xiàn)注冊實時驗證實例詳解
- PHP+Ajax異步通訊實現(xiàn)用戶名郵箱驗證是否已注冊( 2種方法實現(xiàn))
- Ajax驗證用戶名或昵稱是否已被注冊
- Asp.net下利用Jquery Ajax實現(xiàn)用戶注冊檢測（驗證用戶名是否存）
- Ajax注冊用戶時實現(xiàn)表單驗證
- ajax對注冊名進(jìn)行驗證檢測是否存在于數(shù)據(jù)庫中
- AJAX+JAVA用戶登陸注冊驗證的實現(xiàn)代碼
- asp ajax注冊驗證之 防止用戶名輸入空格
- 使用struts2+Ajax+jquery驗證用戶名是否已被注冊
- AJAX實現(xiàn)注冊驗證用戶名
