云南大学学报（自然科学版），2011，33（S2）：247 250CN53－1045/N ISSN0258－7971 Journal of Yunnan University http：//www．yndxxb．ynu．edu．cn
JQuery Ajax异步处理JSON数据在项目管理系统中的应用
李志秀，张军，陈光，杨丽红
（云南省计算机软件技术开发研究中心云南昆明650051）
摘要：主要讨论前台页面通过javascript调用服务端方法访问数据，实现页面达到无刷新的数据管理．前台页面通过Ajax向后台的Action发出Post请求，后台Action返回Json格式的数据给请求页面，请求页面利用
JQuery处理返回的Json格式的数据，并呈现给用户．通过这种方式能够高效的实现页面对后台数据的无刷新
访问，并且能将开发过程中的表现层和数据处理层很好的分离．
关键词：JQuery；Ajax；Json；异步处理；项目管理系统
中图分类号：TP311．52文献标识码：A文章编号：0258－7971（2011）S2－0247－04
本文所基于的电子政务系统是一个省级的项目申报及审批系统，由于用户分布广、用户数有一定规模、用户计算机水平参差不齐，要求所开发的系统简便、易操作、容易部署，所以采用Web开发方式，用户只需通过浏览器访问即可，数据处理都在服务器端完成．本系统采用Struts2+JQery+Ajax开发模式，既能够保证系统的高效率访问，又能保证系统的安全性．
JQuery是目前使用最广泛的javascript函数库．据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库．微软公司甚至把jQuery作为他们的官方库．
AJAX为Asynchronous JavaScript XML（异步的JavaScript与XML技术）的缩写，是一种广泛应用在浏览器的网页开发技术．使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据．这使得Web 应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息．
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式．易于人阅读和编写．同时也易于机器解析和生成．它基于JavaScript Programming Language，Standard ECMA－2623rd Edition－December1999的一个子集．JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C，C++，C#，Java，JavaScript，Perl，Python等）．这些特性使JSON成为理想的数据交换语言．JSON不仅减少了解析XML解析带来的性能问题和兼容性问题，而且对于javascript来说非常容易使用，可以方便的通过遍历数组以及访问对象属性来获取数据，其可读性也不错，基本具备了结构化数据的性质．不得不说是一个很好的办法，而且事实上google maps就没有采用XML传递数据，而是采用了JSON方案．
1JQuery Ajax异步处理Json数据的实现原理
通过引言部分的介绍，使我们充分认识到使用JQuery+Ajax异步处理Json数据这种技术实现方式的必要性和先进性，下面将针对该技术的实现原理进行阐述．
用户交互页面用于提交ajax请求，这里使用了JQuery的$．getJSON（url，params，function callback（da-ta））函数提交ajax请求到指定url，并且携带参数params，最后用一个回调函数callback处理请求返回结果data．
*收稿日期：2011－09－21
作者简介：李志秀（1979－），女，云南人，工程师，主要从事软件开发工作．
842云南大学学报（自然科学版）第33卷
处理请求的Action类，用于处理页面提交的请求，并可以继续向数据处理层提出数据处理的请求．实现方式是通过在struts．xml文件中做相应配置：写一个action类处理ajax请求数据，并将返回结果封装成一个JSONObject对象返回给请求页面．同时在struts．xml中配置对应action，指明其返回类型为json并使其package的extends为json－default，并将要返回请求页面的数据放在名为root的param中，如〈param name=“root”〉result〈/param〉．
接受请求返回结果并对返回的Json数据进行处理的回调函数：使用JS的eval方法将返回结果data 转换成JSON对象，请求的url通过后台处理返回数据到页面，返回数据的处理就在一开始准备的回调函数callback中处理，并返回结果．
JQuery Ajax发送请求并使用回调函数处理返回数据的访问格式如下所示：
$．ajax（｛
type："POST/GET"，//发送方式
url：""，//请求的url
dataType：“json”，//返回接受的数据格式
data：，//要传递的数据Json格式
success：function（data）｛//回调函数，返回的为Json格式的数据
$（data）．each（function（i）｛alert（data［i］．name）；｝）；｝
｝）；
$．each（）方法接受2个参数，第1个是需要遍历的对象集合（JSON对象集合），第2个是用来遍历的方法，这个方法又接受2个参数，第1个是遍历的index，第2个是当前遍历的值．有了$．each（）方法JSON的解析就迎刃而解．
2JQuery Ajax异步处理Json数据设计和实现方法
以上基本原理都介绍之后，可以开始介绍如何实现．建一个WEB工程，把相关的包加入到工程．我们需要做的事分为以下3步：
首先，准备一个JSP页面用于提交ajax请求，这里使用了JQuery的$．getJSON（url，params，function callback（data））函数提交ajax请求到指定url，并且携带参数params，最后用一个回调函数callback处理请求返回结果data．
其次，一个处理请求的Action类，并在struts．xml文件中做相应配置：写一个action类处理ajax请求数据，并将返回结果封装成一个JSONObject对象返回给请求页面．同时在struts．xml中配置对应action，指明其返回类型为json并使其package的extends为json－default，并将要返回请求页面的数据放在名为root的param中，如〈param name=“root”〉result〈/param〉．
最后，接受请求返回结果：使用JS的eval方法将返回结果data转换成JSON对象，请求的url通过后台处理返回数据到页面，返回数据的处理就在一开始准备的回调函数callback中处理，并返回结果．通过以上基本概念的介绍，现将该政务系统的设计和实现方法介绍如下：
（1）前台页面前台页面利用JQuery，Ajax通过Post方式向Action发出请求．
/*获取列表数据*/
function load（currentPage）｛
$（“#load”）．show（）；
$（“［@id=ready］”）．remove（）；
$．ajax（｛url：‘expert_listExpert．action’，
type：‘post’，//访问Action通过Post方式请求
dataType ：“json ”，//返回json 格式的数据
data ：｛‘name ’：$（“#name ”）．val （），
‘company ’：$（“#company ”）．val （），
‘currentPage ’：currentPage ｝，//data 为请求所带的参数
complete ：function （）｛$（“#load ”）．hide （）；｝
（2）Action 中处理页面发送的请求，并返回Json 格式数据返回结果
Action 中通过HttpResponse 的方式获得请求，并处理请求的数据，将处理的结果数据以Json 格式用Response 输出流的方式返回给请求页面，请求页面解析Json 数据之后呈现给用户．
/＊＊@Description 获取所有专家信息直接输出*/
public void doListExpert （）throws Exception ｛
HttpServletResponse response =ServletActionContext．getResponse （）；
response．setContentType （“text /html ；charset =utf －8”）；
PrintWriter out =response．getWriter （）；
try ｛
String jsonList =expertManager．FindExpertByYu （PageSize ，Integer．parseInt （currentPage ），
name ，company ，nowProfessional ）；
out．print （jsonList ）；
out．flush （）；
out．close （）；
｝catch （Exception e ）｛
e．printStackTrace （）；｝
｝（3）系统中实现的效果应用以上所介绍的数据处理方法，实现对信息系统数据的新增、修改、删除操作，并能达到页面无刷新的效果，具体实现如图1所示．
图1系统截图
Fig．1Software screenshots
3结论
本文讨论了通过JQuery Ajax 异步处理Json 数据达到Web 页面无刷新的实现数据管理及访问，本文
9
42第S2期李志秀等：JQuery Ajax 异步处理JSON 数据在项目管理系统中的应用
052云南大学学报（自然科学版）第33卷
中讨论的实现方法是基于Struts2+Spring+Action的开发模式，该方法并不仅仅限于此种开发模式，只要是基于Web的开发模式都可以借鉴此处理模式；其中使用的Json数据传输格式，此种数据格式解析非常简单，但是在通用性上稍有欠缺，在以后的项目开发过程中可以尝试使用更为通用的数据传输格式．
参考文献：
［1］Jonathan Chaffer，Karl Swedberg．JQuery基础教程［M］．李松峰，李伟，译．北京：人民邮电出版社，2008．
［2］Nicholas C Zakas．JavaScript高级程序设计［M］．曹力，张欣，译．北京：人民邮电出版社，2006
［3］李刚．Struts2权威指南［M］．北京：电子工业出版社，2009．
［4］Nicholas C Zakas，Jeremy MePeak，Joe Faweett．Ajax高级程序设计［M］．徐峰，吴兰陡，译．北京：人民邮电出版社，2006．
Aasynchronous processing JSON data by JQuery Ajax technology
in the application of project management system
LI Zhi-xiu，ZHANG Jun，CHEN Guang，YANG Li-hong
（Yunnan Provincial Software Center，Kunming650051，China）
Abstract：This article focuses on the front page accessing data through a javascript calling backstage method without refreshing the page．The front page of Action through Ajax Post issued a request to return back action Json format data to the requested page，and then the requested page using JQuery Json format to process the returned data，and presented to the user．This approach can efficiently achieve the page without refreshing the background data access，and is capable of presentation layer development process and data processing layers well separated．Key words：JQuery；Ajax；Json；asynchronous；project management system
JSON 数据格式解析 和 XML 一样，JSON 也是基于纯文本的数据格式。由于 JSON 天生是为JavaScript 准备的，因此，JSON 的数据格式非常简单，您可以用 JSON 传输一个简单的 String，Number，Boolean，也可以传输一个数组，或者一个复杂的Object 对象。 String，Number 和 Boolean 用 JSON 表示非常简单。例如，用 JSON 表示一个简单的 String “ abc ”，其格式为： "abc" 除了字符 "，\，/ 和一些控制符（\b，\f，\n，\r，\t）需要编码外，其他 Unicode 字符可以直接输出。下图是一个 String 的完整表示结构： 图 1. String 的完整表示结构 一个 Number 可以根据整型或浮点数表示如下：
图 2. Number 的表示结构 这与绝大多数编程语言的表示方法一致，例如： 12345（整数） -3.9e10（浮点数） Boolean 类型表示为 true 或 false 。此外，JavaScript 中的 null 被表示为 null，注意，true、false 和 null 都没有双引号，否则将被视为一个String 。 JSON 还可以表示一个数组对象，使用 [] 包含所有元素，每个元素用逗号分隔，元素可以是任意的 Value，例如，以下数组包含了一个 String，Number，Boolean 和一个 null： Object 对象在 JSON 中是用 {} 包含一系列无序的 Key-Value 键值对表示的，实际上此处的 Object 相当于 Java 中的 Map
后台转换JSON数据类型，前台解析JSON数据等等例子总结 JSON对象： JSONObject obj = new JSONObject(); obj.put("result", 0); obj.put("message", message); return obj.toJSONString(); 前台解析： Success:function(data){ var result = data.result; var message = data.message; } json对象中有json对象的写法: Objstr为一个JSONObject obj的String转换 private String getsuccess(String objstr,int number){ JSONObject obj = new JSONObject(); obj.put("result", 1); obj.put("obj", objstr); obj.put("number", number); return obj.toJSONString(); }
前台解析： Picjson为success返回的data var result = picjson.result; if (result==1) { var objdata = picjson.obj; var data = eval('(' + objdata + ')'); var num = picjson.number; picurl = null; showpiclist(data, num); } else{ alert(picjson.message); picurl = null; } list转成json对象 需要的包： https://www.doczj.com/doc/221960745.html,mons-lang.jar https://www.doczj.com/doc/221960745.html,mons-beanutils.jar https://www.doczj.com/doc/221960745.html,mons-collections.jar https://www.doczj.com/doc/221960745.html,mons-logging.jar
JSON 语法是JavaScript 语法的子集。 JSON 语法规则 JSON 语法是JavaScript 对象表示法语法的子集。 ?数据在名称/值对中 ?数据由逗号分隔 ?花括号保存对象 ?方括号保存数组 JSON 名称/值对 JSON 数据的书写格式是：名称/值对。 名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值： 这很容易理解，等价于这条JavaScript 语句： JSON 值 JSON 值可以是： ?数字（整数或浮点数） ?字符串（在双引号中） ?逻辑值（true 或false） ?数组（在方括号中） ?对象（在花括号中） ?null JSON 对象 JSON 对象在花括号中书写： 对象可以包含多个名称/值对： 这一点也容易理解，与这条JavaScript 语句等价：
JSON 数组 JSON 数组在方括号中书写： 数组可包含多个对象： 在上面的例子中，对象"employees" 是包含三个对象的数组。每个对象代表一条关于某人（有姓和名）的记录。 JSON 使用JavaScript 语法 因为JSON 使用JavaScript 语法，所以无需额外的软件就能处理JavaScript 中的JSON。 通过JavaScript，您可以创建一个对象数组，并像这样进行赋值： 例子 可以像这样访问JavaScript 对象数组中的第一项： 返回的内容是：
可以像这样修改数据： JSON 实例- 来自字符串的对象 创建包含JSON 语法的JavaScript 字符串： 由于JSON 语法是JavaScript 语法的子集，JavaScript 函数eval() 可用于将JSON 文本转换为JavaScript 对象。 eval() 函数使用的是JavaScript 编译器，可解析JSON 文本，然后生成JavaScript 对象。必须把文本包围在括号中，这样才能避免语法错误： 在网页中使用JavaScript 对象： 例子