8.4 关于Ajax的经典框架——jQuery
在Java Web项目中为了方便用户实现Ajax技术的应用，经常会使用到Ajax的各种框架。Ajax框架出现的目标就是使烦琐的Ajax开发变得更加容易，让程序员不用重复地构造JavaScript的底层。本章将详细介绍关于Ajax的经典框架——jQuery的使用。
8.4.1 jQuery框架的下载和配置
JQuery框架由John Resig于2006年初创建，主要用来简化JavaScript和Ajax的编程。使用该框架可以非常方便地在网页上实现操作文档、处理事件、实现特效，并为Web页面添加Ajax方面的交互。
目前JQuery框架比较稳定的版本为1.6.2，具体的下载步骤如下：
01 首先访问下载JQuery组件的官方网站（http://jquery.com），如图8.16所示。
图8.16 JQuery组件首页
02 在Jquery首页中，首先选择“DEVELOPMENT”选项，然后单击“Download（jQuery）”链接就可以实现关于JQuery组件的下载，具体过程如图8.17所示。
图8.17 JQuery组件下载
至此，就完成了对JQuery组件的下载。由于该组件是一个javascript文件，所以在具体使用时，可以通过直接引入外部javascript文件的方式来调用该组件。
8.4.2 jQuery框架的简单使用
为了能够清楚地理解JQuery框架，本节将详细介绍实现用户名验证的功能。虽然通过Ajax技术也可以实现该功能，但是使用JQuery框架却可以更简单，具体步骤如下：
01 新建一个名Jqueryajax的Web Project，在目录Jqueryajax\WebRoot下创建一个名为javascript的文件夹用来存放该项目的JavaScript类型文件。
02 复制JQuery框架中的jquery.js文件到javascript文件夹中，完整项目的目录结构如图8.18所示。
图8.18 目录结构
03 在目录Jqueryajax\WebRoot下，首先创建一个名为ajax.html的页面，接着在Jqueryajax\Src目录下创建一个名为ajaxservlet的Servlet程序。
关于ajax.html页面的内容如下所示：
//＊＊＊＊＊＊＊ ajax.html ＊＊＊＊＊＊＊＊＊＊＊＊＊＊
＜head＞
＜title＞用户名校验＜/title＞
＜script type="text/javascript" src="javascript/jquery.js"＞＜/script＞
＜script type="text/javascript" src="javascript/verify.js"＞＜/script＞
＜/head＞
＜body＞
请输入用户名：
＜br /＞
＜input type="text" id="userName" /＞
＜input type="button" value="校验" onclick="verify()" /＞
＜div id="result"＞＜/div＞
＜/body＞
…
关于ajaxservlet程序的内容如下所示：
//＊＊＊＊＊＊＊ ajaxservlet.java ＊＊＊＊＊＊＊＊＊＊＊＊＊＊
public class ajaxservlet extends HttpServlet {
protected void doPost(HttpServletRequest httpServletRequest,
HttpServletResponse httpServletResponse) throws ServletException,
IOException {
doGet(httpServletRequest, httpServletResponse);
}
//编写doGet方法
protected void doGet(HttpServletRequest httpServletRequest,
HttpServletResponse httpServletResponse) throws ServletException,
IOException {
try {
//设置编码格式
httpServletResponse.setContentType("text/html;charset=utf-8");
PrintWriter out = httpServletResponse.getWriter();
//获取参数
String old = httpServletRequest.getParameter("name");
String name = URLDecoder.decode(old, "UTF-8");
if(old==null||old.length()==0){ //判断参数
out.println("用户名不能为空");
} else {
if (name.equals("cjgong")) {
out.println("用户名[" + name + "]已经存在，请使用其他用户名");
} else {
out.println("用户名[" + name + "]尚未存在，可以使用该用户名注册
");
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
}
接着在web.xml文件中配置Servlet程序，具体内容如下：
＜!--配置ajaxservlet类路径--＞
＜servlet＞
＜servlet-name＞ajaxservlet＜/servlet-name＞
＜servlet-class＞ajaxservlet＜/servlet-class＞
＜/servlet＞
＜!--配置ajaxservlet映射路径--＞
＜servlet-mapping＞
＜servlet-name＞ajaxservlet＜/servlet-name＞
＜url-pattern＞/ajaxservlet＜/url-pattern＞
＜/servlet-mapping＞
04 创建好客户端和服务器端程序后，接着就需要通过创建一个javascript文件来实现两者的相互交互，该javascript文件的具体内容如下：
//定义用户名校验的方法
function verify() {
var jqueryObj = $("#userName");
var userName = jqueryObj.val();
$.get("ajaxservlet?name=" + userName, null, callback);
}
//回调函数
function callback(data) {
var resultObj = $("#result");
resultObj.html(data);
}
代码说明：
● 由于上述代码需要使用JQuery框架的方法，所以必须要把JQuery框架中名为jquery.js的文件引入该项目。
● 在具体实现客户端与服务器端相互交互时，首先要获取客户端文本框中的内容。查看JQuery帮助文档可以发现，通过$()查找节点的方式可以实现该功能。在表达式$()中，参数必须为#加上id属性值，同时该表达式返回的是jquery的对象。接着通过jquery的对象的val()方法获取该节点的值。
● 获取客户端的内容后，就需要把该内容传送给服务器中的Servlet程序。通过使用JQuery框架中XMLHTTPrequest对象的get方法把请求封装后发送给服务器，即$.get()。在该方法中存在3个参数，其中第一个参数表示处理请求的url地址；第二个参数表示发送请求中的key/value值对，由于使用Get方法来发送请求，所以该值一般会直接写在url地址的后面，于是该值一般为null；第三个参数表示回调函数，注意这里只需要函数名称，没有括号。
● 当与服务器交互成功后，就需要调用回掉函数callback()。在该方法中首先通过参数data获取服务器返回的数据，然后再把该数据显示在客户端。在具体显示时，首先获取显示内容节点的jquery对象，然后通过该对象的html()方法在相应的节点上显示出参数的内容。
启动服务器。最后打开浏览器，在地址栏目中输入地址http://localhost:8080/Jqueryajax/ajax.html，出现如图8.19所示的页面。在该页面中如果填写“cjgong”字符串，单击“校验”按钮该页面就会变成如图8.20所示的内容。
图8.19 登录首页
图8.20 校验结果