完成驗(yàn)證用戶名案例，要求用戶名唯一，就是不能有重復(fù)。

頁面中有一個(gè)文本框，當(dāng)失去焦點(diǎn)的時(shí)候，驗(yàn)證輸出的內(nèi)容是否已經(jīng)存在。

# 1、創(chuàng)建所需文件

創(chuàng)建03chkusername.html:


創(chuàng)建03chkusername.php


# 2、當(dāng)input失去焦點(diǎn)，準(zhǔn)備發(fā)送


因?yàn)橛胓et方式請求，所以參數(shù)直接寫到url上即可。服務(wù)器端獲取地址欄的參數(shù)，同樣使用$_GET來獲取。

# 3、發(fā)送請求

調(diào)用Ajax對象的send方法發(fā)送請求到服務(wù)器。


# 4、服務(wù)器接收數(shù)據(jù)并判斷


判斷完成，將判斷的結(jié)果返回給瀏覽器。echo出來的東西就是返回給瀏覽器的內(nèi)容。

測試：


# 5、接收服務(wù)器返回的數(shù)據(jù)，并處理


經(jīng)過測試，發(fā)現(xiàn)并沒有成功接收到服務(wù)器返回的數(shù)據(jù)。通過console.log(result);查看到的結(jié)果什么都么有。

# 6、監(jiān)聽Ajax執(zhí)行狀態(tài)

發(fā)送請求完畢，不應(yīng)該馬上就接收服務(wù)器返回的數(shù)據(jù)，應(yīng)該判斷一下Ajax進(jìn)行到哪一步了。如果說進(jìn)行到最后一步了，即服務(wù)器返回?cái)?shù)據(jù)完畢，這個(gè)時(shí)候才應(yīng)該獲取服務(wù)器返回的數(shù)據(jù)。

Ajax對象中用onreadystatechange屬性(事件)，來監(jiān)聽(檢測)Ajax執(zhí)行到哪一步了。

Ajax對象中用readyState屬性來表示Ajax的狀態(tài)，具體是readyState屬性值如下：



# 7、使用Ajax步驟總結(jié)


總結(jié)

以上是生活随笔為你收集整理的Ajax的使用四大步骤详解,五、使用Ajax的步骤的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。