App Framework发送JSONP请求(3)

App Framework 中如何发送JSONP请求呢?

使用jsonp,详情请参考:http://json-p.org/

如何发送Ajax请求呢?

(1)登录

Js代码  

1. /*** 
2.  * 会员登录 
3.  * @param username 
4.  * @param password 
5.  */  
6. var user_login=function(username,password){  
7. //    alert(username+","+password);  
8.     if(isHasLogin())  
9.     {  
10.         alert("你已经登录过,无需再次登录");  
11.         return;  
12.     }  
13.     $.ui.showMask();  
14.     $.jsonP({url:'http://'+server_url+'/tv_mobile/user/login?callback=?&username='+username+"&password="+password,success:function(data){  
15.         var result=data.result;  
16.         $.ui.hideMask();  
17.         switch (result)  
18.         {  
19.             case 1:  
20.                 window.user={};  
21.                 window.sessionId=data.session;  
22.                 user.username=username;  
23.                 user.password=password;  
24.                 settings_before(document.getElementById("settings"));  
25.                 alert("登录成功");  
26.                 $.ui.goBack();  
27.                 break;  
28.             case 3:  
29.                 alert("用户名不能为空");  
30.                 break;  
31.             case 4:  
32.                 alert("密码不能为空");  
33.                 break;  
34.             case 5:  
35.                 alert("用户名或密码错误");  
36.                 break;  
37.             case 2:  
38.                 alert("用户名不存在");  
39.                 break;  
40.         }  
41.   
42.     }});  
43. }  

服务器代码: 

Java代码  

1. /*** 
2.      * 登录 
3.      * @param model 
4.      * @param status 
5.      * @param view 
6.      * @param session 
7.      * @param request 
8.      * @param callback 
9.      * @return 
10.      * @throws IOException 
11.      */  
12.     @ResponseBody  
13.     @RequestMapping(value = "/login", produces = SystemHWUtil.RESPONSE_CONTENTTYPE_JSON_UTF)  
14.     public String login(Model model, Integer status, UserView view,  
15.             HttpSession session, HttpServletRequest request, String callback)  
16.             throws IOException {  
17.         init(request);  
18.         String content = null;  
19.         UserDao userDao = (UserDao) getDao();  
20.         User user2 = null;  
21.         Map map = new HashMap();  
22.         int login_result = 0;  
23.         if (ValueWidget.isNullOrEmpty(view.getUsername())) {  
24.             login_result = Constant2.LOGIN_RESULT_USERNAME_EMPTY;//用户名不能为空  
25.         } else if (ValueWidget.isNullOrEmpty(view.getPassword())) {  
26.             login_result = Constant2.LOGIN_RESULT_PASSWORD_EMPTY;//密码不能为空  
27.         } else if (ValueWidget.isNullOrEmpty(user2 = userDao.getByUsername(view  
28.                 .getUsername()))) {  
29.             login_result = Constant2.LOGIN_RESULT_USERNAME_INVALID;//用户名不存在  
30.         } else if (!user2.getPassword().equals(view.getPassword())) {  
31.             login_result = Constant2.LOGIN_RESULT_FAILED;//登录失败(用户名和密码不匹配)  
32.         } else {  
33.             login_result = Constant2.LOGIN_RESULT_SUCCESS;  
34.             session.setAttribute("user", user2);  
35.             map.put("session", session.getId());// 下载session id到客户端  
36.             System.out.println("session id:" + session.getId());  
37.         }  
38.         // boolean isExist = userDao.isExist(view.getUsername(),  
39.         // view.getPassword());  
40.           
41.         map.put(Constant2.LOGIN_RESULT_KEY, login_result);  
42.           
43.         content = JSONPUtil.getJsonP(map, callback);  
44.         return content;  
45.     }  
46.   
47. /*** 
48.      * 用于jsonp调用 
49.      * @param map : 用于构造json数据 
50.      * @param callback : 回调的javascript方法名 
51.      * @return : js函数名(json字符串) 
52.      */  
53.     public static String getJsonP(Map map,String callback)  
54.     {  
55.         ObjectMapper mapper = new ObjectMapper();  
56.         String content = null;  
57.         try {  
58.             content = mapper.writeValueAsString(map);  
59.             System.out.println(content);  
60.         } catch (JsonGenerationException e) {  
61.             e.printStackTrace();  
62.         } catch (JsonMappingException e) {  
63.             e.printStackTrace();  
64.         } catch (IOException e) {  
65.             e.printStackTrace();  
66.         }  
67.         if(ValueWidget.isNullOrEmpty(callback)){  
68.             return content;  
69.         }  
70.         return callback+"("+content+")";  
71.     }  
72.     /*** 
73.      *  
74.      * @param key 
75.      * @param value2 
76.      * @param callback 
77.      * @return : js函数名(json字符串) 
78.      */  
79.     public static String getJsonP(String key ,Object value2,String callback){  
80.         Map map = new HashMap();  
81.         map.put(key, value2);  
82.         return getJsonP(map, callback);  
83.     }  

若登录成功,返回的内容是:

{"result":1,"session":"C3EA8F68A1B685D3F820C4A729A9D0A7"}

注意:

(a)因为是要跨域请求,所以使用JSONP,没有直接使用ajax;

(b)实际上服务器返回的格式是:js函数名(json字符串)

(c)登录成功之后,页面要保存session,因为后续的请求(修改密码)要通过session验证权限

(2)修改密码

Js代码  

1. var modifyPassword=function($old_password,$new_password){  
2. //    alert($old_password.val()+" , "+$new_password.val());  
3.     if(!isHasLogin())  
4.     {  
5.         alert("您未登录,请先登录");  
6.         $.ui.goBack();  
7.         return;  
8.     }  
9.     var old_password_val=$old_password.val();  
10.     if(!com.whuang.hsj.isHasValue(old_password_val)){  
11.         alert("请输入旧密码");  
12.         $old_password[0].focus();  
13.         return;  
14.     }  
15.     if(old_password_val!==user.password){  
16.         alert("旧密码不正确");  
17.         return;  
18.     }  
19.     var new_password_val=$new_password.val();  
20.     if(!com.whuang.hsj.isHasValue(new_password_val)){  
21.         alert("请输入新密码");  
22.         $new_password[0].focus();  
23.         return;  
24.     }  
25.     if(old_password_val===new_password_val){  
26.         alert("两次密码不能相同");  
27.         return;  
28.     }  
29.     $.ui.showMask();  
30.     var modi_url='http://'+server_url+'/tv_mobile/user/mod_pass?callback=?&password='+old_password_val+"&password2="+new_password_val+";jsessionid="+window.sessionId;  
31.     alert(modi_url);  
32.     $.jsonP({url:modi_url,success:function(data){  
33.         var result=data.result;  
34.         $.ui.hideMask();  
35.         switch (result)  
36.         {  
37.             case 1:  
38.                 user.password=new_password_val;  
39.                 alert("修改成功");  
40.                 $.ui.goBack();  
41.                 break;  
42.             case 23:  
43.                 alert("新密码不能为空");  
44.                 break;  
45.             case 21:  
46.                 alert("请先登录");  
47.                 $.ui.goBack();  
48.                 break;  
49.             case 22:  
50.                 alert("两次密码不能相同");  
51.                 break;  
52.             case 24:  
53.                 alert("密码已过期,请点击右上角的刷新按钮");  
54.                 break;  
55.         }  
56.   
57.     }});  
58. }  

 注意:

(a)JSONP只能通过get方式请求,所以要在url地址后面添加session ID;

(b)不能以普通参数的方式来添加session id,应该是";jsessionid="

(3)注销

Js代码  

1. var logout= function () {  
2.     if(!isHasLogin())  
3.     {  
4.         alert("您未登录,请先登录");  
5.         $.ui.goBack();  
6.         return;  
7.     }  
8.     $.ui.showMask();  
9.     var modi_url='http://'+server_url+'/tv_mobile/user/logout?callback=?&password='+user.password+";jsessionid="+window.sessionId;  
10.     alert(modi_url);  
11.     $.jsonP({url:modi_url,success:function(data){  
12.         var result=data.result;  
13.         $.ui.hideMask();  
14.         switch (result)  
15.         {  
16.             case 1:  
17.                 window.user=null;  
18.                 alert("注销成功");  
19.                 $settings=$("#settings");  
20.                 var $login_li=$settings.find("#settings_user");  
21.                 resetSettingsUserMgmt($login_li);  
22.                 break;  
23.             case 23:  
24.                 alert("新密码不能为空");  
25.                 break;  
26.             case 21:  
27.                 alert("请先登录");  
28.                 window.user=null;  
29.                 $settings=$("#settings");  
30.                 var $login_li=$settings.find("#settings_user");  
31.                 resetSettingsUserMgmt($login_li);  
32.                 $.ui.goBack();  
33.                 break;  
34.             case 24:  
35.                 alert("密码已过期,请点击右上角的刷新按钮");  
36.                 break;  
37.         }  
38.   
39.     }});  
40. }  

 注意:注销时在请求服务器session的同时还要清除页面的登录信息(window.user=null;)

参考:

http://hw1287789687.iteye.com/blog/2188617

AJAX 跨域请求 - JSONP获取JSON数据:http://justcoding.iteye.com/blog/1366102