XMLHttpRequest创建智能表单

【 tulaoshi.com - Web开发 】

我们可能已经多次遇到过这样的情况：当通过某个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有效。

●       not available 该值表示所查询的用户名或e-mail已经被注册，因此当前所输入的注册信息无效。

从服务器端返回的值将以纯文本的方式发送给客户端。客户端JavaScript只须通过一个简单的比较，即可告诉用户他所输入的用户名或e-mail是否已经被注册。

由于这是一个在线的(live-code)Ajax实例，因此要运行该实例，计算机必须满足如下所示的几点要求。

首先，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

PHP是一种比较流行的开放源代码的服务器端脚本语言。如果想运行PHP脚本，必须在计算机上安装PHP。从www.php.net上可以下载到各种形式的PHP安装程序(如二进制形式、Windows安装向导形式、或者PHP的源代码形式)。本例中的PHP代码是用PHP 4编写的，但在PHP 5中这些代码也能照常运行。

打开文本编辑器并输入下列代码：

html

head

titleForm 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服务器的根目录中。如果你使用的Web服务器是IIS，则将上面的代码保存为c:inetpubwwwrootvalidate_form.htm文件。如果你使用的Web服务器是Apache，则可将上面的代码保存在htdocs文件夹之下，即保存为pathTohtdocshtdocsvalidate_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

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 --

表格的第一列包含了字段的标题。第二列则包含了input/元素本身。这些标记都有id属性，username用于Username域，email用于Email域。这使用户可以很容易地找到input/元素并将文本输入其中。第三列中则包含了一个相应的超链接(a/元素)，该超链接使用JavaScript:协议来调用JavaScript代码。在本例中，当用户单击Username字段之后的超链接时，将调用checkUsername()函数，当用户单击了Email字段之后的超链接时，将调用checkEmail()函数。稍后我们将讨论这两个函数。

表格的其余三行包含了两个密码字段和一个Submit按钮(在本例的表单中并不涉及这几个字段)。其前两行同样也包含了三列：第一列是描述性的字段标题，第二列则包含了input/元素，第三列为空。定义这三个表格行的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

最后一行则包含了两个单元格。第一个单元格跨越了表格的两列，其中包含了表单的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，则该函数将告诉用户当前申请的用户名已经被占用。

检查电子邮件是否有效也可以采用类似的方法。checkEmail()函数用于获取用户在Email字段中输入的数据，并将该信息发送给服务器端的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();

}

回调函数checkEmail_callBack()与checkUsername_callBack()函数的功能类似。在checkEmail_callBack()函数中采用了相同的程序逻辑，该函数将根据请求返回的信息告诉用户所输入的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()函数中，检查从服务器返回的响应是否是available，如果是，则通知用户他输入的e-mail可以使用。如果从服务器返回的响应是not available，则通知用户他输入的e-mail已经被其他用户注册。

使用XMLHttpRequest对象并不是唯一的解决办法，下面我们将介绍使用iframe方式来实现该表单的功能。