Javascript(笔记50) - AJAX - 跨域

跨域

一个完整的 URL 包括8个部分，分别是：ptotocol, host, port, path, resource, query string, anchor, auth 。 其中： protocol / host / port 中有任何一个不同就是跨域。  

protocol : 协议；http、https 、ftp 等；

host： 主机，IP地址；127.0.0.1， www.51cto.com等；

port: 端口；80，8080等；

关于HTTP协议：​​https://blog.51cto.com/ahuiok/5885485​​

浏览器的同源策略，限制 XMLHttpRequest 无法向另一个网站发送请求，即AJAX是无法跨域的。

跨域解决方式：JSONP、CORS、Iframe

个别标签是支持跨域的：script 、link 、img 、iframe 

资源访问路径

. 表示当前目录， .. 表示上一级目录； 

1）指定相对路径：相对路径是相对于当前页面所在的位置，通过 ../ 指定准确路径；

2）指定绝对路径：以正斜杠的方式 "/" 开始的是绝对路径，以 tomcat 服务器作为起始路径，但不推荐；

3）指定完整URL：带上协议端口和域名地址；

4）在头部配置 base 标签，指定当前页面相对路径的根目录；

<script src="./login.js"></script>
<script src="../js/login.js"></script>
<script src="/ajax/js/login.js"></script>
<script src="http://localhost:8080/ajax/js/login.js"></script>
<base href="http://localhost:8080/ajax/">

API(应用程序接口)供应平台

很多数据并不是引自自己的网站，是要从外部平台获取的，比如：天气的数据都来自气象部门的接口；

我们不需要知道那些数据是怎么来的、如何打包封装的，只需要知道接口的地址和调用方法就可以使用了；

聚合数据： ​​https://www.juhe.cn​​

百度API Stroe：​​​​https://apis.baidu.com/​​

JSON​P

JSONP( JSON with Padding 跨域的JSON)，的原理就是允许用户传递一个 callback 参数给服务器，然后服务端返回数据时会将这个 callback 参数作为函数名来包裹住 JSON 数据；

注意：JSONP 方式只支持 GET 方式发送请求；

纯JS实现

域 A 客户端定义函数 Fn，要获取域 B 的数据Data；域 B 接受域A的请求，调用 Fn，并将数据以 JSON 格式包裹进 Fn （传参）， 然后在函数 Fn 中访问数据 ；这段话不好理解，举例如：

在文件 demo.html 中：

<script>
    function demo(obj) {
        console.log("姓名:" + obj.name + ",年龄:" + obj.age);
    }
    demo({ name: "jack", age: 20 });
</script>

控制台输出：

如果把执行函数的代码放在另一域中的 demo.js 中，能否执行呢？ 

demo({ name: "jack", age: 20 });

然后在 demo.html 中引入这个 demo.js:

<script>
    function demo(obj) {
        console.log("姓名:" + obj.name + ",年龄:" + obj.age);
    }
</script>
<script src="http://www.bxx.cn:8080/demo.js"></script>

控制台输出：可以执行，没有问题；

从跨域的文件 demo.js 中，通过传参的方式调用了本地的函数；从这个意义上说，本地的 demo.html 文件，拿到了跨域的数据（数据放在参数中）；

注意：调用的文件的顺序，函数体先引入，执行函数的文件（跨域文件）后引入；

服务器端实现

域 A 需将函数名传递给域 B；

域 B 将函数名与数据拼接成字符串返回；

域 A 生成一个 script 标签引用 ；

demo.html

<input type="button" value="使用script标签发送跨域请求" onclick="doSend()" />
<script>
    // 回调函数
    function handel(data){
        console.log(data);
        console.log(data.id +","+data.name +","+data.age);
    }
    function doSend(){
        var script = document.createElement("script");
        script.src="http://http://www.bxx.cn:8080/demo.js?callback=handle";
        document.body.appendChild(script);
    }
</script>