24# jsonp和ajax的同源策略

最新推荐文章于 2024-05-27 16:19:48 发布

DanielLeefu

最新推荐文章于 2024-05-27 16:19:48 发布

阅读量150

点赞数

分类专栏： javascript 代码自学前端文章标签： jsonp

本文链接：https://blog.csdn.net/qq_41579115/article/details/100975937

版权

javascript 同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

代码

11 篇文章 0 订阅

订阅专栏

自学前端

6 篇文章 0 订阅

订阅专栏

jsonp原理，利用src的跨域属性，动态的创建script标签，给src指定跨域
的接口，去访问对方的资源，并由指定的回调函数将资源返回

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0 ;
            padding: 0;
        }
        input{
            display:block;
            width: 640px;
            height: 30px;
            margin: 0 auto;
            margin-top:20px;
            border:none;
            border-top:1px solid #ccc;
            border-left:1px solid #ccc;
            border-right:1px solid #ccc;
         
        }
        ul{
            width: 640px;
            margin: 0 auto;
            border:1px solid #ccc;
            
        }
        ul,li{
            list-style: none;
        }
    </style>
</head>
<body>
    <input type="text" name="" id="">
    
    <ul></ul>
    <script>
    /*
     * jsonp原理，利用src的跨域属性，动态的创建script标签，给src指定跨域
     *  的接口，去访问对方的资源，并由指定的回调函数将资源返回
     * 
     */
    
    const input = document.querySelector('input');
    const ul = document.querySelector('ul');
    input.onkeyup = function(){
        ul.innerHTML = '';
        let sc = document.createElement('script');
        sc.src = `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&wd=${this.value}&req=2&csor=1&cb=fn&_=1568709878104`;
        document.getElementsByTagName('head')[0].appendChild(sc);
        
    }

    function fn(data){
        for(let i = 0;i<data.g.length;i++){
              let li = document.createElement('li');
            li.innerHTML = data.g[i].q;
            ul.appendChild(li);
          
        }
      
        
        console.log(data);
    }

</script>
</body>
</html>

一、Ajax 的同源策略
(一) 概念：同源策略是客户端脚本（尤其是 Javascript）的重要的安全度量标准。同源策略阻止从一个域上加载的脚本获取或操
作另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容，以防止
它们之间的操作。
这里的同源指的是：同协议，同域名（主机名）和同端口。

同协议：http://www.zzl.com https://www.zzl.com
1. 同域名：http://www.zzl.com http://www.michael.com
1. 同端口：http://www.zzl.com:80 http://www.zzl.com:8080
(二) 精髓：它的精髓很简单：它认为自任何站点装载的信赖内容是不安全的。当被浏览器半信半疑
的脚本运行在沙箱时，它们应该只被允许访问来自同一站点的资源，而不是那些来自其它站点可能怀有恶意的资源。
(三) 为什么要有同源限制？我们举例说明：比如一个黑客程序，他利用 IFrame 把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过 Javascript 读取到你的表单中 input 中的内容，这样用户名，密码就轻松到手了。
二、Jsonp 跨域
(一) 了解后端代理 Jsonp Xhr2 Nginx
(二) 什么是 jsonp?
JSONP(JSONwithPadding)是一个非官方的协议，它允许在服务器端集成 Scripttags 返回至客户端，通过 javascriptcallback 的形式实现跨域访问（这仅仅是 JSONP 简单的实现形式）。
1. 回调函数：当一个函数作为另一个函数的参数时，那么这个函数就是回调函数
(三) 作用： 1. 由于同源策略的限制， XmlHttpRequest 只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过 script 标签实现跨域请求，然后在服务端输出 JSON 数据并执行回调函数，从而解决了跨域的数据请求。
三、Get 和 post 提交 (一) Get 方式：用 get 方式可传送简单数据，但大小一般限制在 1KB 下，数据追加到 url 中发送（http 的 header 传送），也就是说，浏览器将各个表单字段元素及其数据按照 URL 参数的格式附加在请求行中的资源路径后面。另外最重要的
一点是，它会被客户端的浏览器缓存起来，那么，
别人就可以从浏览器的历史记录中，读取到此客
户的数据，比如帐号和密码等。因此，在某些情况下，get 方法会带来严重的安全性问题。
(二) Post 方式：当使用 POST 方式时，浏览器把各表单字段元素及其数据作为 HTTP 消息的实体内容发送给 Web 服务器，而不是作为 URL 地址的参数进行传递，使用 POST 方式传递的数据量要比使用 GET 方式传送的数据量大的多。总之：get 方式传送数据量小，处理效率高，安全性低，会被缓存，而 POST 反之。
(三) 区别：
Post 传输数据时，不需要在 URL 中显示出来，而 Get 方法要在 URL 中显示。
1. Post 传输的数据量大，可以达到 2M，而 Get 方法由于受到 URL 长度的限制,只能传递大约 1024 字节.
1. Post 顾名思义,就是为了将数据传送到服务器端,Get 就是为了从服务器段取得数据.而 Get 之所以也能传送数据,只是用来设计告诉服务器,你到底需要什么样的数据.Post 的信息作为 http 请求的内容，而 Get 是在 Http 头部传输的。
1. get 方法用 Request.QueryString[“strName”]接收 post 方法用 Request.Form[“strName”] 接收
四、兼容问题 (一) 虽然两种提交方式可以统一用 Request(“strName”)来获取提交数据，但是这样对程序效率有影响，不推荐使用。