DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> XMLHttpRequest創建智能表單
XMLHttpRequest創建智能表單
編輯:關於JavaScript     

16.4  使用XMLHttpRequest創建智能表單

我們可能已經多次遇到過這樣的情況:當通過某個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使用。

16.4.1  如何向服務器端的PHP程序查詢信息

服務器端的PHP程序將在查詢字符串中查找以下兩個參數:username參數或者email參數。

要檢查用戶名是否可用,只需使用username參數。一個請求查詢用戶名是否可用的查詢字符串將如下所示:

http://localhost/formvalidator.php?username=[usernameToSearchFor]

當實際查詢某一個用戶名時,只需將[usernameToSearchFor]替換為實際要查詢的用戶名即可。

查詢e-mail的方法與此類似。一個查詢e-mail是否有效的URL將如下所示:

http://localhost/formvalidator.php?email=[emailToSearchFor]

16.4.2  從服務器返回的數據

如果查詢請求成功,則將返回以下兩個值之一:

●       available—— 該值表示所查詢的用戶名或e-mail有效。

● &n

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved