AJAX 用戶注冊時的應用實例
2024-09-01 08:29:31
供稿：網友
如果我們用AJAX技術來實現以上的操作則不必等待服務器返回信息，用戶輸入用戶名或企業名稱的時候，當輸入文本框失去焦點的時候，則會自動向服務器發出請求，用戶繼續做下面的操作，不必點擊“檢查”，也不必等待服務器返回信息，檢查與用戶操作是異步的，可同時進行。當服務器信息返回的時候，會自動在面頁相應位置顯示返回信息，不必刷新頁面，相當于局部刷新的效果。 下面我們來看代碼吧。
HTML頁面的完整代碼如下：
程序代碼
<%@page language="java" contentType="text/html;charset=GBK"%>
<script language="javascript" type="text/javascript">
<!--
/**//**Ajax 開始 by Alpha 2005-12-31*/
var http = getHTTPObject();
function handleHttpResponse(){
if(http.readyState == 4){
if(http.status == 200){
var xmlDocument = http.responseXML;
if(http.responseText!=""){
document.getElementById("showStr").style.display = "";
document.getElementById("userName").style.background= "#FF0000";
document.getElementById("showStr").innerText = http.responseText;
}else{
document.getElementById("userName").style.background= "#FFFFFF";
document.getElementById("showStr").style.display = "none";
}
}
else{
alert("你所請求的頁面發生異常，可能會影響你瀏覽該頁的信息！");
alert(http.status);
}
}
}
function handleHttpResponse1(){
if(http.readyState == 4){
if(http.status == 200){
var xmlDocument = http.responseXML;
if(http.responseText!=""){
document.getElementById("comNmStr").style.display = "";
document.getElementById("comNm").style.background= "#FF0000";
document.getElementById("comNmStr").innerText = http.responseText;
}else{
document.getElementById("comNm").style.background= "#FFFFFF";
document.getElementById("comNmStr").style.display = "none";
}
}
else{
alert("你所請求的頁面發生異常，可能會影響你瀏覽該頁的信息！");
alert(http.status);
}
}
}
function chkUser(){
var url = "/chkUserAndCom";
var name = document.getElementById("userName").value;
url += ("&userName="+name+"&oprate=chkUser");
http.open("GET",url,true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
return ;
}
function chkComNm(){
var url = "/chkUserAndCom";
var name = document.getElementById("comNm").value;
url += ("&comName="+name+"&oprate=chkCom");
http.open("GET",url,true);
http.onreadystatechange = handleHttpResponse1;
http.send(null);
return ;
}
//該函數可以創建我們需要的XMLHttpRequest對象
