阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      目录
      目录