Ajax引擎對象中的方法：
abort() 停止當前請求
getAllResponseHeaders() 作為字串返回完整的headers
getResponseHeader ("headerLabel")作為字串返回單個的header標籤
open("method","URL"[,asyncFlag[,"userName"[,"password"]]]) 建立對伺服器的調用。method參數可以是GET、POST或PUT，url參數可以是相對URL或絕對URL
send(content) 向伺服器發送請求
setRequestHeader("header","value") 把指定首部設定為所提供的值，在設定任何首部之前必須先調用open()
Aaja引擎對象中的屬性
onreadystatechange 狀態改變的事件觸發程序
readyState 對象狀態（integer）
0=未初始化 1=讀取中 2=已讀取 3=互動中 4=完成
responseText 伺服器處理序返回資料的文本版本
responseXML 伺服器處理序返回資料的相容DOM的XML文檔對象
status 伺服器返回的狀態代碼，如：404=“檔案未找到”、200=“成功”
statusText 伺服器返回的狀態文本資訊
使用Ajax請求伺服器 需要使用Ajax引擎的方法
看圖
變通瀏覽器
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.111cn.net> <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的低版本系類 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()方法返回結果，這正是ajax的核心思想 XHR.onreadystatechange=byhongfei;//當狀態改變時，調用byhongfei這個方法，方法的內容我們另外定義 XHR.send(null); } function byhongfei(){ if(XHR.readyState == 4){//關於Ajax引擎對象中的方法和屬性，if(XHR.status == 200){ var textHTML=XHR.responseText; document.getElementById('checkbox').innerHTML=textHTML; } } } |
|
利用ajax監測郵箱是否存在一個道理，我們還可以利用ajax即時監測使用者輸入的密碼強度，此時，需要用到可以把onblur事件改為onfocus事件。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
