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

<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee app_2_4.xsd"> <display-name>JythonAjaxHelloworld</display-name> <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.htm</welcome-file> <welcome-file>index.jsp</welcome-file> <welcome-file>default.html</welcome-file> <welcome-file>default.htm</welcome-file> <welcome-file>default.jsp</welcome-file> </welcome-file-list> <servlet> <servlet-name>PyServlet</servlet-name> <servlet-class> org.python.util.PyServlet </servlet-class> <init-param> <param-name>python.home</param-name> <param-value>C:\jython2.2.1</param-value> </init-param> <init-param> <param-name>python.path</param-name> <param-value>C:\jython2.2.1\Lib</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>PyServlet</servlet-name> <url-pattern>*.py</url-pattern> </servlet-mapping> </web-app>

开始体验

执行 %TOMCAT%\bin\startup.bat 启动 Tomcat 服务器。当看到“Server startup in ??? ms”后证明服务器启动成功。见图 6。

图 6 Tomcat 服务器启动成功的命令行提示

打开浏览器，输入地址 :8080/jythonAjax/register.jsp 后，回车打开页面。见图 7

图 7 注册首页

输入用户名 neoremind。页面不刷新，而是在文本框下方提示“该用户名已经存在（Username has existed, please choose another one.）”。见图 8。

图 8 输入已存在用户名后，页面提示错误

重新输入用户名 neoremind123。页面不刷新，而是在文本框下方提示“该用户名合法（Valid username. OK!）”。见图 9。

图 9 输入不存在用户名后，页面提示用户名合法

增强的用户体验—— loading 提示性的动态图标

实际应用中，由于各种网络环境的关系，客户端和服务器端之间相互可能会存在比较大的延时，用户不清楚浏览器在检验用户名是否合法，为了实现更加友好的用户体验，如果提供一个动态滚动的图片会使用户知道现在正在检查用户名是否合法。要实现这样的功能并不复杂，只需要修改前端页面即可。

步骤一，修改 register.jsp 的 stateChanged() 函数。见清单 6。

清单 6 stateChanged() 函数修改版

// 处理服务器响应的状态信息改变的回调函数 function stateChanged() { // 当服务器请求已完成（可以访问服务器响应并使用它） if (xmlHttp.readyState==4) { // 显示返回的提示信息 document.getElementById("txtHint").innerHTML=xmlHttp.responseText; // 阻塞正在加载缓冲 gif 图片的显示，隐藏它 document.getElementById('loading').style.display="none"; } // 当服务器请求未完成 else { // 提示信息为空 document.getElementById("txtHint").innerHTML="" // 显示正在加载缓冲的 gif 图片 document.getElementById('loading').style.display="block"; } }

步骤二，修改 register.jsp，多加入一个 DIV 用以显示“正在加载（loading）”图标。见清单 7。

清单 7 register.jsp 的 <body> 修改版