基于jQuery的AJAX应用研究

摘 要：在目前的Web2.0热潮中,AJAX正吸引着全世界的眼球,成为人们谈论最多的技术术语。AJAX技术很大程度改善了WEB应用的用户体验，jQuery的创建和使用大大简化了AJAX的开发。本文首先对AJAX技术与传统Web开发进行了对比分析，阐述AJAX技术异步交互的优势，其次，通过一个实例，在具体应用中体现jQuery的特点，最后，总结全文论述以及展望。
关键词：jQuery；AJAX；异步交互；XMLHttpRequest
中图分类号：TP312
1. 引 言
目前，网络正处于Web2.0[1]时代，在这个时代出现了大量的相关技术，Ajax就是其中具有代表性之一。AJAX正吸引着全世界的眼球,成为人们谈论最多的技术术语，大量学者开始研究或是正在研究AJAX技术。
如果开发者使用单纯的Javascript方式进行Ajax开发的话，就会使得应用程序非常难以进行调试，从而降低了生产效率，并且大量的Javascript代码使得程序复杂化，处理时间相对增加，影响用户体验。但是，Ajax技术已经催生出了大量的基于其本身技术的JavaScript库。JavaScript库的使用有助于最大程度地减少使用JavaScript和Ajax带来的许多常见问题。jQuery[3]就是其中非常优秀的一个简洁快速的JavaScript库。很多学者把其称作Ajax框架，但笔者认为它还没有达到框架的级别。jQuery封装了B/S开发过程中的大量技术细节，使开发人员能够更专注于动作业务逻辑的开发和用户界面流程的开发。本文实现一个实例，通过实例分析，在具体应用中体现jQuery的特点。
2. AJAX简介
2.1 AJAX是什么
    AJAX（ Asynchronous JavaScript And XML）翻译成中文是指异步的JavaScript和XML技术。其实AJAX不是一种单独的技术或是一门计算机语言，它是多种成型技术的综合，它包括以下五方面内容：（1）使用XHTML和CSS的基于标准的表示技术。（2）使用DOM进行动态显示和交互。（３）使用XML和XSLT进行数据交换和处理。（４）使用XMLHttpRequest进行异步数据检索。（5）使用JavaScript将以上技术融合在一起。笔者认为Ajax技术的核心是JavaScript对象XMLHttpRequest[3]，该对象是一种异步发送请求的技术， AJAX技术使用异步HTTP请求，在Browser和Web server之间传送数据，使Browser只更新部分页面內容而不用重新載入整个新的页面。异步交互和不用转入新的页面视图也是Ajax大大改善用户体验的地方。
2.2 AJAX效果与传统WEB开发的优势
传统的Web应用允许用户填写表单，当提交表单时就向Web服务器发送一个请求。服务器接收并处理传来的表单，然后返回一个新的网页。这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。Ajax应用与此不同，Ajax应用可以仅向服务器发送并取回必需的数据，并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。

图2-1传统WEB交互方式

图2-2AJAX技术交互方式
如图2-1和图2-2对比所示，Ajax引擎代表用户与服务器进行通信，并更新用户所看到的界面。整个交互过程是在后台异步进行的，并不打断用户当前的操作。另外，由于Ajax只与服务器端进行数据层面的交换，而一些页面显示、校验数据等功能则交给Ajax引擎自己来做。Ajax将一些服务器端的工作转移到客户端，充分利用了客户端闲置的处理能力，从而减轻了服务器的负担，加快了浏览器的响应速度，缩短了用户等待时间[4]。
3. jQuery简介
3.1 jQuery是什么
jQuery 由 John Resig 创建于 2006 年初，对于任何使用 JavaScript 代码的程序员来说，它是一个非常有用的 JavaScript 库。无论是刚刚接触 JavaScript 语言，并且希望获得一个能解决文档对象模型（Document Object Model，DOM）脚本和 Ajax 开发中一些复杂问题的库，还是作为一个厌倦了 DOM 脚本和 Ajax 开发中无聊的重复工作的资深 JavaScript 专家，jQuery 都会是首选。它能在网页上简单的操作文档、处理事件、运行动画效果或者添加Ajax交互[5]。
3.2 jQuery能做什么
jQuery的宗旨是WRITE LESS,DO MORE,写更少的代码,做更多的事情。jQuery库为WEB脚本编程提供了通用的抽象层，使得它几乎适用于所有脚本编程的情况，仅就其核心特性而言，jQuery能够满足一下需求：（1）取得页面中的元素。（2）修改页面的外观。（3）改变页面内容。（4）响应用户的页面操作。（5）为页面添加动态效果。（7）无需刷新即可从服务器端取得数据。（8）简化常见的JavaScript任务。这些策略不仅确保了jQuery包的小型化——压缩之后约为20KB，同时，也为我们使用这个库的自定义代码保证简介提供了技术保障[6]。
下面是一个简单示例，它说明了 jQuery 对代码的影响。要执行一些真正简单和常见的任务，比方说为页面的某一区域中的每个链接附加一个单击（click）事件，您可以使用纯 JavaScript 代码和 DOM 脚本来实现，代码如下：
var external_links = document.getElementById('external_links');
var links = external_links.getElementsByTagName('a');
for (var i=0;i < links.length;i++) {
    var link = links.item(i);
    link.onclick = function() {
        return confirm('You are going to visit: ' + this.href);
    };
}
以下代码显示了使用 jQuery 实现的相同的功能。
$('#external_links a').click(function() {
    return confirm('You are going to visit: ' + this.href);
});
使用 jQuery，可以把握问题的要点，只让代码实现我们想要的功能，而省去了一些繁琐的过程。无需对元素进行循环，click() 函数将完成这些操作。同样也不需要进行多个 DOM 脚本调用。我们只需要使用一个简短的字符串对所需的元素进行定义即可。我们使用了 $() 函数 —— jQuery 中功能最强大的函数。通常，我们都是使用这个函数从文档中选择元素。在本例中，一个包含有一些层叠样式表（Cascading Style Sheet，CSS）语法的字符串被传递给函数，然后 jQuery 尽可能高效地把这些元素找出来。#external_links 用于检索 id 为 external_links 的元素。空格后的a表示 jQuery 需要检索 external_links 元素中的所有 <a> 元素。$() 函数返回一个含有所有与 CSS 选择器匹配的元素的 jQuery 对象。jQuery 对象 类似于数组，但是它附带有大量特殊的 jQuery 函数。本例只是简要介绍一下jQuery的操作，更多详细关于jQuery的函数操作可以查看jQuery的API，在jQuery官网和各大jQuery社区都可以下载得到jQuery的API。
jQuery的适用性一方面归因于其设计理念，另一方面则得益于围绕这个开源项目涌现的活跃社区的作用。jQuery除了为工程师工程师提供提供了灵活而稳定的系统之外，jQuery的最终产品对所有人都免费。
4. jQuery对AJAX的实现
4.1 使用jQuery开发过程
在进行基于jQuery的AJAX开发前，我们必须准备好开发环境和jquery.js这个JavaScript库文件。本实例使用的开发环境是IntelliJ[7] IDEA 7.0.3，使用IntelliJ的原因是Intellij IDEA是一款综合的Java 编程环境，它对JavaScript的支持可以说是所有IDEA中最好的，它强大的代码辅助功能对编写JavaScript能力薄弱的或是很恐惧JavaScript代码的人是最好不过的选择。另外，jQuery的最新版本是v.1.3.2版本，可以从jQuery的官方网站（http://jquery.com/）下载得到一个jquery.js的js文件这个文件就是我们开发中要使用的js文件。在开发时只要把这个jquery.js放在一个公共的位置，在相应的页面导入之即可。
本例是一个简单的校验用户名是否存在的例子，本例的jQuery应用主要包括4个部分：Html文档，为该页面添加行为的JavaScript文件，另外是web.xml配置文件和用Java语言编写的简单的后台操作，这个后台操作只是最基本的后台操作，并不包含很复杂的方法，我们主要是把精力放在jQuery的实现上，但根据需要我们可以对后台业务进行扩展。代码部分包含了一下注释信息，这些注释信息很好的解释了几乎每句代码操作的作用。
首先，打开IntelliJ，新建一个Project（IntelliJ中的Project相当于Eclips中的WorkSpace,即工作空间），其次新建一个Module，即一个项目，然后在这个Module下的web目录下新建一个Html文档,名称为jquery.html，代码如下所示：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
  <title>校验用户名是否存在</title>
<!—此处要注意引入jQuery库文件的<script>标签必须放在引入自定义脚本文件的<script>标签之前-->
<script type="text/javascript" src="jslib/jquery.js"></script>
  <script type="text/javascript" src="jslib/verify.js"></script>
</head>
<body>
       用户名校验的jQuery实例，请输入用户名: <br/>
    <!--ajax方式下不需要使用表单来进行数据提交，因此不用写表单标签-->
    <!--ajax方式不需要name属性，需要一个id属性-->
    <input type="text" id="userName" />
    <input type="button" value="校验" onclick="verify()">
    <!-- div用于存放服务器端返回的信息，开始为空，div 是CSS中的块级元-->
    <!--id属性定义是为了找到这个节点，进行操作-->
<!—此div是为了接受并显示服务器端传回的数据-->
        <div id="result"></div>
</body>
</html>
然后在这个Module下的web目录下新建一个jslib文件夹，这个jslib文件夹用于存放js文件，在这个jslib目录下新建一个jquery.js，打开这个空的js文件，把事先下载好的jquery.js打开，把里面的代码拷贝到在jslib目录下的jquery.js文件中，这样做的主要原因是IntelliJ不支持在工程下面直接拷贝文件。然后再在jslib目录下新建一个verify.js，verify.js代码如下所示：
function verify(){
    var url=" JqueryServer?name="+ $("#userName").val();
    url= converURL(url);
    $.get(url,null,function(data){
        $("#result").html(data);
    });
}
//给url地址增加时间戳，骗过浏览器，不读取缓存
function converURL(url){
    //获取时间戳
    var timstamp = new Date().valueOf();
    //将时间戳品拼接到url上
    //url=" JqueryServer "
    if(url.indexOf("?")>=0){
        url=url + "&t=" + timstamp;
    }else{
        url=url + "?t=" + timstamp;
    }
    return url;
}
然后在这个Module下的src目录下新建一个JqueryServer.java文件，这个文件就是简单的后台操作。代码如下所示：
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLEncoder;
import java.net.URLDecoder;
public class JqueryServer extends HttpServlet{
    protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
         try{
             httpServletResponse.setContentType("text/html;charset=utf-8");
             PrintWriter out = httpServletResponse.getWriter();
             //此处加入操作Session的代码主要是为了说明如何解决浏览器缓存问题
//在verify.js中利用时间戳，骗过浏览器，不读取缓存。
             Integer inte=(Integer)httpServletRequest.getSession().getAttribute("total");
             int temp=0;
        if(inte==null){
           temp=1;
           httpServletRequest.getSession().setAttribute("total",temp);
        }else{
            temp=inte.intValue()+1;
           httpServletRequest.getSession().setAttribute("total",temp);
        }
              //1.取得页面端送过来的参数信息
               String old = httpServletRequest.getParameter("name");
               //2.检查传过来的参数是否有问题
                if(old==null||old.length()==0){
                    out.println("用户名不能为空！");
                }else{
                //3.进行校验操作
                //此处可以根据情况进行扩展，比如编写复杂的业务层，从数据库中//读取数据。
                    String name = old;
                    if(name.equals("qq")){
                //4.和传统方式的不同之处：把用户感兴趣的数据（data）返回去，而//不是重新转向一个新视图层。与传统写法一样但是但是实质不一样
                    out.println("用户名"+name+"已经存在，请换个用户名"+temp);
                    }else
                    {
                        out.println("用户名["+name+"]不存在,可以注册！"+temp);
                    }
                }
         }catch(Exception e)
    {
        e.printStackTrace();
    }
    }

    protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
              doGet(httpServletRequest, httpServletResponse);
       }
}
之后就要配置刚刚编写的这个Servlet，在WEB-INF目录下的web.xml配置文件进行配置，代码如下：
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
  http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
           version="2.5">
<servlet>
<servlet-name> JqueryServer </servlet-name>
    <servlet-class> JqueryServer </servlet-class>
</servlet>
    <servlet-mapping>
        <servlet-name> JqueryServer </servlet-name>
        <url-pattern>/ JqueryServer </url-pattern>
    </servlet-mapping>
</web-app>
这些都完成之后，就可把这个简单的应用部署在服务器上了，本实例的服务器是Tomcat6.0，在浏览器地址栏中输入http://localhost:8080/jquery.html即可。
4.2解决jQuery中文乱码和浏览器缓存问题
以上这个实例有一个缺陷是中文乱码问题，接下来主要介绍两种解决中文乱码的方案。其一：在verify.js中发出的数据做一次encodeURI操作,代码修改部分为：
var url="AJAXServer?name="+encodeURI($("#userName").val());
另外在服务器端的JqueryServer.java中也要做修改，即在取得数据后，加入这样一句代码String name =new String(old.getBytes("iso8859-1"),"UTF-8");然后把下面的一句代码：String name = old;删除即可。
其二：在verify.js中发出的数据做两次encodeURI操作,代码修改部分为：
var url="AJAXServer?name="+encodeURI(encodeURI($("#userName").val()));
另外在服务器端的JqueryServer.java中也要做修改，即在取得数据后，加入这样一句代码String name = URLDecoder.decode(old,"UTF-8");然后把下面的一句代码：String name = old;删除即可。
在这两种方法中笔者推荐使用第二种方法。
另外，在JqueryServer.java这个文件中做了相应的处理加入session目的是引入浏览器缓存问题，代码如下：
Integer inte=(Integer)httpServletRequest.getSession().getAttribute("total");
             int temp=0;
        if(inte==null){
           temp=1;
           httpServletRequest.getSession().setAttribute("total",temp);
        }else{
            temp=inte.intValue()+1;
           httpServletRequest.getSession().setAttribute("total",temp);
        }
在verify.js文件之中，利用时间戳骗过浏览器不读取缓存，主要做法是利用时间戳改变URL地址，代码如下：
//给url地址增加时间戳，骗过浏览器，不读取缓存
function converURL(url){
    //获取时间戳
    var timstamp = new Date().valueOf();
    //将时间戳品拼接到url上
    //url=" JqueryServer "
    if(url.indexOf("?")>=0){
        url=url + "&t=" + timstamp;
    }else{
        url=url + "?t=" + timstamp;
    }
    return url;
}
在调用$.get( )前，只需利用converURL ()函数把URL进行转换加上时间戳即可。代码如下：
url= converURL(url);
这样，我们就解决了jQuery中文乱码和浏览器缓存问题。这虽然是个简单的用例，但是，其中解决的jQuery中文乱码和浏览器缓存问题在实际应用之中具有很好的技巧。
5. 结论
本文主要对jQuery实现AJAX应用进行了研究，简要介绍了AJAX技术，分析和研究了AJAX框架技术的应用和其所能解决的实质问题。可以得到结论，Ajax框架通过异步数据请求、精细的UI效果正在改变着人们对Web应用系统的看法[8]。把AJAX技术与传统WEB应用进行了对比研究，说明了AJAX应用具有异步交互和增加用户体验等优点。针对jQuery在AJAX应用开发中的作用进行了分析，并实现一个完整实例，对这个实例进行了详细的解析，通过这个实例，利用时间戳解决了浏览器缓存问题，并且提出了两种方式解决jQuery的中文乱码问题，这两个问题的解决方法对实际应用开发具有很好的指导意义。
Ajax技术及其在J2EE Web中开发的研究与应用必将成为J2EE的主流，另外，jQuery已确认成为ASP.NET MVC和Visul Studio未来版本中的正式组成部份，诺基亚手机平台Web Run-Time也将纳入，有这样的发展环境，jQuery也一定会有更加广阔的发展空间。


参考文献
[1] Tim O'Reilly．Web2.0．http://www.enet.com.cn/article/2005/1122/A20051122474593.shtml， 2005-11-22．
[2] http://jquery.com，2009-11-19．
[3] Anne van Kesteren．W3C Working Draft．http://www.w3.org/TR/XMLHttpRequest/，2009-11-19．
[4] JESSE JAMES GARRETT．Ajax:A new approach to Web applications[EB/OL] ．
http://www.tejiawang.com/book_1_7333_0_0_0_0_6.html．
[5] Jesse Skinner．使用 jQuery 简化 Ajax 开发．
http://www.ibm.com/developerworks/cn/xml/x-ajaxjquery.html．
[6] Jonathan Chaffer，Karl Swedbeger．jQuery基础教程［M］.李松峰 李炜．北京：人民教育出版社，2008．
[7] http://baike.baidu.com/view/1654125.htm?fr=ala0_1．
[8] 张东华．Ajax框架在J2EE架构中的应用与研究［D］．青岛：中国海洋大学，2008．





The Research of AJAX application based on jQuery

Abstract
In the current boom of the Web2.0, AJAX is attracting the world's eyes, becoming the most talked-about technical terms by people of the word. AJAX has improved experience of the users in WEB application. The creation and use of jQuery has simplified the development of AJAX greatly. In this paper,first, the author have a compare and analysis between the AJAX and traditional development of the Web, and expound advantage of the asynchronous,second, show the characteristics of jQuery in the specific applications through an example,at last,have a summary on the paper ,then look into the future about AJAX and jQuery.
Keywords: jQuery,AJAX, Asynchronous,XMLHttpRequest