同源&跨域（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>

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

    var success = function (data) {

        console.log(data);

    };

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

    document.body.appendChild(script);

</script>

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

$.ajax({

    type:'get',

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

    dataType:'jsonp',

    success: function (data) {

        console.log(data);

    }

});