我們可能已經(jīng)多次遇到過(guò)這樣的情況：當(dāng)通過(guò)某個(gè)web站點(diǎn)的表單注冊(cè)用戶，或者申請(qǐng)注冊(cè)一個(gè)基于web界面的電子郵箱時(shí)，在我們填寫(xiě)完長(zhǎng)長(zhǎng)的表單之后，結(jié)果卻發(fā)現(xiàn)我們申請(qǐng)的用戶名已經(jīng)被其他人占用了。最糟糕的就是直到我們填完表單并提交，且頁(yè)面被重新加載之后，我們才能發(fā)現(xiàn)所申請(qǐng)的用戶名是否已經(jīng)被他人使用，并且重新加載頁(yè)面之后我們已經(jīng)輸入的某些信息就可能已經(jīng)丟失，我們不得不再次重新輸入這些信息。幸運(yùn)的是，ajax可以消除這種令人沮喪的用戶體驗(yàn)，并在用戶提交表單之前，告訴用戶他所申請(qǐng)的用戶名是否可用。
我們可以采用多種不同的方法來(lái)解決這一問(wèn)題，最簡(jiǎn)單的辦法就是提供一個(gè)超鏈接以發(fā)起一個(gè)到目標(biāo)服務(wù)器程序的http請(qǐng)求，以檢查用戶申請(qǐng)的用戶名等信息是否可用。
下面我們將創(chuàng)建一個(gè)類似于常見(jiàn)注冊(cè)頁(yè)面的表單。該表單將包含以下幾個(gè)字段：
● username(須校驗(yàn)字段)—— 用戶在該字段中輸入希望申請(qǐng)的用戶名。
● email(須校驗(yàn)字段)—— 用戶在該字段中輸入他的e-mail。
● password(無(wú)須校驗(yàn)字段)—— 用戶在該字段中輸入他的密碼。
● verify password(無(wú)須校驗(yàn)字段)—— 用戶在該字段中再次輸入密碼，與前一次輸入的密碼進(jìn)行比較，以檢查兩次輸入的密碼是否一致。
注意，在本例中，password和verify password字段僅僅作為表單的字段進(jìn)行演示。實(shí)際上，密碼校驗(yàn)是由服務(wù)器端的程序和數(shù)據(jù)庫(kù)來(lái)完成的，但是，在提交表單之前，可以使用javascript來(lái)檢查兩次輸入的密碼是否一致，這比將兩個(gè)密碼的檢查放在服務(wù)器端更加有效率。
在username和email字段之后，將包含一個(gè)超鏈接，該超鏈接將調(diào)用一個(gè)javascript函數(shù)，并使用本章前面創(chuàng)建的httprequest類來(lái)發(fā)起一個(gè)請(qǐng)求，以向目標(biāo)服務(wù)器查詢當(dāng)前用戶輸入的username或email是否有效。服務(wù)器端的程序是一個(gè)簡(jiǎn)單的php程序文件。雖然關(guān)于php程序設(shè)計(jì)的相關(guān)內(nèi)容并不在本書(shū)的范圍，但是我們將討論一下如何向該php程序發(fā)起請(qǐng)求以驗(yàn)證數(shù)據(jù)，以及如何將響應(yīng)返回的數(shù)據(jù)回送給javascript使用。
服務(wù)器端的php程序?qū)⒃诓樵冏址胁檎乙韵聝蓚€(gè)參數(shù)：username參數(shù)或者email參數(shù)。
要檢查用戶名是否可用，只需使用username參數(shù)。一個(gè)請(qǐng)求查詢用戶名是否可用的查詢字符串將如下所示：
http://localhost/formvalidator.php?username=[usernametosearchfor]
當(dāng)實(shí)際查詢某一個(gè)用戶名時(shí)，只需將[usernametosearchfor]替換為實(shí)際要查詢的用戶名即可。
查詢e-mail的方法與此類似。一個(gè)查詢e-mail是否有效的url將如下所示：
http://localhost/formvalidator.php?email=[emailtosearchfor]
如果查詢請(qǐng)求成功，則將返回以下兩個(gè)值之一：
● available—— 該值表示所查詢的用戶名或e-mail有效。
● not available—— 該值表示所查詢的用戶名或e-mail已經(jīng)被注冊(cè)，因此當(dāng)前所輸入的注冊(cè)信息無(wú)效。
從服務(wù)器端返回的值將以純文本的方式發(fā)送給客戶端。客戶端javascript只須通過(guò)一個(gè)簡(jiǎn)單的比較，即可告訴用戶他所輸入的用戶名或e-mail是否已經(jīng)被注冊(cè)。
由于這是一個(gè)在線的(live-code)ajax實(shí)例，因此要運(yùn)行該實(shí)例，計(jì)算機(jī)必須滿足如下所示的幾點(diǎn)要求。
首先，php程序必須運(yùn)行在一個(gè)web服務(wù)器上，因此必須在計(jì)算機(jī)上安裝一個(gè)web服務(wù)器。如果你使用的是windows 2000(個(gè)人版或服務(wù)器版)、windows xp professional或者windows server 2003，則這些操作系統(tǒng)中已經(jīng)提供了一個(gè)免費(fèi)的web服務(wù)器以供使用，即internet information services(iis)。要安裝iis服務(wù)器，只需在windows操作系統(tǒng)的控制面板中打開(kāi)add/remove programs，并單擊add/remove windows components即可。圖16-3展示了windows xp professional系統(tǒng)中的windows components wizard窗口。
只需選中internet information services(iis)選項(xiàng)前面的復(fù)選框，然后單擊next按鈕即可進(jìn)行安裝。安裝時(shí)可能需要使用操作系統(tǒng)的安裝光盤，以完成iis的安裝。
如果你所使用的不是以上幾種操作系統(tǒng)，或者你希望使用其他的web服務(wù)器，那么你可以下載并安裝一個(gè)apache http server(www.apache.org)。apache http server是一個(gè)開(kāi)放源代碼的web服務(wù)器，它可以運(yùn)行在多種操作系統(tǒng)之上，如linux系統(tǒng)、unix系統(tǒng)和windows系統(tǒng)等。
圖 16-3
php是一種比較流行的開(kāi)放源代碼的服務(wù)器端腳本語(yǔ)言。如果想運(yùn)行php腳本，必須在計(jì)算機(jī)上安裝php。從www.php.net上可以下載到各種形式的php安裝程序(如二進(jìn)制形式、windows安裝向?qū)问健⒒蛘遬hp的源代碼形式)。本例中的php代碼是用php 4編寫(xiě)的，但在php 5中這些代碼也能照常運(yùn)行。
打開(kāi)文本編輯器并輸入下列代碼：
<html>
<head>
<title>form field validation</title>
<style type="text/css">
.fieldname
{
text-align: right;
}
.submit
{
text-align: right;
}
</style>
<script type="text/javascript" src="httprequest.js"></script>
<script type="text/javascript">
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>
<td class="fieldname">
username:
</td>
<td>
<input type="text" id="username" />
</td>
<td>
<a href="javascript: checkusername()">check availability</a>
</td>
</tr>
<tr>
<td class="fieldname">
email:
</td>
<td>
<input type="text" id="email" />
</td>
<td>
<a href="javascript: checkemail()">check availability</a>
</td>
</tr>
<tr>
<td class="fieldname">
password:
</td>
<td>
<input type="text" id="password" />
</td>
<td />
</tr>
<tr>
<td class="fieldname">
verify password:
</td>
<td>
<input type="text" id="password2" />
</td>
<td />
</tr>
<tr>
<td colspan="2" class="submit">
<input type="submit" value="submit" />
</td>
<td />
</tr>
</table>
</form>
</body>
</html>
將上面的代碼保存在web服務(wù)器的根目錄中。如果你使用的web服務(wù)器是iis，則將上面的代碼保存為c:/inetpub/wwwroot/validate_form.htm文件。如果你使用的web服務(wù)器是apache，則可將上面的代碼保存在htdocs文件夾之下，即保存為pathtohtdocs/htdocs/validate_form.htm文件。
另外，我們還需要將httprequest.js文件(定義了httprequest類)和formvalidator.php文件放在與validate_form.htm文件相同的目錄中。
現(xiàn)在，我們可以打開(kāi)瀏覽器，在地址欄中輸入http://localhost/formvalidator.php。如果web服務(wù)器工作正常的話，你將看到頁(yè)面上顯示出“php is working correctly. congratulations!”這樣一段文本信息，如圖16-4所示。
圖 16-4
接下來(lái)，如果在瀏覽器的地址欄中輸入http://localhost/validate_form.htm，你將看到一個(gè)如圖16-5所示的頁(yè)面。
圖 16-5
在username文本框中輸入jmcpeak，并單擊文本框旁邊的check availability超鏈接，你將看到一個(gè)彈出的信息對(duì)話框，如圖16-6所示。
圖 16-6
接下來(lái)，在email文本框中輸入[email protected]，并單擊文本框旁邊的check availability超鏈接。你將看到一個(gè)消息對(duì)話框彈出，并提示你該e-mail已經(jīng)被注冊(cè)了。我們還可以在username文本框和email文本框中輸入我們自己的用戶名和e-mail地址，并單擊文本框旁邊相應(yīng)的超鏈接進(jìn)行檢查。也許信息對(duì)話框?qū)⒏嬖V你所輸入的用戶名或e-mail是有效的(注意：在服務(wù)器端的php程序中，假定了用戶名jmcpeak和pwilton，電子郵箱[email protected]和[email protected]已經(jīng)被注冊(cè))。
代碼解說(shuō)
該html頁(yè)面中包含一個(gè)簡(jiǎn)單的表單，表單中的各個(gè)字段通過(guò)一個(gè)表格來(lái)進(jìn)行頁(yè)面布局的處理。在表格中，每一個(gè)表單字段占用一個(gè)表格行。表格的前兩行就是我們最感興趣的字段，即username字段和email字段。相應(yīng)的html代碼如下所示：
<form>
<table>
<tr>
<td class="fieldname">
username:
</td>
<td>
<input type="text" id="username" />
</td>
<td>
<a href="javascript: checkusername()">check availability</a>
</td>
</tr>
<tr>
<td class="fieldname">
email:
</td>
<td>
<input type="text" id="email" />
</td>
<td>
<a href="javascript: checkemail()">check availability</a>
</td>
</tr>
<!-- html to be continued later -->
表格的第一列包含了字段的標(biāo)題。第二列則包含了<input/>元素本身。這些標(biāo)記都有id屬性，username用于username域，email用于email域。這使用戶可以很容易地找到<input/>元素并將文本輸入其中。第三列中則包含了一個(gè)相應(yīng)的超鏈接(<a/>元素)，該超鏈接使用javascript:協(xié)議來(lái)調(diào)用javascript代碼。在本例中，當(dāng)用戶單擊username字段之后的超鏈接時(shí)，將調(diào)用checkusername()函數(shù)，當(dāng)用戶單擊了email字段之后的超鏈接時(shí)，將調(diào)用checkemail()函數(shù)。稍后我們將討論這兩個(gè)函數(shù)。
表格的其余三行包含了兩個(gè)密碼字段和一個(gè)submit按鈕(在本例的表單中并不涉及這幾個(gè)字段)。其前兩行同樣也包含了三列：第一列是描述性的字段標(biāo)題，第二列則包含了<input/>元素，第三列為空。定義這三個(gè)表格行的html代碼如下所示：
<!-- html continued from earlier -->
<tr>
<td class="fieldname">
password:
</td>
<td>
<input type="text" id="password" />
</td>
<td />
</tr>
<tr>
<td class="fieldname">
verify password:
</td>
<td>
<input type="text" id="password2" />
</td>
<td />
</tr>
<tr>
<td colspan="2" class="submit">
<input type="submit" value="submit" />
</td>
<td />
</tr>
</table>
</form>
最后一行則包含了兩個(gè)單元格。第一個(gè)單元格跨越了表格的兩列，其中包含了表單的submit按鈕。第二個(gè)單元格則為空。
該html頁(yè)面中的css僅包含了如下所示的兩個(gè)樣式規(guī)則：
.fieldname
{
text-align: right;
}
.submit
{
text-align: right;
}
這兩個(gè)樣式規(guī)則用于設(shè)置表格中元素的對(duì)齊方式，以使表單看上去整齊而有序。
在這個(gè)實(shí)例中，字段之后的超鏈接是實(shí)現(xiàn)ajax功能的關(guān)鍵，當(dāng)單擊超鏈接時(shí)將調(diào)用相應(yīng)的javascript函數(shù)。首先，我們來(lái)討論一下第一個(gè)函數(shù)checkusername()，該函數(shù)用以獲取用戶在username文本框中輸入的用戶名，并使用該信息執(zhí)行一個(gè)http請(qǐng)求。
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中。接下來(lái)，將變量uservalue的值與空字符串(" ")進(jìn)行比較。如果username文本框中的值為空，則提示用戶輸入用戶名，并使用return語(yǔ)句返回以結(jié)束函數(shù)的執(zhí)行。如果不對(duì)用戶名為空的情況進(jìn)行檢查，則可能會(huì)向服務(wù)器發(fā)送一些不必要的請(qǐng)求。
在checkusername()中，接下來(lái)的代碼構(gòu)造了一個(gè)url字符串并將其保存在變量url中，該url是一個(gè)向目標(biāo)服務(wù)器php程序發(fā)送請(qǐng)求的查詢字符串。隨后，創(chuàng)建了一個(gè)httprequest對(duì)象，將url和回調(diào)函數(shù)傳遞給httprequest()構(gòu)造函數(shù)，并向目標(biāo)服務(wù)器發(fā)送請(qǐng)求。
當(dāng)httprequest對(duì)象成功地從服務(wù)器獲得響應(yīng)之后，回調(diào)函數(shù)checkusername_callback()將被執(zhí)行。該函數(shù)將根據(jù)請(qǐng)求返回的信息告訴用戶所申請(qǐng)的用戶名是否有效。注意，從服務(wù)器返回的值只包含兩個(gè)可能的值：available和not available，因此，我們僅須檢查這兩個(gè)可能的值之一。相應(yīng)代碼如下所示：
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.");
}
}
如果服務(wù)器返回的響應(yīng)是available，則該函數(shù)將告訴用戶當(dāng)前申請(qǐng)的用戶名有效。否則如果返回的響應(yīng)是not available，則該函數(shù)將告訴用戶當(dāng)前申請(qǐng)的用戶名已經(jīng)被占用。
檢查電子郵件是否有效也可以采用類似的方法。checkemail()函數(shù)用于獲取用戶在email字段中輸入的數(shù)據(jù)，并將該信息發(fā)送給服務(wù)器端的php程序。
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();
}
回調(diào)函數(shù)checkemail_callback()與checkusername_callback()函數(shù)的功能類似。在checkemail_callback()函數(shù)中采用了相同的程序邏輯，該函數(shù)將根據(jù)請(qǐng)求返回的信息告訴用戶所輸入的e-mail是否有效。
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.");
}
}
同樣，在checkemail_callback()函數(shù)中，檢查從服務(wù)器返回的響應(yīng)是否是available，如果是，則通知用戶他輸入的e-mail可以使用。如果從服務(wù)器返回的響應(yīng)是not available，則通知用戶他輸入的e-mail已經(jīng)被其他用戶注冊(cè)。
使用xmlhttprequest對(duì)象并不是唯一的解決辦法，下面我們將介紹使用iframe方式來(lái)實(shí)現(xiàn)該表單的功能。
新聞熱點(diǎn)
疑難解答
圖片精選
