AJAX入門經典小案例_驗證用戶名
AJAX指的是異步的JavaScript和XML，是一種集成多種語言的腳本，得到了廣泛的應用，原理在於隨頁面在瀏覽器端創建了ajax引擎，使得表單都經過了這個引擎的中轉處理，同時服務器端也積極配合，用echo就可以將結果直接返回給引擎。下面就用一個最常見的用戶名的驗證小案例展示ajax的應用。
l login.php源代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>登錄界面</title>
<scripttype="text/javascript">
//創建ajax引擎
functiongetXmlHttpObject(){
varxmlHttpRequest;
if(window.ActiveXObject){//IE瀏覽器
xmlHttpRequest=newActiveXObject("Microsoft.XMLHTTP");
}else{//others
xmlHttpRequest=newXMLHttpRequest();
}
returnxmlHttpRequest;
}
//驗證用戶名是否存在
varmyXmlHttpRequest="";
functioncheckName(){
myXmlHttpRequest=getXmlHttpObject();
if(myXmlHttpRequest){
varurl="check.php?username="+$("username").value;
//第三個參數true表示使用異步機制,如果false表示不使用異步
myXmlHttpRequest.open("get",url,true);
//回調函數dealBack
myXmlHttpRequest.onreadystatechange=dealBack;
//get請求填null,post請求，則填實際數據
myXmlHttpRequest.send(null);
}
}
//回調函數
functiondealBack(){
if(myXmlHttpRequest.readyState==4){
$('checker').value=myXmlHttpRequest.responseText;
}
}
//簡化獲取值
function$(id){
returndocument.getElementById(id);
}
</script>
</head>
<body>
<formaction="" method="">
用戶名字:<inputtype="text" οnkeyup="checkName();" name="username1" id="username">
<input style="border-width: 0;color: red"type="text" id="checker">
<br/>
<inputtype="submit" value="登錄">
</form>
</body>
</html>
l check.php源代碼
<?php
header("Content-Type:text/xml;charset=utf-8");
//告訴瀏覽器不要緩存數據
header("Cache-Control:no-cache");
$username=$_GET['username'];
if($username=="LepinHeiker"){
echo"該用戶已被列入黑名單";//數據直接返回給請求的頁面
}else{
echo"合法用戶";
}
?>
解析：上面是以get方式進行的，如果提交的用戶名不變化，瀏覽器將不會真的發請求，而是從緩存取數據，解決方法如下：
l url 後帶一個總是變化的參數,比如當前時間varurl="/ajax/registerProcess.php?mytime="+new Date()+"&username="+$("username").value;
l 在服務器回送結果時，禁用緩存.【已經應用】
@ //這裏兩句話很重要,第一講話告訴瀏覽器返回的數據是xml格式
@ header("Content-Type:text/xml;charset=utf-8");
@ //告訴瀏覽器不要緩存數據
@ header("Cache-Control:no-cache");
若用post方式，那麼關鍵代碼要做如下修改：
l login.php部分源代碼
function checkName(){
myXmlHttpRequest=getXmlHttpObject();
if(myXmlHttpRequest){
varurl="check.php";
vardata="username="+$('username').value;
myXmlHttpRequest.open("post",url,true);
myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//回調函數dealBack
myXmlHttpRequest.onreadystatechange=dealBack;
//get請求填null,post請求，則填實際數據
myXmlHttpRequest.send(data);
}
}
l check.php部分源代碼
$username=$_POST['username'];