最終結(jié)果截圖：
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax檢測用戶名</title>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<form>
用戶名：<input type="text" onblur="checkname();">
<span></span>
</form>
</body>
</html>
復(fù)制代碼 代碼如下:
<?php
mysql_connect("localhost",'root','');
mysql_select_db('test');
$sql="select * from ajax where";
$query=mysql_query($sql);
if(is_array(mysql_fetch_array($query))){
echo "<font color=red>用戶名已存在</font>";
}else{
echo "<font color=green>用戶名可以使用</font>";
}
?>
復(fù)制代碼 代碼如下:
// JavaScript Document
var XHR; //定義一個全局對象
function createXHR(){ //首先我們得創(chuàng)建一個XMLHttpRequest對象
if(window.ActiveXObject){//IE的低版本系類
XHR=new ActiveXObject('Microsoft.XMLHTTP');//之前IE壟斷了整個瀏覽器市場，沒遵循W3C標準，所以就有了這句代碼。。。但IE6之后開始有所改觀
}else if(window.XMLHttpRequest){//非IE系列的瀏覽器，但包括IE7 IE8
XHR=new XMLHttpRequest();
}
}
function checkname(){
var username=document.myform.user.value;
createXHR();
XHR.open("GET","checkname.php?id="+username,true);//true:表示異步傳輸，而不等send()方法返回結(jié)果，這正是ajax的核心思想
XHR.onreadystatechange=byhongfei;//當狀態(tài)改變時，調(diào)用byhongfei這個方法，方法的內(nèi)容我們另外定義
XHR.send(null);
}
function byhongfei(){
if(XHR.readyState == 4){//關(guān)于Ajax引擎對象中的方法和屬性，可以參考我的另一篇博文：
if(XHR.status == 200){
var textHTML=XHR.responseText;
document.getElementById('checkbox').innerHTML=textHTML;
}
}
}
新聞熱點
疑難解答
