jQuery ajax 流程全解析

实例解析java + jQuery + json工作过程(登录)

本文主要讲解在java环境下使用jQuery进行JSON数据传送的交互过程

参考根据作者的账务管理系统(个人版) 源码下载 讲解

一、相关技术、工具简介

1、简单介绍一下JSON，JSON是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。已键值对形式表示数据，和java中的Map的数据存储形式相似，具体细节请参考http://www.json.org/json-zh.html。

2、对应后台JSON的数据处理工具json-lib，包含各种格式数据的工具类，比如：JavaBean、数组、集合(Collection)等，参考API文档。

3、jQuery框架中的数据表现形式，如果你熟悉jQuery的话就会发现jQuery的使用的数据传输都是JSON格式，比如我们经常使用的$.ajax方法：

Js代码  

1. $.ajax({
2. url : url,
3. data : {
4. id : chkValue
5. },
6. cache : false,
7. dataType : "json",
8. success : function(result){
9. alert(result);
10. }
11. );

其中 {…} 表示的就是JSON格式的数据

二、前台工作方式
为了能够容易理解以系统登录讲解，最后会以一个实例的方式讲解
1、登录页面
代码请参见 http://code.google.com/p/finance-p/source/browse/trunk/login.jsp

Java代码  

1. 用户名：
2. <input id="loginName" name="loginName" size="20" type="text" />
3. 密码：
4. <input id="password" name="password" size="20" type="password" />

2、登录javascript文件 login.js

Js代码  

1. /**
2. * 设置表单验证规则
3. */
4. function regFormValidator() {
5. $.formValidator.initConfig({formid:"loginForm"});
6. $("#loginName").formValidator({
7. onshow : "请输入用户名",
8. onfocus : "用户名至少2个字,最多4个字"
9. }).inputValidator({
10. min : 1,
11. onerror : "你输入的用户名非法,请确认"
12. });
13. $("#password").formValidator({
14. onshow : "请输入密码"
15. }).inputValidator({
16. min : 6,
17. onerror : "密码在6位以上，请确认"
18. });
19. }
20. $(function() {
21. // 注册表单验证插件
22. regFormValidator();
23. $('#submit').click(function(){
24. // 验证输入的用户名、密码是否正确
25. var valid = jQuery.formValidator.pageIsValid('1');
26. if (valid) {
27. $(this).attr('value', '正在登录……').attr('disabled', true);
28. } else {
29. return;
30. }
31. // 发送请求
32. $.ajax({
33. url : 'login.do',
34. data    : { loginName:$('#loginName').val(), password: $('#password').val() },
35. success : function(result){
36. // 根据result返回信息判断是否登录成功
37. if(result &amp;&amp; result == 'success') {
38. window.location.href = 'index.jsp';
39. } else {
40. alert('登录失败，用户名或密码错误，请重试！');
41. }
42. }
43. });
44. });
45. });

这样当点击“登录”按钮的时候触发ajax请求：

1. 验证表单完整性
2. 发送ajax请求到后台，值通过data键已JSON格式传送至后台
3. 如果后台返回的result为success时表示登录成功，页面跳转至首页index.jsp

三、后台工作方式

后台要比前台操作复杂一些，以为涉及到数据库、编码或者一些业务逻辑

1、获得请求参数

有两种方式：

• 通过request.getParameter(”key”)的方式
• 通过json-lib工具包获取

这我们主要讲解怎么通过json-lib获取参数

首先我们来写一个公共的方法，可以返回一个net.sf.json.JSONObject对象，具体代码如下：

Java代码  

1. /**
2. * 读取请求参数转换JSONObject对象
3. *
4. * @param request HttpServletRequest 对象
5. * @return json格式的String对象
6. * @throws Exception
7. */
8. @SuppressWarnings("unchecked")
9. protected JSONObject readJson(HttpServletRequest request) throws Exception {
10. JSONObject jsonObject = new JSONObject();
11. try {
12. Map parameterMap = request.getParameterMap();
13. // 通过循环遍历的方式获得key和value并set到JSONObject中
14. Iterator paIter = parameterMap.keySet().iterator();
15. while (paIter.hasNext()) {
16. String key = paIter.next().toString();
17. String[] values = (String[])parameterMap.get(key);
18. jsonObject.accumulate(key, values[0]);
19. }
20. log.debug("从客户端获得json=" + jsonObject.toString());
21. } catch (Exception e) {
22. log.error("获取json数据出错，错误信息如下：nt" + e.getMessage());
23. e.printStackTrace();
24. throw e;
25. }
26. return jsonObject;
27. }

通过这个方法我们可以获得一个JSONObject对象，然后就可以通过key获得对应的value；

2、登录处理Action

Java代码  

1. public ActionForward login(ActionMapping mapping, ActionForm actionForm,
2. HttpServletRequest request,HttpServletResponse response) throws Exception {
3. JSONObject jsonObject = readJson(request);
4. String name = jsonObject.getString("loginName");
5. String pass = jsonObject.getString("password");
6. try {
7. int loginFlag = userManager.validLogin(name, pass);
8. if (loginFlag == UserManager.LOGIN_SUCCESS) {
9. User user = userManager.getUserByNameAndPass(name, pass);
10. UserUtil.saveUser2Session(user, request);
11. log.info("用户&lt;" + user.getUserName()
12. + ",ip=" + request.getRemoteAddr() + "&gt;登录系统");
13. print(response, RESBONSE_SUCCESS);
14. } else if (loginFlag == UserManager.LOGIN_FAIL) {
15. print(response, RESBONSE_ERROR);
16. }
17. } catch (Exception e) {
18. e.printStackTrace();
19. }
20. return null;
21. }

解释：

在34行我们通过刚刚准备好的readJson方法获得一个JSONObject对象，接下来通过key获得用户名和密码，接下来就是业务逻辑的验证工作了，通过后我们向前台返回请求结果。
我们还需要一个小方法向前台写结果，如上面44、46行

Java代码  

1. protected void print(HttpServletResponse response, String info) throws IOException {
2. try {
3. response.getWriter().print(info);
4. } catch (IOException e) {
5. e.printStackTrace();
6. throw e;
7. }
8. }

/**
* 输出字符流
* 
* @param reps
* 输出的参数对象
* @param str
* 输出的内容
*/
public static void outPutStream(HttpServletResponse reps, String str) throws IOException
{
// getResponse().setCharacterEncoding("UTF-8");
// getResponse().setContentType("text/html;charset=UTF-8");
reps.getOutputStream().write(str.toString().getBytes("UTF-8"));
}

outPutStream(response, "{\"code\":\"-12\",\"msg\":\"用户无效，请重新登录！\"}");

这里有一点要说明，在获得输出流的时候有个小插曲，我在开发的时候使用的tomcat5.5.26版本，
当时的写法为：

Java代码  

1. response.getOutputStream().print(info);

Java代码  

1. 后来源码开源后一个网友使用的tomcat6版本，说系统不能正常运行，后来他查到了原因，因为获得输出流时出了问题，
2. 改成getWriter就没有问题了，集体也没有搞清楚为什么会是这样……

基于java开发时会使用struts，struts需要返回一个ActionMapping对象，但是在ajax请求不需要返回特定页面，因为根本没有跳转页面的动作，解决办法很简单，直接return null就可以了

输出结果后jQuery的ajax的success方法就接收到了请求结果，然后就可以根据结果处理业务逻辑了O(∩_∩)O~