JavaScript jsonP有哪几种方式？
问题
JavaScript jsonP有哪几种方式？
跨域问题，为什么回调函数可以突破跨域；
答案
JSONP原理及实现跨域方式?
后台给了个接口：https://a.a.com/a/a.json,我页面的上线地址是：http://b.b.com。显而易见，因为浏览器同源策略的限制，通过ajax无法无法取得json的数据。
同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支JavaScript的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。
同源策略限制了我们无法通过原生的XMLHttpRequest()对象获取到json数据。为了突破这个限制，我们的前辈们想出了一个解决方案：jsonp。
jsonp并非新的数据格式，而是解决JSON跨域获取的解决方案。通过JSONP获取到得数据已经不是JSON了，而是JS类型的数据（大部分是对象）。
上网找过很多讲jsonp的文章，大部分都是讲的模模糊糊的。jsonp的原理其实不复杂：
-
1、浏览器的同源策略把跨域请求都禁止了；
-
2、HTML的
<script>标签是例外，可以突破同源策略从其他来源获取数据； -
3、由上可得，我们可以通过
<script>标签引入jsonp文件，然后通过一系列JS操作获取数据。
不仅如此，我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>
上面三点便是JSONP实现跨域的原理。
原理我们知道了，该怎么实现这些操作呢？
接下来轮到jQuery登场！JQ已经帮我们封装好了
$.ajax({
dataType:'jsonp',
jsonp:'jsonp_callback',
url:'http://www.baidu.com/xxx.jsonp',
success:function(){
//dosomthing
}
});
严格的jquery代码；
jQuery(document).ready(function(){
$.ajax({
type: "get",
async: false,
url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
success: function(json){
alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');
},
error: function(){
alert('fail');
}
});
});
原生JS demo：
function jsonHandle (url) {
var script = document.createElement("script");
script.setAttribute("src", url);
document.getElementsByTagName("body")[0].appendChild(script);
}
//JS插入之后就可以处理数据了
Ajax和jsonp的区别
-
1、ajax和jsonp这两种技术在调用方式上“看起来”很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；
-
2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加
<script>标签来调用服务器提供的js脚本。 -
3、所以说，其实ajax与jsonp的区别不在于是否跨域，ajax通过服务端代理一样可以实现跨域，jsonp本身也不排斥同域的数据的获取。
-
4、还有就是，jsonp是一种方式或者说非强制性协议，如同ajax一样，它也不一定非要用json格式来传递数据，如果你愿意，字符串都行，只不过这样不利于用jsonp提供公开服务。
总而言之，jsonp不是ajax的一个特例，哪怕jquery等巨头把jsonp封装进了ajax，也不能改变这一点！;
http://www.XXXX.com:80/
1、协议、域名/IP、端口号 2、同源策略：上面的三个完全一致是同源
我们当前页面的地址(http://www.aaa.com/)和我们要向服务器请求数据的地址(http://www.XXX.com/data/userInfo?name=aaa&age=13)在同源下,这就是同源策略,项目中我们在同源下请求数据使用JS中的Ajax技术
非同源(跨域)策略：上面的三个有一个不一样就是非同源
我们当前页面的地址和请求数据的服务器地址不是同一个源,
例如:当前地址是http://www.XXX.com/,请求数据的地址http://www.baidu.com/data/videoInfo,此时我们是跨域请求(非同源策略),在项目中目前最常用的解决跨域的方式是JS中的JSONP技术
具体的目录文件和URL后面的参数值
后面的都是传递给当前页面的参数值(问号传参),如果需要传递多个参数,中间中&隔开,#是当前页面的锚点定位
https://www.baidu.com:80/user/index.html?name=aaa&age=17&sex=1#userName
(#userName锚点定位,定位到当前页面中ID为userName这个标签的位置)
更多面试题
如果你想了解更多的前端面试题，可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题，也有一些大公司的面试图，可以让你面试更加顺利。
| 面试题 | ||
|---|---|---|
| HTML | CSS | JavaScript |
| jQuery | Vue.js | React |
| 算法 | HTTP | Babel |
| BootStrap | Electron | Gulp |
| Node.js | 前端经验相关 | 前端综合 |
| Webpack | 微信小程序 | - |
这些题库还在更新中，如果你有不错的面试题库欢迎分享给我，我整理后放上来；人人为我，我为人人，互帮互助，共同提高，祝大家都拿到心仪的Offer！
