jsonp跨域访问服务
<span type="1" blog_id="1433339" userid='
分享到朋友圈
好的文章，和好友一起分享JSONP跨域原理及最优解决方案_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
JSONP跨域原理及最优解决方案
百度web前端开发工程师|
总评分4.2|
浏览量5662024
用知识赚钱
&&JSONP即JSON with Padding。由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。
试读已结束，如果需要继续阅读，敬请购买
注：购买后，该文档仅支持在线阅读
定制HR最喜欢的简历
你可能喜欢
您可以上传图片描述问题
联系电话：
请填写真实有效的信息，以便工作人员联系您，我们为您严格保密。浏览器的同源策略，即是浏览器之间要隔离不同域的内容，禁止互相操作。
比如，当你打开了多个网站，如果允许多个网站之间互相操作，那么其中一个木马网站就可以通过这种互相操作进行一系列的非法行为，获取你在各个网站的相关信息，很明显这是不安全的，所以同源策略避免了很多这样的问题。
但是同时也带来了一些问题，比如有时候你想通过自己的网站去获取另一个自己的网站的一些资料信息，但是由于两者域名不同，所以就被同源策略隔离了，那么这个时候就需要了解一下浏览器的跨域问题。
跨域常见的两种方式，分别是jsonp和新推出的cors，即cross-origin resourse sharing，其实这货出现的时间也不短了，只是我现在才注意到而已。
先说说jsonp，先说个简单的例子再讲百度的例子。
我们有个www.a.com的页面
&script type="text/javascript"
src="http://www.b.com?name=qiangzi"&&/script&
&script type="text/javascript"&
function jsonp(json){
alert(json[&age&]);
这是请求 &http://www.b.com?name=qiangzi &返回的js文件。
jsonp({'name':'qiangzi','age':20});
事先声明，个人没有实际的使用过jsonp去进行跨域操作，所以所有的分析都是猜想，若有不对请指出。
我们来试着去分析上面的代码，a页面事先写好了一个回调函数，即是供我们请求回的js回调的函数，这里的回调函数式alert参数组中的年龄。
我们再看我们的请求，首先我们的请求是写在script标签里面的，所以说明正常来说我们请求回来的内容应该是一段js文件。接着看，我们发现请求的时候同时传了一个参数过去name="qiangzi"，所以我们基本可以猜测在www.b.com服务器那边，接收到a页面的请求，同时接收到传过来的name数据，根据这个数据进行相应的查询，找到了{name:"qiangzi",age:20}这样的一段数据之后，我们的b服务器于是就构造了一段这样的js文件传给请求的页面
jsonp({'name':'qiangzi','age':20});
也就是在原页面输出我们请求的name对应的年龄。很明显，我们请求的script标签中的src不能写死，而应该是一个动态的插入name值的过程。
从前台写好回调函数，到根据请求的参数值构造请求链接，跨域服务器根据链接进行相应处理返回数据并执行回调函数，这整一个过程就是jsonp的过程，当然上述只是我个人猜想，毕竟没有去实现过，所以有错望大神们指出。
那么我们按照这个思路再来看看百度搜索下拉框的jsonp跨域操作。
我们在百度搜索框输入jsonp，马上出现了下拉框，分别有jsonp json jsonp跨域等等，其实这一过程就是使用到了jsonp跨域处理，具体怎么过跨法，我们打开F12，找到network这里可以看到这样的一个请求
也就是这个链接
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=jsonp&json=1&p=3&sid=_______12254&req=2&bs=xmlhttprequest&pbs=jsonp&csor=5&pwd=json&cb=jQuery_2&_=5
点击我们可以看到这样的一段东西
那么这样的一段东西其实是什么呢？其实这就是我们jsonp跨域请求回来的数据以及调用的函数。
接下来就按照我们刚才的思路分析下整个过程。
首先，百度在前台写好了一个回调函数，即是接收跨域返回来的数据并且出现下拉框，把数据填充到下拉框中。当我们在百度搜索的输入框（注意区分开此处的输入框和上句话中的下拉框）输入我们要搜索的内容时，此时百度页面马上获取我们输入的值，并构造请求，即我们上文中提到的
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=jsonp&json=1&p=3&sid=_______12254&req=2&bs=xmlhttprequest&pbs=jsonp&csor=5&pwd=json&cb=jQuery_2&_=5
对于这一段请求，我个人看着都觉得有点怕怕的，所以为了方便理解jsonp我们简化下应该可以这样理解
https://sp0.baidu.com/su?wd=jsonp
服务器查询jsonp对应的联想关键词，并把这些关键词填充在一个数组中，然后把这个数组作为参数调用前台写好的回调函数，返回这段js文件给前台，然后我们就看到了在搜索框输入jsonp然后下拉框出现一系列关键词的功能。
至此，关于jsonp的例子讲诉差不多结束。那么jsonp有哪些优缺点呢？
jsonp的优点是兼容所有的浏览器，无论是主流的还是以前的。而它的缺点则是由于jsonp发起的请求是get方式的，即参数是填充在请求地址上，所以这种方式发送的数据有限制。
关于jsonp再补充点内容，其实不知道大家有没有想过，我们使用的很多API接口，调用他们返回的数据，其实这一过程就是跨域了，因为我们请求的是别的站点的数据，不做跨域处理我们是不可能获得信息的，只是有时候我们是按着API说明文档照写的所以忽视了这个
我这里有个国外的API，根据填写的邮编搜索邮编所对应的位置信息
http://www.geonames.org/postalCodeLookupJSON?postalcode=10504&country=US&callback=?&
在这个API中我们需要填写三个参数，一个是邮编号码，另一个是对应的国家，而第三个就是我们的回调函数。
这个是该API接口返回的数据
整个API调用的过程就是，我们在前台写好一个callback函数，这个callback函数的功能就是根据我们的需求而写，然后在构造请求的时候把这个callback函数的名称写在请求对应的callback上。至于其他的邮编号码国家这些当然也是在我们前台页面构造的。构造完这些请求之后，当我们发起请求的时候，API服务器端就会根据我们的请求信息，拿到相应的数据，并把这些数据放到我们写的回调函数对应的参数中传回来，并进行调用，整个API调用完毕。
说完了jsonp，接下来说说cors跨域这玩意。
在前文看到同源策略的时候，不知道大家有没有想过，难道就不能让两个跨域的站点写一个秘密的协议，达成一种交易从而使得两者可以进行跨域操作获取数据之类的吗？嗯，我个人觉得cors做的就是这件事。
关于cors在维基百科上的定义是这样的：跨域资源共享（CORS ）是一种网络浏览器的技术规范，它为Web服务器定义了一种方式，允许网页从不同的域访问其资源。而这种访问是被同源策略所禁止的。CORS系统定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。它是一个妥协，有更大的灵活性，但比起简单地允许所有这些的要求来说更加安全。
要想实现cors跨域，需要做的就是两件事，一个是我们的浏览器要支持cors跨域这一操作（主流谷歌和火狐均支持，ie版本要高于ie10才行），另外，我们的服务器端必须要设置好Access-Control-Allow-Origin从而支持跨域操作。
cors相对于jsonp而言的好处就是支持所有的请求方式，不止是get请求，还支持post,put请求等等，而它的缺点就很明显，无法兼容所有的浏览器，对于要兼容到老式浏览器而言，还是使用jsonp好点。
阅读(...) 评论()基本介绍/jsonp
Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”，可以让使用。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的【非官方易理解简介】包括IE6在内的大多浏览器支持的标准跨域数据访问方式。核心思想是利用JS标签里面的跨域特性进行跨域数据访问，在JS标签里面存在的是一个跨域的URL，实际执行的时候通过这个URL获得一段字符串，这段返回的字符串必须是一个合法的JS调用，通过EVAL这个字符串来完成对获得的数据的处理。大多JS框架都支持一个包装后的JSONP实现。例如EXTJS：在URL里面指定跨域的目标地址，在PARAMS里面指定传递过去的参数，这些都和AJAX的实现一样。不一样的地方如下：实际传递的时候，EXT框架会自动添加一个叫做callback的参数，这个参数每次调用都不一样，不用管他。在后台处理的时候，获得这个callback的参数，直接把它当做一个js函数调用的名字，加上括号，和你自己希望提供的字符串，组合起来就是一个合法的js方法调用，在ext框架里面，这个方法调用的是success方法JSP的后台例子：
StringparamS=request.getParameter("paramStr");
Stringcallback=request.getParameter("callback");
out.println(callback+"('"+serverSide.exec(paramS)+"')");
前台例子略，参考EXT的AJAX例子【以下是官方内容】JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。
使用方法/jsonp
1. 在客户端调用提供JSONP支持的URL Service，获取JSONP格式数据。比如客户想访问http://www.yiwuku.com/myService.aspx?jsonp=callbackFunction假设客户期望返回JSON数据：["customername1","customername2"]那么真正返回到客户端的Script Tags: callbackFunction([“customername1","customername2"])可能的调用方式：
&scripttype="text/javascript"src="http://www.yiwuku.com/myService.aspx?jsonp=callbackFunction"&&/script&
2. 在客户端写callbackFunction函数的实现
&scripttype="text/javascript"&
functiononCustomerLoaded(res ul t,methodName)
varhtml='&ul&';
for(vari=0;i&result.i++)
html+='&li&'+result[i]+'&/li&';
html+='&/ul&';
document.getElementById(' div Customers').innerHTML=
3. 页面展示
&divid="divCustomers"&&/div&
4. 最终Page Code
&!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&htmlxmlns="http://www.w3.org/1999/xhtml"&
&title&TopCustomerswithCallback&/title&
&divid="divCustomers"&&/div&
&scripttype="text/javascript"&
functiononCustomerLoaded(result,methodName)
varhtml='&ul&';
for(vari=0;i&result.i++)
html+='&li&'+result[i]+'&/li&';
html+='&/ul&';
document.getElementById('divCustomers').innerHTML=
&scripttype="text/javascript"src="http://www.yiwuku.com/myService.aspx?jsonp=onCustomerLoaded"&&/script&
数据体现/jsonp
JQuery下：$.getJSON
$(document). ready (function(){
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
function( data ){
$. each (data. item s,
function(i,item){
$("&img/&").attr("src",item.media.m).appendTo("#images");
jsoncallback=?，其中？会自动替换为function(data)函数。2. $.ajax
dataType:'jsonp',
data:'id=10',
jsonp:'jsonp_callback',
url:'http://www.yiwuku.com/getdata',
success:function(){
如何在服务器端实现对JSONP支持这仅仅需要把服务的JSON数据转换成想要的script tags的形式就可以了，格式可以自已定义，毕竟这是个非官方的协议。可参考：Implement JSONP in your Asp.net Application注：Callback仅仅是JSONP的简单实现，可以根据具体需要实现更复杂的功能，比如可以在客户端动态集成更多的变量数据来完成分页功能。Java:return request.getParameter("jsoncallback")+"("+JsonString+")";返回内容像：jsonp3([{"id":1,"title":"XXXX"},{"id":2,"title":"YYYYY"}])
&|&相关影像
互动百科的词条（含所附图片）系由网友上传，如果涉嫌侵权，请与客服联系，我们将按照法律之相关规定及时进行处理。未经许可，禁止商业网站等复制、抓取本站内容；合理使用者，请注明来源于www.baike.com。
登录后使用互动百科的服务，将会得到个性化的提示和帮助，还有机会和专业认证智愿者沟通。
此词条还可添加&
编辑次数：6次
参与编辑人数：6位
最近更新时间： 13:53:43
贡献光荣榜
扫码下载APP