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!


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>