JSONP跨域访问实现登录验证
JSONP跨域访问实现登录验证
最近在做一个手机Web项目，硬着头皮上了。现在比较流行的就是使用Phonegap＋HTML5＋CSS＋JS/JQuery做一个看起来native的mobile web app。但是由于时间急，而且这些东西都不是很熟悉，再加上这只是对已有web网站的mobile化，因此采用了Phonegap＋几乎纯server端页面的方式，做起来省事多了，但是缺点还是有一大堆的，这里就不细说了。
唠叨之前首先声明一点，本人不是教授，也没有大量研究过，因此如有说错的地方，请指出，不甚感谢。
好了，这篇随笔要展示的是跨域访问的一种实现，这是针对传统ajax不支持跨域访问而提出的。当然你也可以用别的技术实现跨域访问，比如说websocket，只是这种实现比较费lib。只用一个2Kb的jsonp包就能跨域访问，何乐而不为呢。
首先来说说啥叫跨域访问，即由于浏览器的安全，不允许访问不同域下的资源，通俗的说,A网站的资源不允许被B网站所使用（这个必须的，谁会允许别人来自己那蹭吃又蹭喝，甚至还打包带走）。不过这也不是绝对的，偶尔借个螺丝刀也是可以的，像a标签的href，script标签的src，form表单的action属性等都是可以“借”东西的。
对于jsonp真正的原理，目前也没有很深入的去了解过。至于百度上搜的什么原理，说的都不对。比如“使用script标签加载配置对象中的跨域url”，我想说的是为什么ajax就不能加载跨域url呢。而且我发现一个怪事，同样使用$.getJson()进行JSONP跨域访问，如果type为get，则可以跨域访问，但如果改成post，则不行了。
好了，我们还是开始这个例子吧，理论什么的还是等有空google去吧。
首先理一下简单的需求，就是本地html可以登录到server端进行验证，而且登录后还应该是在本地，这是一个典型的跨域访问。
用到的技术：
前台采用HTML＋CSS＋JQuery ＋ JQuery Mobile（界面ui，用起来爽，但是侵入性太强，有时候让人讨厌），即做成一个mobile web app，可以在手机上进行登录，需要使用Phonegap进行打包。
后台采用纯粹的servlet进行处理，使用tomcat做web服务器。
哦，忘了jsonp是主角了，那就赶紧先拉出来溜溜吧。先上登录页面，我们那可爱的jsonp就被用到submit按钮上（这不废话么）。注意一点，如果你不是js大神，那么使用jquery的方法$.json(...)是没法实现error方法的回调的，即如果服务器压根没开，要请求的登录验证url根本不能访问，$.json()方法努力尝试，发现不行，于是果断不通知你就撤了。解决的方法是使用jquery-jsonp插件，一个大小只有2K的“高科技”啊，当然大神可以自己实现（我还是默默的飘过吧）。
function logon()
{
var _url = createReqUrl();
if (!_url) return false ;
// alert(_url);
showWaiting();
$.jsonp({
url: _url,
timeout: 5000 ,
success: function (jsonData){
if (jsonData[0].success=='true' ){
saveUserID(jsonData[ 0 ].retuid);
// redirect
turnToMenuPage();
} else {
$( "#showError").html(jsonData[0 ].errorinfo);
showSubmit();
}
},
error: function (xOptions,textStatus){
$( "#showError" ).html(textStatus);
showSubmit();
}
});
}
这个方法可谓是前台登录的要害了。要做的事情是：
1.获取web服务器地址配置页面中的值（存储在window对象的localStorage中，这是html5支持的本地存储的方式之一），再加上表单输入框的值，最后拼接成一个url。注意这个url要带上“callback=?”，以方便后面$.jsonp的使用(当然也不是必须要这样做的，这边不写后面可以补不足)。
2.猪脚粉墨登场，具体api可以参见 https://github测试数据/jaubourg/jquery-jsonp/blob/master/doc/API.md （1中提到的可以通过参数callbackParameter来弥补）。由于插件作者的NB，error回调方法可以使用了。
我想说的是跨域访问不是那么easy的，需要双方的配合。
首先，url中回调参数（）的name跟后台的获取参数名字要一致。这里，我有必要详细的说明。
前台中，$.jsonp({
url:"http://xxxxx.jsp?aa=bb&cc=dd&& callback = ? " //你看到的是？，但其实使用的是默认的 _jqjsp ，自己参看jsonp插件的api吧
success:function(){..}, //这个回调函数应该是众望所归，后台输出的script脚本，其实基本上回调的就是他
error:function(){...} //上面的猪脚挂了，就由他当替补，比如服务器根本没开
}
上面斜体加粗部分都是可以由用户指定的，是可以替换的，但是他们换了，服务器端也得换。所以除非吃饱了撑着，否则。。。你懂的。
后台，获取回调方法名使用老掉牙的request.getParameter(" callback ")，输出的script要形如 ? ({aa:"bb",cc:"dd"})。
这么做，前后台就跟亲戚一样了，大家互相交流嘛。
奉上后台servlet的代码，让他们真正交流起来吧，哈哈。
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
String userID = null ,password = null ,jsonpCallBack = null ;
userID = req.getParameter("userid" );
password = req.getParameter("password" );
//回调方法名要要一致
jsonpCallBack = req.getParameter("callback" );
String retJSONPStr = null ;
//如果登录过了，就不要瞎起哄了，回家待着吧。
if (userID!= null &&req.getSession().getAttribute(userID)!= null ){
retJSONPStr = UserValidService.doLogoned();
retJSONPStr = JSONStrUtil.createRetJSONP(jsonpCallBack, retJSONPStr);
} else {
// sbRetJSON ：正确的翻译是 傻逼返回json（返回的傻逼json）
StringBuffer sbRetJSON = new StringBuffer();
UserBean retUser = new UserBean();
//流氓是不允许登陆的
Boolean isSuccess = UserValidService.doValidation(userID, password,sbRetJSON,retUser);
if (isSuccess){
req.getSession().setAttribute(userID, retUser);
}
retJSONPStr = JSONStrUtil.createRetJSONP(jsonpCallBack, sbRetJSON.toString());
}
PrintWriter out = resp.getWriter();
// System.out.println(retJSONPStr);
//告诉前台，快递到了
out.println(retJSONPStr);
}
OK，例子就讲到这里。至于代码的话，如果有空就上传了。
标签: JSONP , JQuery Mobile , Phonegap
作者： Leo_wl
出处： http://HdhCmsTestcnblogs测试数据/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息