By

Contents
  1. 1. 跨域问题
    1. 1.1. 同源
    2. 1.2. 跨域
    3. 1.3. 跨域的解决办法
      1. 1.3.1. 利用这个iframe标签（这个可以看另一个文件夹）
      2. 1.3.2. jsonp
    4. 1.4. jq 中的一些请求

跨域问题

在说跨域这个问题之前我什么需要了解什么是 同源

同源

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

跨域

不同源则跨域

我们来举一个例子

例如 :http://www.example.com/

code block

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
http://api.example.com/detail.html
//不同源,域名不同
https//www.example.com/detail.html
//不同源,协议不同
http://www.example.com:8080/detail.html
//不同源,端口不同
http://api.example.com:8080/detail.html
//不同源.域名、端口不同
https://api.example.com/detail.html
//不同源,协议、域名不同
https://www.example.com:8080/detail.html
//不同源,端口、协议不同
http://www.example.com/detail/index.html
//同源,只是目录不同

跨域的解决办法

利用这个iframe标签（这个可以看另一个文件夹）

  1. 顶级域名相同的可以通过domain.name来解决，即同时设置 domain.name = 顶级域名（如example.com）
  2. document.domain + iframe（比较重要）
  3. window.name + iframe
  4. location.hash + iframe
  5. window.postMessage()

具体的实现

因为是同域名：协议，端口，域名相同的情况下，我是可以去访问
另一个页面中的里面的资源

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<body>
<iframe src="访问的URL" width="100%" frameborder="0"></iframe>
<script>
    /*
       我想在这个页面，访问URL
     * 页面的dom 元素
     *
     * */
    var iframe=document.querySelector("iframe");
    iframe.onload=function(){
            document.domain="aichen.com"；//（重要）
            var win=this.contentWindow;
            win.document.querySelector("p").color="blue";
            }
     //这样既实现了访问的url页面之中操作上面的p标签。
 </script>
</body>
**link**只能载入这个css文件。
<!-- link 标签引入css，实际上它也是去发送一个请求的能不能去载入
http://static.meilishuo.net/pc/css/base.css?
1608231432.25找个站点的css 文件.-->
<link href="http://static.meilishuo.net/
pc/css/base.css?1608231432.25"
type="text/css" rel="stylesheet">

jsonp

JSON with Padding

原理剖析

  • 其本质是利用了和link标签页
    是可以用来访问另一个网站的样式.

  • 标签具有可跨域的特性，由服务端 返回一个预先定义好的Javascript函数的调用，并且将服务器数据以该函数参数的形式传递过来，此方法需要前后端配合完成。

  • 只能以GET方式请求

具体的实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//实质上就是这个的。
document.querySelector("#buttonId").onclick=function(){
//创建标签，创建script 标签，<script><script>
var script=document.createElement("script");
//<script src=""><script>
script.setAttribute("src","04jsonp.php?username=18");
//我现在这些操作都在dom 里面，都在内存里面。
//我把这个标签放在页面上面.
//也就是说
console.log(script);
document.querySelector("body").appendChild(script);
//因为我现在是我在浏览器使用script 标签发送一个请求给服务器
//服务器返回返回数据，返回的找个数据直接由浏览器进行解析.
//因为我现在是使用的是script 标签，服务器返回的数据
//浏览器默认使用js 去取解析服务器返回的数据。
    }

jq 中的一些请求

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

dataType: ‘jsonp’ 设置dataType值为jsonp即开启跨域访问
jsonp 可以指定服务端接收的参数的“key”值，默认为callback
jsonpCallback 可以指定相应的回调函数，默认自动生成

实现不从缓存中读取数据：本代码端中的最后几行注释中就有说明这个问题

  1. $getScript(url,function(){})

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    $(function(){
    $("#buttonId").click(function(){
    //getScript 从在面上面去理解我们是获取一段js 脚本.
    //我假设我的页面非常庞大，我不可能一次性把所有的当前页面的这些
    //内容全部加载完毕，只有需要使用到的时候才去记载
    //我们ajax 可以用来做性能优化.
    //我调用这个方法getScript 方法，然后底层是给
    //js/script.js 发送一个请求.
    //它这个是用来处理浏览器缓存的
    $.getScript("js/script.js");
    //当我点击button 我给js/script.js发送请求
    //当我再次点击button 我又去请求js/script.js
    //浏览器会有一些默认行为.
    //当我现在请求的地址js/script.js跟我上次请求的地址js/script.js
    //一样的时候，这个时候浏览器就不会去请求服务器.
    //jQuery 怎么去帮我做js/script.js?_=1474683550796
    //第二次请求地址js/script.js?_=1474683577792
    //浏览器就不会从缓存里面去找了，就会每次都去请求js/script.js
      })
    });

  2. $.ajax

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    $.ajax({
        url:"https://sug.so.360.cn/suggest?
        callback=suggest_so&
        encodein=utf-8&encodeout=utf-8&
        format=json&fields=word,obdata&word=z",
        type:"get",
    //默认是使用xmlhttpRequest 发送请求，但是有跨域限制
    //添加这个dataType 底层是发送script 标签的请求.
        dataType:"jsonp",
        success:function(){
        }
    })

  3. getJSON

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <script>
    $(function(){
    $("#buttonId").click(function(){
    //这个方法去请求服务器
    //要求服务器返回的数据格式一定是json的数据格式.
        $.getJSON("06getjson.php",function(data){
                //打印的是什么.
                alert(data);
        });
    })
    });
    </script>

其他的在这里就不多说了自行查阅W3C文档

Contents
  1. 1. 跨域问题
    1. 1.1. 同源
    2. 1.2. 跨域
    3. 1.3. 跨域的解决办法
      1. 1.3.1. 利用这个iframe标签（这个可以看另一个文件夹）
      2. 1.3.2. jsonp
    4. 1.4. jq 中的一些请求