首先來看主程式碼（reg.html）：
| 代碼如下 |
複製代碼 |
<div id="reg">
請輸入使用者名稱：<input id="usrname" value="請輸入使用者名稱" onfocus="regInit();regKey()" onblur="regInit()" onkeyup="regKey()"/>
</div> |
<div id="regtip" style="display:none">使用者名稱重複或非法</div>
<!--以下為JS代碼部分，功能是Ajax響應驗證使用者名稱合法性-->
| 代碼如下 |
複製代碼 |
<script language="javascript"> function getem(aID)
{
return (document.getElementById) ? document.getElementById(aID): document.all[aID];
} function changeDsp()
{
getem(regtip).style.display="";//也可以使用inner方式重新賦值
}
<!--Ajax校正使用者名稱-->
var v=getem('usrname');
var s_value=getem('usrname').value;//儲存初值
function regInit()
{
v.style.color="#000000";
if(v.value==s_value)//無效使用者名稱
v.value='';
else if(v.value==''){//恢複預設提示資訊
v.value=s_value;
v.style.color="";
}
}
function regKey()
{
str=v.value;
if(!str){
return 0;
}
var xhttp=getXmlhttp();
xhttp.onreadystatechange=function(){
if(xhttp.readyState == 4 && (xhttp.status==200 || window.location.href.indexOf("http")==-1)){
document.getElementById("regtip").innerHTML=xhttp.responseText;
changeDsp();
}
}
var url = "chkusr.php?usr="+ encodeURI(str);//需要進行Ajax的URL地址
xhttp.open("GET",url,true);
xhttp.setRequestHeader("If-Modified-Since","0");//不緩衝
xhttp.send(null);
}
</script> |
程式說明：
1、onblur事件是輸入框失去焦時間點事件，onkeyup是鍵盤按下又鬆開時候觸發。
2、reg是註冊資訊部分，這裡大家可以加上自己的代碼，比如使用者名稱、密碼、郵箱等都可以使用Ajax進行適時校正。
3、regtip是提示資訊部分，一般為空白，如果Ajax校正失敗，則在這裡進行錯誤提示。
4、chkusr.php是使用者名稱的校正程式，後面的usr就是傳遞的URL參數，如果使用ASP等其它語言，修改方式類似，最終只需要返回查詢的結果提示資訊即可，比如“輸入使用者名稱重複，請更換個更酷的”、“電子郵箱已被註冊，請修改後再次提交註冊”等等。
5、樣本chkusr.php程式如下，實際使用肯定需要跟資料庫相連，特別要小心使用者輸入資訊的過濾和安全：
| 代碼如下 |
複製代碼 |
<?php //注意這裡好像是用不帶PHP三個字母傳回值是包括PHP限定符（在IE6上），帶PHP就沒問題，稍後再研究一下具體區別 $usr=$_trim['usr']; if($usr=='admin') {
echo "Sorry, this name is fobiddened to use."; } else { echo "Hi, this name is free for register." }
?> |
上面寫的是js ajax了，其實但現在js ajax用得很少，用得多的是jquery+ajax/" target="_blank">jquery ajax了，下面我也來介紹。
執行個體：
1、請求頁面AJax.aspx
HTML代碼
| 代碼如下 |
複製代碼 |
Code
<div>
<input id="txtName" type="text" /><input type="button" value="查看使用者名稱是否存在" id="btn" onclick="JudgeUserName();" />
<div id="showResult" style="float:left">div>
div> |
JS代碼
| 代碼如下 |
複製代碼 |
Code
<script type="text/javascript" src="CSS/jquery-1.3.2.js"></script>
<script type="text/javascript">
function JudgeUserName()
{
$.ajax({
type:"GET",
url:"AjaxUserInfoModify.aspx",
dataType:"html",
data:"userName="+$("#txtName").val(),
beforeSend:function(XMLHttpRequest)
{
$("#showResult").text("正在查詢");
//Pause(this,100000);
},
success:function(msg)
{
$("#showResult").html(msg);
$("#showResult").css("color","red");
},
complete:function(XMLHttpRequest,textStatus)
{
//隱藏正在查詢圖片
},
error:function()
{
//錯誤處理
}
});
} </script> |
2 、頁面AjaxUserInfoModify.aspx
後台代碼
| 代碼如下 |
複製代碼 |
Code
protected void Page_Load(object sender, EventArgs e)
{
string userName = Request.QueryString["userName"].ToString ();
if (userName == "James Hao")
{
Response.Write ("使用者名稱已經存在！");
}
else
{
Response.Write ("您可以使用此使用者名稱！");
}
} |
