Chinaunix首页 | 论坛 | 博客
  • 博客访问: 1808830
  • 博文数量: 272
  • 博客积分: 1272
  • 博客等级: 少尉
  • 技术积分: 1866
  • 用 户 组: 普通用户
  • 注册时间: 2011-03-09 15:51
文章分类

全部博文(272)

文章存档

2016年(16)

2015年(28)

2014年(97)

2013年(59)

2012年(25)

2011年(47)

分类: jQuery

2013-07-12 15:07:01

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参数。一个请求查询用户名是否可用的查询字符串将如下所示:

[usernameToSearchFor]

当实际查询某一个用户名时,只需将[usernameToSearchFor]替换为实际要查询的用户名即可。

查询e-mail的方法与此类似。一个查询e-mail是否有效的URL将如下所示:

[emailToSearchFor]

16.4.2  从服务器返回的数据

如果查询请求成功,则将返回以下两个值之一:

●       available—— 该值表示所查询的用户名或e-mail有效。

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

从服务器端返回的值将以纯文本的方式发送给客户端。客户端JavaScript只须通过一个简单的比较,即可告诉用户他所输入的用户名或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()。Apache HTTP Server是一个开放源代码的Web服务器,它可以运行在多种操作系统之上,如Linux系统、Unix系统和Windows系统等。

图  16-3

2. PHP

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


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

Form Field Validation

Username:

Check Availability

Email:

Check Availability

Password:

Verify Password:

将上面的代码保存在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文件相同的目录中。

现在,我们可以打开浏览器,在地址栏中输入。如果Web服务器工作正常的话,你将看到页面上显示出“PHP is working correctly. Congratulations!”这样一段文本信息,如图16-4所示。

图  16-4

接下来,如果在浏览器的地址栏中输入,你将看到一个如图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代码如下所示:

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

表格的其余三行包含了两个密码字段和一个Submit按钮(在本例的表单中并不涉及这几个字段)。其前两行同样也包含了三列:第一列是描述性的字段标题,第二列则包含了元素,第三列为空。定义这三个表格行的HTML代码如下所示:

Username:

Check Availability

Email:

Check Availability

Password:

Verify Password:

最后一行则包含了两个单元格。第一个单元格跨越了表格的两列,其中包含了表单的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()方法以引用该元素,使用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方式来实现该表单的功能。

阅读(977) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~