深入了解jsonp解决跨域访问
在这个项目中,我们做的充分利用jsonp这是一个特点跨界,完成简单的单点登录认证和权限控制的统一。道,各有各的优点、各有各的优点,选择什么方式实现全然取决于我们自己或者项目经理的开发经验,对各种框架的理解程度往往决定了眼下开发项目的总体架构。
这不是一项凭空产生的新东西。不过JS的一个特性而已之前没有被我们提及也没有被我们注意到原来常常使用的js还能够跨域呢,觉的我们对已经学过的东西理解还不是不够深入、有些肤浅,JS绝大多数在浏览器中执行完毕各种动态效果,开发js的人一開始应该就考虑到了浏览器的特性。为了不受浏览器的限制而将js赋予了这一个神圣的职责,浏览器的限制是安全策略里面的一个策略,叫同源策略。
同源策略
同源的意思是协议、域名、port都同样,仅仅要有一个不同样那么就是不同源的訪问地址。一个浏览器的一个页面中是不能够从不同源的地址获取数据的,当每次页面载入时浏览器都会自己主动推断获取的数据是否来自一个源地址。假设不是会受到浏览器的阻止。
好像会议的安检一样,仅仅同意某一类有通行证的人进入,其它的则不会让进入阻止在外面,而js有一个特性能够跨过安检通过特殊途径进入不受阻止。
解决同源策略问题jsonp
Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”,能够让网页从别的网域获取资料。
之所以叫jsonp能够理解为主要作用和目的就是从别的网域获取json格式数据,这是它的主要应用方面,其他的作用临时没实用到。
原理
原理也非常easy理解,它之所以能够跨域是利用了script标签的跨域能力。试想?你有没有想过常常引入的一个普通js文件。它是怎么样载入到页面中去的为什么它的src属性写上一个地址就能够把别处的js文件载入到页面上呢。经測试这个src属性能够填写随意有效的地址。即使不在同一个项目文件夹结构中的文件也是能够的。
比如这个链接;
<span style="font-size:14px;"><script type="text/javascript" src="_js/jquery-2.0.0.min.js"></script></span>
它仅仅是一个引用,载入进来的文件时非常多这种函数function(){}………………,同理jsonp就是这样一种模式。它返回的也是js函数同上面这个链接没有什么差别。仅仅是函数名叫做回调函数需预定义好,函数里面是返回的json数据。我们来看一个实例:
<span style="font-size:14px;"> <script type="text/javascript"> function getjson(json)
{
alert("通过src属性获得json="+json.result);
}
</script> <script type="text/javascript" src="http://localhost:28080/application1/login.do? method=loginInterface&callback=getjson&name=lilongsheng"></script></span>
这是我自己写的一个js标签。它的src地址是还有一个tomcat中部署的application1应用的登录接口地址。而上面调用是在还有一个tomcat中的application2 jsp页面,属于不同源调用,再来看一下application1中接口类
<span style="font-size:14px;"> public ActionForward loginInterface(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
{ /** 推断是否登录成功 */
boolean isLogin = false;
//从用URL中获取username和password
String name=request.getParameter("name");
String pwd=request.getParameter("pwd");
try {
//回调函数名
String callbackFunName = request.getParameter("callback");
//利用jsonp包装的json数据
String data = callbackFunName + "({\"result\":\"" + name + "\"})"; System.out.println(data);
//返回到界面
print(data,request,response); } catch (Exception e) {
e.printStackTrace();
}
return null;
}</span>
返回结果为gejson({"result":"lilongsheng"}),返回的是一个JS代码,它会自己主动运行getjson这个函数。而花括号{}里面的内容正好当做參数传递到这个函数里面,完毕跨域调用。
从上面能够看出通过script标签能够从不同源的地方获得json数据。
我们再来看看jquery是怎样使用的,只在方法中增加一个參数就能够实现,感觉简单了非常多,这是由于框架已经为我们封装好了里面的一些细节调用关系。只要我们设置了參数它就支持跨域訪问,调用例如以下:
<span style="font-size:14px;"> function getJsonp()
{
var name=$("#name").val();
var pwd=$("#pwd").val();
$.ajax({
url:"http://localhost:28080/application1/login.do?method=loginInterface&name="+name+"&pwd="+pwd,
type:"post",
dataType:"jsonp",
jsonp : 'callback',
success:function(data){
alert(data.result);
},
error:function(){
alert("网络连接失败! ");
}
});
}</span>
除了jquery之外还有ext等框架都支持这一特性,它们都是基于javaScript基础类库封装起来的,因此都具有js具有的特性。
关于jsonp的怎样应用已经录了一集视频,以下是下载地址
jsonp视频演示下载地址:http://pan.baidu.com/s/1dDIjnTR
版权声明:本文博客原创文章。博客,未经同意,不得转载。
深入了解jsonp解决跨域访问的更多相关文章
- jsonp实现跨域访问
要实现JSONP跨域访问,首先就要了解什么是跨域?然后JSONP与JSON的关系? 1.什么是跨域? 跨域简单的说就是一个域名下的程序和另一个域名下的程序做数据交互.比如说:现有一个http://ww ...
- AJAX跨域问题解决方法(2)——JSONP解决跨域
JSONP是什么?JSON全称为JSON with Padding,是JSON的一种补充的使用方式,不是官方协议. 使用JSONP服务器后台要改动吗?JSONP不同于一般的ajax请求返回json对象 ...
- springboot 前后端分离开发解决跨域访问
最近新学习了Java EE开发框架springboot,我在使用springboot前后台分离开发的过程中遇到了跨域求问题.在网上寻找答案的过程中发现网上的解决方案大多比较零散,我在这里整理一个解决方 ...
- 用jQuery与JSONP轻松解决跨域访问的问题【转】
原文地址:http://www.jb51.net/article/46463.htm 好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅 ...
- 用jQuery与JSONP轻松解决跨域访问的问题
浏览器端的真正跨域访问,推荐的是目前jQuery $.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的. var qsData = {'searchWord':$("# ...
- C# 和Jsonp的一个小demo 用jQuery与JSONP轻松解决跨域访问的问题
客服端: 在A项目下面 建立一个 JsonpClient.aspx页面,代码如下: <%@ Page Language="C#" AutoEventWireup=& ...
- JSONP解决跨域问题,什么是JSONP(转)
原文链接:https://www.cnblogs.com/xinxingyu/p/6075881.html 说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的 ...
- 什么是jsonp?——使用jsonp解决跨域请求问题
我们在使用ajax请求的时候经常会产生跨域问题,这是由于浏览器的同源策略导致的.所谓同源,即域名.协议.端口均相同,否则不管是静态页面还是动态网页或者web服务都无法通过ajax正常请求.有时候,我们 ...
- jsonp 解决跨域传输
JSONP是JSON with Padding的略称.它是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅 ...
随机推荐
- Java IO的RandomAccessFile的使用(转)
现有如下的一个需求,向已存在1G数据的txt文本里末尾追加一行文字,内容如下“Lucene是一款非常优秀的全文检索库”.可能大多数朋友会觉得这个需求很easy,说实话,确实easy,然后XXX君开始实 ...
- Codeforces Round #257 (Div. 1)449A - Jzzhu and Chocolate(贪婪、数学)
主题链接:http://codeforces.com/problemset/problem/449/A ------------------------------------------------ ...
- Android适配方案小结(一)
相关计量单位介绍: px:是屏幕的像素点,不同设备显示的效果一样. in:英寸(1英寸等于2.54cm) mm:毫米 pt:磅, 1/72英寸 dp:device independent pixels ...
- 原子操作(atomic operation)
深入分析Volatile的实现原理 引言 在多线程并发编程中synchronized和Volatile都扮演着重要的角色,Volatile是轻量级的synchronized,它在多处理器开发中保证了共 ...
- Java魔法堂:注解用法详解——@SuppressWarnings(转)
一.前言 编码时我们总会发现如下变量未被使用的警告提示: 上述代码编译通过且可以运行,但每行前面的“感叹号”就严重阻碍了我们判断该行是否设置的断点了.这时我们可以在方法前添加 @SuppressWar ...
- Is it always safe to call getClass() within the subclass constructor?(转)
14down votefavorite An article on classloading states that the method getClass() should not be cal ...
- [LeetCode] 032. Longest Valid Parentheses (Hard) (C++)
指数:[LeetCode] Leetcode 指标解释 (C++/Java/Python/Sql) Github: https://github.com/illuz/leetcode 032. Lon ...
- JavaScript之数组去重
前言:昨天看到了别人发的帖子,谈到了面试题中经常出现的数组去重的问题.作为一个热爱学习.喜欢听老师话的好孩纸,耳边忽然想起来高中老师的谆谆教导:不要拿到题就先看答案,要先自己思考解答,然后再对照答案检 ...
- SharePoint 2013 如何使用Silverlight
1.打开VS,创建一个Silverlight计划.例如下面的附图: 2.配置选择默认的,当然也能够不勾选Host Application,例如以下图: 3.加入Silverlight控件,2个labe ...
- 漫游Kafka实战篇clientAPI
原文地址:http://blog.csdn.net/honglei915/article/details/37697655 Kafka Producer APIs 旧版的Procuder API有两种 ...