发布于 2017-03-11 00:56:04 | 141 次阅读 | 评论: 0 | 来源: 网友投递
JSONP 跨域解决方案
通过script标签来跨域获取数据，名为JSON with Padding，或者就叫JSONP。JSONP的原理很简单，但需要服务器端给予相应配合。大致来说，JSONP的实现思路就是在客户端编程时作好使用JSON数据的准备，然后再通过圆括号将这些数据括起来以创建一条有效的JavaScript语句（可能是一次有效的函数调用）。
在项目开发中遇到跨域的问题，一般都是通过JSONP来解决的。但是JSONP到底是个什么东西呢，实现的原理又是什么呢。在项目的空闲时间可以好好的来研究一下了。
1、什么是JSONP？
要了解JSONP，不得不提一下JSON，那么什么是JSON？
JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the language with no muss or fuss.
JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。
2、JSONP有什么用？
由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。
JSONP的产生
1.众所周知，Ajax请求资源受同域的限制，不管是静态资源，动态页面，web服务都不行
2.同时我们发现web页面上调用JS文件时则不受跨域的影响（不仅如此，我们还发现凡是拥有‘src'这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>等）
3.可想而知，当前阶段如果想通过web端（ActiveX控件、服务器代理、HTML5的websocket等方式不算）跨域访问数据就只有一种可能，那就是服务端把数据装进JS格式的文件里，供客户端调用和处理
4.数据的传输，我们知道一种叫JSON的纯字符数据格式可以简洁的描述复杂的数据结构，而且还被JS原生支持，在客户端可以很容易的处理这种格式的数据
5.这样解决方案的一目了然了，web端通过和调用脚本一模一样的方式，来调用跨域服务器上动态生成的JS文件。服务器之所以要动态生成JS文件，目的在于获取客户端的回调函数名并把客户端需要的数据通过JSON（也可以是纯字符串）的格式传进去
6.在客户端对JS文件调用成功后，也就获取到了回调函数里的参数，剩下的就是对数据的处理了，这种方法和Ajax看起来很像，但是却并不一样（Jquery将JSONP和Ajax封装在一起，如果不了解的人会混为一谈）
7.为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了
好了，不知道大家对JSONP理解了没有，如果没有的话，鄙人就出来总结一下，说的不好，不要打我。
其实原理就是，客户端请求一个链接，并把需要的参数加上，callback表示是一个JSONP的请求（这个前端和后台可以自己统一），后台解析这个请求链接，发现是一个JSONP的请求，然后生成一个调用方法，并根据请求参数动态生成一个字符串（可以是JSON,也可以是纯字符串）塞进调用方法里，这样客户端就可以那到数据并做后续的处理了。
说了这么多，不上代码不是我的风格啊，上代码。。
function test(data){
console.log(data)
}
var url="http://www.x.com/test?a=1&callback=test"//向x.com/test传递参数a值为1，并告诉他要调用的函数名是“test”
//后台拦截到callback，知道要生成一个调用方法，方法名是test，并传递参数，后台处理生成如下（数据虚构）
test("aaaaaa")
test({a:1,b:2})
//然后前端通过script标签去访问并执行，上面的东西
var script = document.createElement('script');
script.setAttribute('src', url);
// 把script标签加入head，此时调用开始
document.getElementsByTagName('head')[0].appendChild(script);
//然后就会调用页面的test方法，这就是jsonp的实现原理。关于Jquery中JSONP的现实
$.ajax({
type: "GET",
url: "http://x.d.cn/asych/adv.html?loc=8&callBack=?",//告诉后台这是一个jsonp请求，需要调用什么方法，如果为“？”，jq会帮你自动生成（如果使用jq一般都设置为“？”，这样才能在成功时触发jq的回调函数）
type:"post",//jsonp只能发get请求，就算我设置请求类型为post
dataType:"jsonp",//告诉jquery这是一个jsonp的数据，需要生成script标签来加载js
data:{
a:"1"
},
/*success: function (data) {//成功后jq会执行的方法（如果callback参数为“？”）
$("body").append(data);
},*/
error: function (XMLHttpRequest, textStatus, errorThrown) {
//alert(errorThrown);
}
}).done(function(data){
$("body").append(data);
});看了上面的代码和注释，相信大家都明白了吧，虽然Jquery将JSONP封装到Ajax中，但是本质上是不同的。
Ajax的核心是通过XmlHttpRequest获取非本页内容，而JSONP的核心则是动态添加<script>标签来调用服务器提供的js脚本。
所以Ajax和JSONP的区别不在于是否跨域，Ajax通过服务端代理一样可以实现跨域，JSONP本身也不排斥同域数据的获取。
还有上面说到过，JSONP和Ajax的数据格式不一定要是JSON，也可以是纯字符串。
总而言之，JSONP不是Ajax的一个子集，即使Jquery将JSONP封装进Ajax，也不能改变这一点。
以上所述是小编给大家介绍的JS JSOP跨域请求实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对phperz网站的支持！