JavaScript 跨域:谈谈跨域之 JSONP

     

       在 Web 开发中,后台开发人员应该会通常遇到这个问题:跨域,而使用 JSONP 就是其中解决办法之一,当然,还有其它解决方法,比如:window.name、window.postMessage、CORS、iframe 之类。本文只介绍 JSONP。

      首先,看看维基关于 JSONP 定义。     

1 JSONP(JSON with Padding)是资料格式JSON的一种“使用模式”,可以让网页从别的网域要资料。另一个解决这个问题的新方法是跨来源资源共享。

2 由于同源策略,一般来说位于server1.example.com的网页无法与不是 server1.example.com的服务器沟通,而HTML的 <script>元素是一个例外。
利用 <script>元素的这个开放策略,网页可以得到从其他来源动态产生的JSON资料,而这种使用模式就是所谓的 JSONP。用JSONP抓到的资料并不是
JSON,而是任意的JavaScript,用 JavaScript直译器执行而不是用JSON解析器解析。

   

         通过维基百科可知,JSONP( JSONP ) 简而言之:

         在 JavaScript 中,涉及到跨域操作,通常会报出错误(SecurityError: Blocked a frame with origin "http://www.<domain>.com" from accessing a cross-origin frame.)。

          打个比方,在一个页面中,其 URL 为: www.jj.com ,而该页面中有一个 iframe,而该 iframe Src 属性值为 www.jj1.com ,在获取 iframe DOM 及进行操作,就会抛出上面错误。而在页面文件( HTML+CSS+Javascript)中,其中 script 、img、iframe等标签的 src 属性便没有这个限制,可指定取任何域链接。而 JSONP 便是利用此原理。

     

        关于 Javascript 判断跨域,就是简单通过 url ,如果请求 url 与当前页面 url 中 协议不同(http、https)、域名不同、端口不同,甚至一个为域名,另一个为域名解析后 IP 服务器地址,也将认定为跨域。

     JavaScript JSONP

     1 首先,在页面 www.jj.com/index.html 中 <Script type='text/javascript'></script> 标签中,自定义一个函数 function ,假设为 A,函数体逻辑根据需求而定。

     2 另外,再利用 <Script type='text/javascript' src='http://www.jj1.com/index.js'></script> src  属性无跨域限制,将 src 属性值设置为 跨域 url 地址。页面再加入该 index.js 文件,而 index.js 文件中,就是利用上一步页面中自定义的函数 A,而其内容可假设为 A()。

   

    3 页面通过步骤二 Script 标签远程加载的 js,而其内容为 A(),而在该页面也已经声明了 函数 A,从而就成功执行了函数,实现了页面跨域。

     

    jQuery  JSONP

    在知名 JavaScript 库:jQuery 中,同样对 JSONP 功能进行了封装,而其原理就是上方提到的 Script 标签 src 无跨域限制。不过,在 jQuery 中,因为该内容封装在 $.ajax(参数) 方法,而用户只需设置其参数(对象类型)的 datatype:”jsonp“、jsonpCallback:"函数名" (此处,若不设置,jQuery 内部将生成拼接成随机字符串),便可实现跨域。

     此处,强调一点,虽然 jQuery 将 JSONP 功能封装在 $.ajax 中,而该功能实现实际与 ajax 没有任何关系,而完全是利用 script 标签 src 属性无跨域限制。

  接下来,看看在 www.jianke.com 购物车功能实现中,便利用到了 $.ajax 中 JSONP 功能。

     一 javascript 代码分析

     

 二 http 协议请求分析

 

     此外,本篇文章只大概讲了一下 JSONP,后续将会详细分析 $.ajax 实现原理。如有错误,烦请指正。

参考资料:http://www.cnblogs.com/twobin/p/3395086.html

              https://zh.wikipedia.org/wiki/JSONP

    

原文地址:https://www.cnblogs.com/Lumia1020/p/5489430.html