利用 Jython 与 Ajax 技术构建一个简单的 Web 应用程序(2)_H5之家

Jython 是两种广泛流行语言 Java 和 Python 的组合，它是 Python 的纯 Java 实现。Java 现如今已被广泛地接受，Java 拥有庞大的可利用的类库，并有很详尽的文档。Python 则具有很好的灵活性，开发快速，容易使用。Jython 能够实现在 Java 或 Python 中实现的任何类、算法。Jython 无缝地结合了 Java 与 Python，使用户能以 Python 语言的语法编写在 Java 虚拟机（JVM，Java Virtual Machine）上运行的软件。也即体现了 Jython 对于 Java 的兼容性。所以既然在 3.1 小节能用 Java 编写 Servlet，那么 Jython 也完全可以胜任此项工作，与 Java 程序相比，Jython 可以极大的的减少编程代码量，而且使用语法简洁，不失为服务器端解决方案的一种新的思路。

下面的代码是 3.1 小节中 Java Servlet 处理程序的 Jython 语言实现。见清单 2。

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

from javax.servlet.http import HttpServlet class RegisterServlet(HttpServlet): # HTTP POST 请求处理函数 def doPost(self, req, res): # 得到用户提交请求欲申请注册的用户名 searchterm = req.getParameter("username") if not searchterm: searchterm = "" # 已经注册的用户名列表 usernameList = ['neoremind', 'jack', 'simeon', 'victor'] # 设置 HTTP 响应类型信息 res.setContentType("text/html;charset=utf-8") out = res.getWriter() # 遍历所有已经注册的用户名，如果发现有重名的，则提示“用户名已经存在，请另外选择一个” if searchterm in usernameList: print>>out,"Username has existed, please choose another one." # 检查过所有的用户名后，发现没有重名，则提示“用户名合法。检查成功！” else: print>>out,"Valid username. OK!" # HTTP GET 请求处理函数，同 POST 请求处理函数 def doGet(self, req, res): pass

在前端应用 Ajax 技术

Ajax（Asynchronous JavaScript and XML）是一种独立于 Web 服务器的浏览器技术。它的全称是“异步 JavaScript 及 XML”。实际上，它由几种技术和标准以新的强大方式组合而成的。这些技术和标准包括：JavaScript，XML，HTML 以及 CSS。

通过 AJAX，JavaScript 可使用 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象，可在不重载或者刷新页面的情况与 Web 服务器交换数据。AJAX 在浏览器与 Web 服务器之间使用异步数据传输 HTTP 请求，这样就可使网页从服务器请求少量的信息，而不是整个页面，从而达到使因特网应用程序更小、更快，更友好的目标。

在传统的 Web 应用中，如果希望和服务器进行交互，就必须利用 HTML 表单向服务器发送 GET 或 POST 请求。而利用 Ajax 技术，用户可以甚至不知道浏览器正在与服务器通信，就可以得到 Web 站点的即时响应，这全靠一个 JavaScript 内置对象—— XMLHttpRequest。

下面是前端页面 register.jsp 的代码实现。用户名输入框是 input 类型，在其上侦听 onchange 动作，也就是说当用户的光标焦点离开输入框后会触发 onchange 指定的 JavaScript 函数 isValidUsername()。isValidUsername 函数是我们要详细讲解的重点。

首先需要根据不同的浏览器创建 XMLHttpRequest 对象，具体的处理函数是 GetXmlHttpObject。IE 浏览器使用 ActiveXObject，而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。如需针对不同的浏览器来创建此对象，我们要使用一条“try-catch”语句。

接下来要向服务器发送请求，XMLHttpRequest 对象有几个重要的属性，见表 1。

表 1. JavaScript 中 XMLHttpRequest 对象的属性

属性描述

onreadystatechange 每次状态改变所触发事件的事件处理程序

readyState 对象状态值：
0 = 未初始化（uninitialized）
1 = 正在加载（loading）
2 = 加载完毕（loaded）
3 = 交互（interactive）
4 = 完成（complete）

responseText 从服务器进程返回的数据的字符串形式

responseXML 从服务器进程返回的 DOM 兼容的文档数据对象

status 从服务器返回的数字代码，比如 404（未找到）或 200（就绪）

statusText 伴随状态码的字符串信息

onreadystatechange 属性存有处理服务器响应的回调函数。stateChanged() 函数就是相应的回调处理函数。这里是将一个节点 id 为 txtHint 的 DOM 对象的 innerHTML 属性重新附上字符串，也就是检验用户名是否合法的提示信息，这个信息是服务器端返回过来的，通过 responseText 取得。

readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange() 函数就会被执行。

清单 3 实现 Ajax 技术的前端 register.jsp 页面代码

<html> <head> <script> var xmlHttp function isValidUsername(str) { if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; } // 获取 XMLHttpRequest 对象 xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("您的浏览器不支持 AJAX ！"); return; } // 发送请求到指定的 URL 处理 var url= "http://localhost:8080/jythonAjax/RegisterServlet.py"; // 利用 URL 追加字符串的方式添加一个参数 username url=url+"?username="+str; // 设置服务器响应的状态信息改变后，处理它的回调函数 xmlHttp.onreadystatechange=stateChanged; // open() 方法规定发送 POST 请求到指定的 url，并规定应当对请求进行异步处理 xmlHttp.open("POST",url,true); // send() 方法可将请求送往服务器 xmlHttp.send(null); } // 处理服务器响应的状态信息改变的回调函数 function stateChanged() { // 当服务器请求已完成（可以访问服务器响应并使用它） if (xmlHttp.readyState==4) { // 从服务器的 response 获得数据，即返回的提示消息 document.getElementById("txtHint").innerHTML=xmlHttp.responseText; } } // 根据不同的浏览器，返回相应 XMLHttpRequest 对象 function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari 等使用 XMLHttpRequest 对象 xmlHttp=new XMLHttpRequest(); } catch (e) { // 针对 Internet Explorer 6.0 及以上版本使用 try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { // 针对 Internet Explorer 5.5 及以下版本使用 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } </script> </head> <body> <form>  Username:<input type="text" onchange="isValidUsername(this.value)" /> </form>  <p>Suggestions: <span></span> </p> </body> </html>

整合服务器端与前端构建完整的注册检验 Web 应用程序

下面介绍在 Windows 平台上从环境搭建，到配置应用程序完整的流程，供读者参考。Demo 代码可以在页面底部进行下载。

安装 Java 和 Tomcat 服务器

Java Development Kit 的安装版本需要高于 5.0，Tomcat 服务器的安装版本需要高于 5.5。具体的步骤在此省略，有需要的读者请自行在网络搜索寻找教程。

安装 Jython

安装 Jython2.2.1 版本。下载地址为

下载完毕后，运行

java -jar jython_installer-2.2.1.jar

会打开带有界面的安装程序，依次点击下一步直至安装完毕，默认安装路径为 C:\jython2.2.1。

更多 Jython 安装指南请参考

配置 Web 应用程序

在 %TOMCAT_HOME%\webapps 新建以下文件结构。其中 jython.jar 需要从 C:\jython2.2.1\jython.jar 拷贝过来。

清单 4 Web 应用程序目录结构

%TOMCAT_HOME%\webapps `------jythonAjax `--------register.jsp `--------RegisterServlet.py `--------WEB-INF `--------web.xml `--------lib `--------jython.jar

RegisterServlet.py 的内容为清单 2。

web.xml 内容为清单 5。

清单 5 Web 应用程序部署描述文件 web.xml