一个典型的 Ajax 应用场景——注册用户名检验

随着互联网应用的普及与 Web 2.0，SNS 等模式的逐渐成熟，越来越多的网站开始吸纳用户，允许用户注册并登录后才可以使用网站应用。互动性强的，更为动态的网站会利用 Ajax 技术构建以增强用户浏览体验（UE，User Experience），相信很多用户都曾经有过这样的注册体会：在注册页面输入用户名后，不用点击检查或者提交按钮，页面不刷新就会自动提示用户名是否可用。这就是一个典型的 Ajax 应用，用户名在“后台”通过 Ajax 技术实现直接提交到服务器进行检查，而不必经过用户显视执行某些动作才能提交检查。下面以微博网站推特（twitter.com）为例展示。

步骤一， 打开注册页面。见图 1。

图 1. twitter.com 注册页面

上述场景的实现思路

分析上述场景，这是一个典型的 B/S（Browser/Server）架构应用程序，分别要实现客户端，即浏览器端与服务器端编程。该方法的关键在于对浏览器端的 JavaScript 与服务器异步通信的组合。启用这种组合非常简单：利用 JavaScript 内置的 XMLHttpRequest 对象向服务器发出异步请求（例如检查操作），它直接从浏览器与后端服务进行通信。服务器端采用 Servlet 技术，Servlet 源于请求 / 响应模式，它可以接收来自客户端浏览器的 HTTP 请求，并产生一个响应，然后将这个响应发送到客户端。当请求返回时，就可以使用 JavaScript 和 CSS 来相应的更新界面（UI），而不是刷新整个页面。这样就可以做到更好的用户浏览体验，用户甚至不知道浏览器正在与服务器通信，Web 站点看起来是即时响应的。

上述分析可以参考图 5。

图 5. 实现架构图

下面的章节将分别介绍如何编写服务器端实现，如何编写应用了 Ajax 技术的前端页面以及二者的整合以构建一个完整的应用程序，同时提供了一个增强用户浏览体验的补充章节，可供参考。

利用 Jython 写服务器端 Servlet 处理程序服务器端 Servlet 原理

在网上浏览任何资源，服务方需要提供一个 Web 服务器，浏览网页的过程就是浏览器通过 HTTP 协议与 Web 服务器进行交互的过程。如今随着应用的发展，客户需要动态地与服务器进行交互，为了实现这一目标，就需要开发一个遵循 HTTP 协议的服务器端应用组件来处理 HTTP 请求。Servlet 是一个基于 Java 技术的运行在服务器端的 Web 组件，利用 Sevlet 可以很轻松的扩展 Web 服务的功能，使它满足特定的应用需要。Servlet 由 Servlet 容器管理，也就是 Servlet 的运行环境（Servlet Runtime Environment），它负责接收请求和提供响应等服务。

例如 Tomcat 就是一个常用的 Servlet 容器，其接收客户端请求并做出响应的步骤如下：

1、客户访问 Web 服务器，发送 HTTP 请求。

2、Web 服务器接收到请求后，传递给 Servlet 容器。

3、Servlet 容器加载 Servlet，请求信息被封装为 HttpServletRequest 对象。

4、Servlet 逻辑代码处理请求，POST 请求由 doPost 方法处理，GET 请求由 doGet 方法处理。

5、Servlet 实例把处理结果封装为 HttpServletResponse 对象，然后发送回浏览器。

下面的代码是专为上述应用场景用 Java 写的服务器端 Servlet 处理程序，这里已经注册过的用户名分别为“neoremind”，“jack”，“simeon”，“victor”，实际的应用中这些数据是需要从数据库中读取出来的，这里为了简化说明，暂且简单处理。

清单 1. 服务器端的 Java 实现的用于验证用户名合法性的 Servlet

import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class RegisterServlet extends HttpServlet{ // HTTP POST 请求处理方法 public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 已经注册的用户名列表 String[] username_list = {"neoremind", "jack", "simeon", "victor"}; // 得到用户提交请求欲申请注册的用户名 String req_username = request.getParameter("username"); if (req_username == null) { req_username = ""; } // 设置 HTTP 响应类型信息 response.setContentType("text/html;charset=utf-8"); // 遍历所有已经注册的用户名，如果发现有重名的，则提示“用户名已经存在，请另外选择一个” for (int i = 0; i < username_list.length; i++) { if (req_username.equals(username_list[i])) { response.getWriter().print("Username has existed, please choose another one."); } } // 检查过所有的用户名后，发现没有重名，则提示“用户名合法。检查成功！” response.getWriter().print("Valid username. OK!"); } // HTTP GET 请求处理方法，同 POST 请求处理方法 public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request,response); } }

Jython 也能胜任 Servlet 工作