XMLHttpRequest創建智能表單

2024-07-21 02:04:28

字體：大中小

來源：轉載

供稿：網友

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有效。

● not available—— 該值表示所查詢的用戶名或e-mail已經被注冊，因此當前所輸入的注冊信息無效。

從服務器端返回的值將以純文本的方式發送給客戶端?？蛻舳薺avascript只須通過一個簡單的比較，即可告訴用戶他所輸入的用戶名或e-mail是否已經被注冊。

16.4.3 在開始編寫代碼之前

由于這是一個在線的(live-code)ajax實例，因此要運行該實例，計算機必須滿足如下所示的幾點要求。

1. 計算機上必須有一個web服務器

首先，php程序必須運行在一個web服務器上，因此必須在計算機上安裝一個web服務器。如果你使用的是windows 2000(個人版或服務器版)、windows xp professional或者windows server 2003，則這些操作系統中已經提供了一個免費的web服務器以供使用，即internet information services(iis)。要安裝iis服務器，只需在windows操作系統的控制面板中打開add/remove programs，并單擊add/remove windows components即可。圖16-3展示了windows xp professional系統中的windows components wizard窗口。

只需選中internet information services(iis)選項前面的復選框，然后單擊next按鈕即可進行安裝。安裝時可能需要使用操作系統的安裝光盤，以完成iis的安裝。

如果你所使用的不是以上幾種操作系統，或者你希望使用其他的web服務器，那么你可以下載并安裝一個apache http server(www.apache.org)。apache http server是一個開放源代碼的web服務器，它可以運行在多種操作系統之上，如linux系統、unix系統和windows系統等。

圖 16-3

2. php

php是一種比較流行的開放源代碼的服務器端腳本語言。如果想運行php腳本，必須在計算機上安裝php。從www.php.net上可以下載到各種形式的php安裝程序(如二進制形式、windows安裝向導形式、或者php的源代碼形式)。本例中的php代碼是用php 4編寫的，但在php 5中這些代碼也能照常運行。

打開文本編輯器并輸入下列代碼：

<html>

<head>

<title>form field validation</title>

.fieldname

{

text-align: right;

}

.submit

{

text-align: right;

}

</style>

function checkusername()

{

var uservalue = document.getelementbyid("username").value;

if (uservalue == "")

{

alert("please enter a user name to check!");

return;

}

var url = "formvalidator.php?username=" + uservalue;

var request = new httprequest(url, checkusername_callback);

request.send();

}

function checkusername_callback(sresponsetext)

{

var uservalue = document.getelementbyid("username").value;

if (sresponsetext == "available")

{

alert("the username " + uservalue + " is available!");

}

else

{

alert("we’re sorry, but " + uservalue + " is not available.");

}

function checkemail()

{

var emailvalue = document.getelementbyid("email").value;

if (emailvalue == "")

{

alert("please enter an email address to check!");

return;

}

var url = "formvalidator.php?email=" + emailvalue;

var request = new httprequest(url, checkemail_callback);

request.send();

}

function checkemail_callback(sresponsetext)

{

var emailvalue = document.getelementbyid("email").value;

if (sresponsetext == "available")

{

alert("the email " + emailvalue + " is currently not in use!");

}

else

{

alert("i’m sorry, but " + emailvalue + " is in use by another user.");

}

</script>

</head>

<body>

<form>

<table>

<tr>

username:

</td>

<td>

</td>

<td>

<a href="javascript: checkusername()">check availability</a>

</td>

</tr>

<tr>

email:

</td>

<td>

</td>

<td>

<a href="javascript: checkemail()">check availability</a>

</td>

</tr>

<tr>

password:

</td>

<td>

</td>

<td />

</tr>

<tr>

verify password:

</td>

<td>

</td>

<td />

</tr>

<tr>

</td>

<td />

</tr>

</table>

</form>

</body>

</html>

將上面的代碼保存在web服務器的根目錄中。如果你使用的web服務器是iis，則將上面的代碼保存為c:/inetpub/wwwroot/validate_form.htm文件。如果你使用的web服務器是apache，則可將上面的代碼保存在htdocs文件夾之下，即保存為pathtohtdocs/htdocs/validate_form.htm文件。

另外，我們還需要將httprequest.js文件(定義了httprequest類)和formvalidator.php文件放在與validate_form.htm文件相同的目錄中。

現在，我們可以打開瀏覽器，在地址欄中輸入http://localhost/formvalidator.php。如果web服務器工作正常的話，你將看到頁面上顯示出“php is working correctly. congratulations!”這樣一段文本信息，如圖16-4所示。

圖 16-4

接下來，如果在瀏覽器的地址欄中輸入http://localhost/validate_form.htm，你將看到一個如圖16-5所示的頁面。

圖 16-5

在username文本框中輸入jmcpeak，并單擊文本框旁邊的check availability超鏈接，你將看到一個彈出的信息對話框，如圖16-6所示。

圖 16-6

接下來，在email文本框中輸入someone@xyz.com，并單擊文本框旁邊的check availability超鏈接。你將看到一個消息對話框彈出，并提示你該e-mail已經被注冊了。我們還可以在username文本框和email文本框中輸入我們自己的用戶名和e-mail地址，并單擊文本框旁邊相應的超鏈接進行檢查。也許信息對話框將告訴你所輸入的用戶名或e-mail是有效的(注意：在服務器端的php程序中，假定了用戶名jmcpeak和pwilton，電子郵箱someone@xyz.com和someone@zyx.com已經被注冊)。

代碼解說

該html頁面中包含一個簡單的表單，表單中的各個字段通過一個表格來進行頁面布局的處理。在表格中，每一個表單字段占用一個表格行。表格的前兩行就是我們最感興趣的字段，即username字段和email字段。相應的html代碼如下所示：

<form>

<table>

<tr>

username:

</td>

<td>

</td>

<td>

<a href="javascript: checkusername()">check availability</a>

</td>

</tr>

<tr>

email:

</td>

<td>

</td>

<td>

<a href="javascript: checkemail()">check availability</a>

</td>

</tr>

表格的第一列包含了字段的標題。第二列則包含了<input/>元素本身。這些標記都有id屬性，username用于username域，email用于email域。這使用戶可以很容易地找到<input/>元素并將文本輸入其中。第三列中則包含了一個相應的超鏈接(<a/>元素)，該超鏈接使用javascript:協議來調用javascript代碼。在本例中，當用戶單擊username字段之后的超鏈接時，將調用checkusername()函數，當用戶單擊了email字段之后的超鏈接時，將調用checkemail()函數。稍后我們將討論這兩個函數。

表格的其余三行包含了兩個密碼字段和一個submit按鈕(在本例的表單中并不涉及這幾個字段)。其前兩行同樣也包含了三列：第一列是描述性的字段標題，第二列則包含了<input/>元素，第三列為空。定義這三個表格行的html代碼如下所示：

<tr>

password:

</td>

<td>

</td>

<td />

</tr>

<tr>

verify password:

</td>

<td>

</td>

<td />

</tr>

<tr>

</td>

<td />

</tr>

</table>

</form>

最后一行則包含了兩個單元格。第一個單元格跨越了表格的兩列，其中包含了表單的submit按鈕。第二個單元格則為空。

該html頁面中的css僅包含了如下所示的兩個樣式規則：

.fieldname

{

text-align: right;

}

.submit

{

text-align: right;

}

這兩個樣式規則用于設置表格中元素的對齊方式，以使表單看上去整齊而有序。

在這個實例中，字段之后的超鏈接是實現ajax功能的關鍵，當單擊超鏈接時將調用相應的javascript函數。首先，我們來討論一下第一個函數checkusername()，該函數用以獲取用戶在username文本框中輸入的用戶名，并使用該信息執行一個http請求。

function checkusername()

{

var uservalue = document.getelementbyid("username").value;

if (uservalue == "")

{

alert("please enter a user name to check!");

return;

}

var url = "formvalidator.php?username=" + uservalue;

var request = new httprequest(url, checkusername_callback);

request.send();

}

在上面的代碼中，為了獲取用戶名，使用了document.getelementbyid()方法以引用該<input/>元素，使用value屬性以獲取用戶在username文本框中輸入的用戶名，并將用戶名保存在變量uservalue中。接下來，將變量uservalue的值與空字符串(" ")進行比較。如果username文本框中的值為空，則提示用戶輸入用戶名，并使用return語句返回以結束函數的執行。如果不對用戶名為空的情況進行檢查，則可能會向服務器發送一些不必要的請求。

在checkusername()中，接下來的代碼構造了一個url字符串并將其保存在變量url中，該url是一個向目標服務器php程序發送請求的查詢字符串。隨后，創建了一個httprequest對象，將url和回調函數傳遞給httprequest()構造函數，并向目標服務器發送請求。

當httprequest對象成功地從服務器獲得響應之后，回調函數checkusername_callback()將被執行。該函數將根據請求返回的信息告訴用戶所申請的用戶名是否有效。注意，從服務器返回的值只包含兩個可能的值：available和not available，因此，我們僅須檢查這兩個可能的值之一。相應代碼如下所示：

function checkusername_callback(sresponsetext)

{

var uservalue = document.getelementbyid("username").value;

if (sresponsetext == "available")

{

alert("the username " + uservalue + " is available!");

}

else

{

alert("we’re sorry, but " + uservalue + " is not available.");

}

如果服務器返回的響應是available，則該函數將告訴用戶當前申請的用戶名有效。否則如果返回的響應是not available，則該函數將告訴用戶當前申請的用戶名已經被占用。