1月5日学习内容整理：跨域请求，同源策略和jsonp

1，同源的概念

协议，IP地址，端口相同的就是同源

2、跨域请求

不同源的请求就是跨域请求

3、浏览器会拦截跨域请求返回的结果，并且在浏览器上报错，实际上请求发送到了服务端，服务端也返回了结果，只是浏览器将这个结果截断了

 

@@@老师博客：：：

》》》同源策略：

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。

 

4、解决手段

（1）jsonp     （2）设置为不拦截

我们主要说一下jsonp

 

 

 

 

一、Jsonp

注意一点并不是所有的跨域请求返回的结果浏览器都会拦截的，比如script标签，jsonp就是利用script标签

jsonp是json用来跨域的一个东西。原理是通过script标签的跨域特性来绕过同源策略。

 

注意注意注意：：：：：jsonp只支持GET请求

 

 

1、基于JS的jsonp

当点击某一个按钮时，创建出一个script标签，赋予src属性，这个路径就是跨域请求的URL并且携带函数名作为数据，服务端返回函数名和括号以及把返回的数据作为函数的参数传给浏览器，这时创建出的script标签加载出来的就是函数调用加参数，这样就会执行我们定义的函数，我们就可以在函数中处理服务端返回的数据，这样就拿到了跨域请求的数据，解决了浏览器的同源策略

// ==========================================基于JS的JSONP的实现
<script>
    function bar(arg) {
       console.log(arg);
       console.log(JSON.parse(arg));
    }
</script>


<script>

    $(".send_ajax").click(function () {

       kuayu_request("http://127.0.0.1:8000/send_ajax/?callback=bar")

    });

    function kuayu_request(url) {
        var $script=$("<script>");  // 创建script标签，是一个jquery对象： <script>
        $script.attr("src",url);
        $("body").append($script);
        $("body script:last").remove();
    }

</script>

 

2、基于jquery的jsonp

（1）方式一：

利用jquery提供的getJSON方法，这个方法就会做创建script标签，添加属性等操作，并且URL的数据格式为callbacks=?，这个问号服务端接受的就是一个随机字符串，服务端提取出这个数据，同样返回函数调用以及数据作为参数（字符串拼接）给浏览器，script加载后就会自动触发function执行，data就是服务端返回的数据，我们就可以对数据进行处理了

// ==========================================基于jquery的JSONP的实现1


<script>


   $(".send_ajax").click(function () {   

      $.getJSON("http://127.0.0.1:8000/send_ajax/?callbacks=?",function (data) {
         console.log(data)

      })

   })

</script>

 

 

（2）方式二：

直接利用ajax发请求

jsonp: 'callbacks',  

这是响应参数，预期服务端返回的数据类型，就是告诉服务端浏览器要处理什么样的数据，一旦指定了jsonp，ajax就会进行创建script标签，添加属性等操作，就不是原生ajax请求了，而是创建出的script标签发送的

 

jsonp: 'callbacks',

jsonpCallback:"SayHi"

这两个参数会在URL后封装成键值对作为请求数据，jsonpCallback就是函数名

// ==========================================基于jquery的JSONP的实现2


<script>

    $(".send_ajax").click(function () {

        $.ajax({
            url:"http://127.0.0.1:8000/send_ajax/",
            success:function (data) {
                alert(data)
            },
            dataType:"jsonp",   // 跨域请求  <script>
            jsonp: 'callbacks',
            jsonpCallback:"SayHi"
        })


    });

    function SayHi(arg) {
        console.log("hello",arg)
    }
</script>

 

 

（3）方式三：

jsonp: 'callbacks',

URL后封装的数据键是callbacks，值是一个随机字符串，服务端还是要根据这个键取值，回调函数的data就是服务端返回的数据

// ==========================================基于jquery的JSONP的实现3 （推荐）

<script>

    $(".send_ajax").click(function () {

        $.ajax({
            url:"http://127.0.0.1:8000/send_ajax/",
            dataType:"jsonp",   // 跨域请求  <script>
            jsonp: 'callbacks',
            success:function (data) {
                console.log(data)
            }
        })

    });


</script>