一個網站采用Ajax技術，不僅可以改善網站的用戶體驗性，而且大大節約了寶貴的帶寬，減輕了服務器負荷（不再需要交互整個網頁內容，而是局部）。
今天分享一個“利用Ajax技術來檢測用戶名是否存在”的例子。
利用Ajax技術來檢測用戶名是否存在的原理流程圖：
最終結果截圖：
代碼如下:
<!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 name="myform">
用戶名：<input type="text" name="user" onblur="checkname();">
<span id="checkbox"></span>
</form>
</body>
</html>
代碼解釋：
①實現該功能的核心代碼在ajax.js，需要另外引進
②給form命名，因為后面我們需要利用JS來取得input框中的value
③給input框添加一個“onblur”事件，即當“焦點”失去時觸發該事件(即流程圖的“觸發控件”)
④<span id="checkbox"></span>用來放從服務器發送回來的數據（即“用戶名已存在”等）
代碼如下:
<?php
mysql_connect("localhost",'root','');
mysql_select_db('test');
$sql="select * from ajax where name='$_GET[id]'";
$query=mysql_query($sql);
if(is_array(mysql_fetch_array($query))){
echo "<font color=red>用戶名已存在</font>";
}else{
echo "<font color=green>用戶名可以使用</font>";
}
?>
代碼解釋：
通過ajax的open方法，將用戶輸入”用戶名“通過id傳遞給進來（即$_GET[id]），此時將對指定的數據庫表中進行查詢，檢查是否有存在該“用戶名”
代碼如下:
// JavaScript Document
var XHR; //定義一個全局對象
function createXHR(){ //首先我們得創建一個XMLHttpRequest對象
if(window.ActiveXObject){//IE的低版本系類
新聞熱點
疑難解答
圖片精選
