XMLHttpRequest创建智能表单

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参数。

要检查用户名是否可用，只需使用user

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!