當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Ajax的使用四大步骤详解,五、使用Ajax的步骤

發(fā)布時間：2024/10/5 编程问答 40 豆豆

生活随笔收集整理的這篇文章主要介紹了 Ajax的使用四大步骤详解,五、使用Ajax的步骤小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

完成驗證用戶名案例，要求用戶名唯一，就是不能有重復。

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

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

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

![](https://img.kancloud.cn/4e/a8/4ea88767f64b7f3dc7403a78f50a9a8d_673x39.png)

創(chuàng)建03chkusername.php

![](https://img.kancloud.cn/e9/e6/e9e6f1c01ca04fb92e33e70c33cc4b3a_721x163.png)

# 2、當input失去焦點，準備發(fā)送

![](https://img.kancloud.cn/9c/88/9c881230fce625bbe5df8e4e9aa51feb_944x437.png)

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

# 3、發(fā)送請求

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

![](https://img.kancloud.cn/13/ce/13ce7f6c8ac6b39f15c27660e4dadc41_946x419.png)

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

![](https://img.kancloud.cn/db/81/db81f5bd9aa2ee9ef9ec87ff3de03bde_699x412.png)

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

測試：

![](https://img.kancloud.cn/d8/92/d8929419ccc5c000d9de75fa24e71d7b_1257x605.png)

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

![](https://img.kancloud.cn/45/57/4557fc3c953413c9289840d70754e51f_1068x486.png)

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

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

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

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

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

![](https://img.kancloud.cn/44/9e/449eb29c4155820cc76ca1760479aae5_788x151.png)

![](https://img.kancloud.cn/76/73/7673156c7f4065503f4c1a11adf228ec_1142x557.png)

# 7、使用Ajax步驟總結

![](https://img.kancloud.cn/45/e2/45e25d914dfab68515deb6ac67eeb40d_1138x490.png)

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

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