同源&跨域（jsonp原理 / jQuery 的 jsonp）

1. 同源

同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口完全相同。

2. 跨域

不同源则跨域。

3. 顶级域名相同时的跨域解决方案

① domain.name = 顶级域名（如example.com）

② document.domain + iframe

③ window.name + iframe

④ location.hash + iframe

⑤ window.postMessage()

4. jsonp：解决跨域通讯问题

JSON with Padding

jsonp：与ajax没有关系，需要前后端配合

前后端约定好，使用某个名称（如callback）来进行函数的调用。

前端传入函数名，后端接收函数名，并将数据拼接成函数参数的形式与函数名进行字符串拼接，返给前端，前端会解析成js，并执行函数。

1.script标签可跨域

2.后台响应的字符串到前端默认以js解析

3.双方约定参数名称

4.传入复杂数据json格式

spa（single page application）：单页面应用程序

① jsonp原理

利用script标签的src可以引用其他网站的资源，动态创建script标签和回调函数，传递给后台。

其本质是利用了标签具有可跨域的特性， 由服务端返回一个预先定义好的Javascript函数的调用，并且将服务器数据以该函数参数的形式传递过来， 此方法需要前后端配合完成。

可跨域的标签：script、img等

<!--jsonp跨域通信原理-->

<script>

   /*1.动态创建script标签*/

   var script = document.createElement('script');

   /*2.动态创建回调函数*/

   var success = function (data) {

        console.log(data);

   };

   /*3.设置接口地址为script标签的src并且加上回调函数的名称*/

    script.src = 'http://api.study.com/01jsonp.php?callback=success';

   /*4.追加到html文档当中*/

    document.body.appendChild(script);

</script>

② JQuery 的 jsonp

JQuery 的 ajax 方法，设置 dataType 为 jsonp，进行跨域请求。

$.ajax({

    type:'get',

    url:'http://api.study.com/01jsonp.php',

   /*设置jsonp 进行跨域请求*/

    dataType:'jsonp',

    success: function (data) {

        console.log(data);

   }

});