利用 Jython 与 Ajax 技术构建一个简单的 Web 应用程序 （1）

look_w

一个典型的 Ajax 应用场景——注册用户名检验随着互联网应用的普及与 Web 2.0，SNS 等模式的逐渐成熟，越来越多的网站开始吸纳用户，允许用户注册并登录后才可以使用网站应用。互动性强的，更为动态的网站会利用 Ajax 技术构建以增强用户浏览体验（UE，User Experience），相信很多用户都曾经有过这样的注册体会：在注册页面输入用户名后，不用点击检查或者提交按钮，页面不刷新就会自动提示用户名是否可用。这就是一个典型的 Ajax 应用，用户名在“后台”通过 Ajax 技术实现直接提交到服务器进行检查，而不必经过用户显视执行某些动作才能提交检查。下面以微博网站推特（twitter.com）为例展示。
步骤一， 打开注册页面。见图 1。
图 1. twitter.com 注册页面步骤二，输入一个用户名，例如 neoremind。页面不刷新，而是在文本框右边提示“正在检查（checking availability）”。见图 2。
图 2. 输入已存在用户名，页面提示正在检查步骤三，经过一段时间的检查，文本框右边提示“用户名已经存在（username has already been taken）”。因此 neoremind 这个用户名是重复的，不能被使用。见图 3。
图 3. 输入已存在用户名后，页面提示用户名不合法步骤四，把用户名改为 neoremind123。页面不刷新，而是在文本框右边再次提示“正在检查（checking availability）”，之后提示“合法（ok）”。因此 neoremind123 是可以被使用的用户名。见图 4。
图 4. 输入新的用户名后，页面提示该用户名可以使用上述场景的实现思路分析上述场景，这是一个典型的 B/S（Browser/Server）架构应用程序，分别要实现客户端，即浏览器端与服务器端编程。该方法的关键在于对浏览器端的 JavaScript 与服务器异步通信的组合。启用这种组合非常简单：利用 JavaScript 内置的 XMLHttpRequest 对象向服务器发出异步请求（例如检查操作），它直接从浏览器与后端服务进行通信。服务器端采用 Servlet 技术，Servlet 源于请求 / 响应模式，它可以接收来自客户端浏览器的 HTTP 请求，并产生一个响应，然后将这个响应发送到客户端。当请求返回时，就可以使用 JavaScript 和 CSS 来相应的更新界面（UI），而不是刷新整个页面。这样就可以做到更好的用户浏览体验，用户甚至不知道浏览器正在与服务器通信，Web 站点看起来是即时响应的。
上述分析可以参考图 5。
图 5. 实现架构图下面的章节将分别介绍如何编写服务器端实现，如何编写应用了 Ajax 技术的前端页面以及二者的整合以构建一个完整的应用程序，同时提供了一个增强用户浏览体验的补充章节，可供参考。