同源以及跨域

同源能做哪些事？

同源(同一域名下)能做哪些事？

1. 可以在自己的界面中，用iframe加载同源的文件

   var iframe = document.querySelector('iframe');
   
   // 获取 firame中的window
   var iframeWindow = iframe.contentWindow;
   
   // 获取 iframe中的 document对象
   var iframeWindowDocument = iframe.contentWindow.document;
   
   // 得到iframe加载的html界面对应的document后，就可以用DOM API，来控制这个html界面了
   

2. 同源的文件之间，才能发起网络请求，否则发送网络请求失败。 error： XMLHttpRequest cannot load…

跨越：

• 让不同源的两个文件，能做到上面第二件事 - 发送网络请求

• 从一个网站的页面中 去请求 另外一个不同的网站中的内容

• 应用：

  • 当我们想使用类似百度开放平台上天气、交通等开放API的时候，就必须要跨域请求

同源

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

跨域方案

• 顶级域名相同的可以通过domain.name来解决，即同时设置 domain.name = 顶级域名（如example.com）
• document.domain + iframe
• window.name + iframe
• location.hash + iframe
• window.postMessage()

浏览器中跨域请求方案

JSONP

JSON with Padding其本质是利用了HTML标签的src属性具有可跨域的特性。

只能以GET方式请求

• 注意只能够通过get方法

• 前端代码:注意,域名不同

  • 核心是 通过script标签的src属性提交get请求

//callback参数：是当前页面一个方法名，起到成功回调函数的作用
    //在前端，定义一个方法名为：callback对应字符串，的方法
    //在服务器端，$_GET/POST['callback']取出，然后加上要返回的数据拼接成字符串返回
    //前端拿到返回的数据之后：如果是'fn()'类型的字符串，会自动去寻找当前页面中有没有同名的方法，如果有，就调用，而且，如果服务器返回的有数据，并且当前页面方法有形参，那形参就代表返回的数据.直接使用

<script type="text/javascript" src='http://www.section02.com/seciton02_jsonP.php?callback=fn'></script>

jQuery 的$.ajax()

方法当中集成了JSONP的实现，可以非常方便的实现跨域数据的访问。

dataType: 'jsonp' 设置dataType值为jsonp即开启跨域访问

jsonp 可以指定服务端接收的参数的“key”值，默认为`callback

jsonpCallback可以指定相应的回调函数，如果不指定，默认会自动生成一个字符串，而且此时默认走success参数对应的成功回调。虽然是jsonpCallback，但拼接到服务器中的还是callback字段，服务器取值的时候，也是这么取

• 示例代码

<script type="text/javascript" src='jquery/jquery-3.0.0.min.js'></script>
<script type="text/javascript">
    function sendAjax(){
        $.ajax({
            url:'http://www.section02.com/sectcion02_jqJsonp.php',
            type:'post',
            dataType: 'jsonp',
            data:{name:'itt'},
            success:function(data){
                console.log(data);
            }
        })
    }
</script>

应用:

一些平台为我们提供了可以直接使用的接口,我们只需要按照他们提供的格式提交数据即可

• 百度车联网api

  开发者秘钥ak:0A5bc3c4fb543c8f9bc54b77bc155724