jQuery ajax 流程全解析

標籤：blog   http   io   ar   os   使用   java   for   sp   

執行個體解析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. 密碼：  
5. <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.    
14.     $("#password").formValidator({  
15.         onshow : "請輸入密碼"  
16.     }).inputValidator({  
17.         min : 6,  
18.         onerror : "密碼在6位以上，請確認"  
19.     });  
20. }  
21.    
22. $(function() {  
23.     // 註冊表單驗證外掛程式  
24.     regFormValidator();  
25.    
26.     $(‘#submit‘).click(function(){  
27.         // 驗證輸入的使用者名稱、密碼是否正確  
28.         var valid = jQuery.formValidator.pageIsValid(‘1‘);  
29.         if (valid) {  
30.             $(this).attr(‘value‘, ‘正在登入……‘).attr(‘disabled‘, true);  
31.         } else {  
32.             return;  
33.         }  
34.    
35.         // 發送請求  
36.         $.ajax({  
37.             url : ‘login.do‘,  
38.             data    : { loginName:$(‘#loginName‘).val(), password: $(‘#password‘).val() },  
39.             success : function(result){  
40.                 // 根據result返回資訊判斷是否登入成功  
41.                 if(result &amp;&amp; result == ‘success‘) {  
42.                     window.location.href = ‘index.jsp‘;  
43.                 } else {  
44.                     alert(‘登入失敗，使用者名稱或密碼錯誤，請重試！‘);  
45.                 }  
46.             }  
47.         });  
48.    
49.     });  
50. });  

這樣當點擊“登入”按鈕的時候觸發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~

jQuery ajax 流程全解析