您现在的位置是：首页 >技术教程 >前端学习--Ajax(4) 跨域网站首页技术教程

一、同源策略和跨域

1.1 同源策略

如果两个页面的协议、域名、端口号都相同，则两个页面是同源

同源策略：浏览器提供的安全功能，限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互

通俗理解：A网站的JS无法与非同源的C网站进行资源交互，比如无法读取C的Cookie、LocalStorage和IndexedDB，无法接触C的DOM元素，无法向非同源地址发送Ajax请求

1.2 跨域

如果两个页面的协议、域名、端口号至少一个不相同，就是跨域，非同源即跨域

浏览器允许发起跨域请求，但是跨域返回的数据会被浏览器的同源策略拦截

1.3 实现跨域请求

JSONP

临时解决方案，只支持GET请求

CORS

出现的比较晚，是跨域Ajax请求的根本解决方案

 二、JSONP

2.1 实现原理

通过<script>标签的src属性，请求跨域的数据接口，并通过函数调用的形式接受跨域接口响应带来的数据

1. 定义一个回调函数
2. 通过script标签的src属性请求接口，让它返回一个函数的调用，使用callback指定函数名
3. 服务器返回函数调用

    <script>
        function success(data){
            console.log(data)
        }
    </script>
    <script src="http://ajax-base-api-t.itheima.net/api/jsonp?callback=success&name=ls&age=30"></script>

 JSONP和Ajax没有任何关系

2.2 jQuery中的JSONP

         $(function(){
            $.ajax({
                url:'http://ajax-base-api-t.itheima.net/api/jsonp?&name=ls&age=30',//jQuery会自动添加callback
                dataType:'jsonp', //指定请求类型是jsonp
                jsonp:'callback',//发送到服务器端的参数名称
                jsonpCallback:'success', //自定义的回调函数名称
                success:function(res){
                    console.log(res)
                }
            })
        })