博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JSONP跨域访问实现登录验证
阅读量:5138 次
发布时间:2019-06-13

本文共 3941 字,大约阅读时间需要 13 分钟。

最近在做一个手机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可以参见 (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,例子就讲到这里。至于代码的话,如果有空就上传了。

 

 

 

转载于:https://www.cnblogs.com/selwynHome/archive/2013/03/18/2966764.html

你可能感兴趣的文章
1.9 Android
查看>>
分布式系统中接口的幂等性(转)
查看>>
c语言第三次博客作业
查看>>
mybatis 乐观锁和逻辑删除
查看>>
PAT 1055. 集体照 (25)
查看>>
python(wordcloud)实现中文词云
查看>>
JQuery AJAX请求分类示例
查看>>
Python Numpy数组保存
查看>>
同一个中断正在执行中还会重入么
查看>>
2.Struts2的Action接口和 ActionSuppor类
查看>>
使IE6、IE7、IE8支持CSS3代码方法
查看>>
codereviw得到的一些经验
查看>>
TreeSet介绍
查看>>
MVC4 下DropDownList使用方法
查看>>
tomcat war包自动化部署脚本
查看>>
502 bad gateway 错误
查看>>
day20 BBS前奏
查看>>
常见JS写法
查看>>
numpy的计算
查看>>
SQL数据库完全复制
查看>>