我們可能已經多次遇到過這樣的情況:當通過某個Web站點的表單注冊用戶,或者申請注冊一個基於Web界面的電子郵箱時,在我們填寫完長長的表單之後,結果卻發現我們申請的用戶名已經被其他人占用了。最糟糕的就是直到我們填完表單並提交,且頁面被重新加載之後,我們才能發現所申請的用戶名是否已經被他人使用,並且重新加載頁面之後我們已經輸入的某些信息就可能已經丟失,我們不得不再次重新輸入這些信息。幸運的是,Ajax可以消除這種令人沮喪的用戶體驗,並在用戶提交表單之前,告訴用戶他所申請的用戶名是否可用。
我們可以采用多種不同的方法來解決這一問題,最簡單的辦法就是提供一個超鏈接以發起一個到目標服務器程序的HTTP請求,以檢查用戶申請的用戶名等信息是否可用。
下面我們將創建一個類似於常見注冊頁面的表單。該表單將包含以下幾個字段:
● Username(須校驗字段)—— 用戶在該字段中輸入希望申請的用戶名。
● Email(須校驗字段)—— 用戶在該字段中輸入他的e-mail。
● Password(無須校驗字段)—— 用戶在該字段中輸入他的密碼。
● Verify Password(無須校驗字段)—— 用戶在該字段中再次輸入密碼,與前一次輸入的密碼進行比較,以檢查兩次輸入的密碼是否一致。
注意,在本例中,Password和Verify Password字段僅僅作為表單的字段進行演示。實際上,密碼校驗是由服務器端的程序和數據庫來完成的,但是,在提交表單之前,可以使用JavaScript來檢查兩次輸入的密碼是否一致,這比將兩個密碼的檢查放在服務器端更加有效率。
在Username和Email字段之後,將包含一個超鏈接,該超鏈接將調用一個JavaScript函數,並使用本章前面創建的HttpRequest類來發起一個請求,以向目標服務器查詢當前用戶輸入的Username或Email是否有效。服務器端的程序是一個簡單的PHP程序文件。雖然關於PHP程序設計的相關內容並不在本書的范圍,但是我們將討論一下如何向該PHP程序發起請求以驗證數據,以及如何將響應返回的數據回送給JavaScript使用。
服務器端的PHP程序將在查詢字符串中查找以下兩個參數:username參數或者email參數。
要檢查用戶名是否可用,只需使用username參數。一個請求查詢用戶名是否可用的查詢字符串將如下所示:
http://localhost/formvalidator.php?username=[usernameToSearchFor]
當實際查詢某一個用戶名時,只需將[usernameToSearchFor]替換為實際要查詢的用戶名即可。
查詢e-mail的方法與此類似。一個查詢e-mail是否有效的URL將如下所示:
http://localhost/formvalidator.php?email=[emailToSearchFor]
如果查詢請求成功,則將返回以下兩個值之一:
● available—— 該值表示所查詢的用戶名或e-mail有效。
● &n