ajax跨域的方法

1. 跨域的原因

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

“同源"指的是"三个相同”:

	协议相同
	域名相同
	端口相同

ajax跨域的方法

URL 结果 原因
http://store.company.com/dir2/other.html 同源 只有路径不同
http://store.company.com/dir/inner/another.html 同源 只有路径不同
https://store.company.com/secure.html 失败 协议不同
http://store.company.com:81/dir/etc.html 失败 端口不同 ( http:// 默认端口是80)
http://news.company.com/dir/other.html 失败 主机不同

目的:

同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。

限制:

	随着互联网的发展,"同源政策"越来越严格。目前,如果非同源,共有三种行为受到限制:
	  (1)Cookie、LocalStorage 和 IndexDB 无法读取。
	  (2)DOM 无法获得。
	  (3)AJAX 请求不能发送。

Ajax跨域

Ajax跨域指的是将Ajax请求进行跨域处理,而不是说在Ajax中提供了跨域的方法。同源政策中明确规定Ajax请求只能发给同源的网址,否则就会发生跨域报错。除了设置代理之外页面中有三种常见的解决跨域的手段,

​		1. 设置服务端响应头
​		2. 代理
​		3. JSONP

jaonp跨域

Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。
作为前端开发人员,我们应该掌握的跨域方法是jsonp
JSONP特点就是简单适用,浏览器全部支持,服务器改造非常小。

原理

它的基本思想是,网页通过添加一个script元素,向服务器请求JSON数据,这种做法不受同源政策限制;服务器收到请求后,将数据放在一个指定名字的回调函数里传回来。

​ 使用方法:

①、在html中插入script标签,并利用script标签发起跨源请求

②、在服务器对应php文件中通过拼接字符串,模拟函数调用。并将要返回数据通过回调函数参数返回。

③、在html页面中,显式写出回调函数。这样当跨源请求完成后对应回调函数会自动执行。

优点:

​ (1)由于使用script脚本作为请求,因此实际上请求和传统的引入js脚本没有任何区别。
​ (2)而在返回的数据中我们也尽量模拟出了js调用函数的语法,因此只要在页面中声明了回调函数就会自动被调用。
​ (3)再者作为参数的【服务器端】的JSON数据,在js中是被直接识别为对象,因此在回调函数中也避免了使用JSON.parse的步骤。

代码:

	function aaa(a){
            console.log(a)
        }
        test(123)

        // 封装jsonp
        function addScript(src){
        	// 创建<script>
            var script = document.createElement("script")
            // 修改src属性
            script.src = src;
            // 添加到body
            document.body.appendChild(script)
        }
        // 加载完成后执行函数
        window.onload = function(){
            addScript("http://127.0.0.1:8888/jsonp.php?callback=aaa")
        }

<?php
    $a = $_GET["qqq"];
    $b = '123';
    // echo "123";
    echo $a.'('.$b.')';
?>
上一篇:SQL语句:在两个数据库间复制表结构和数据数据库


下一篇:keepalived高可用、四层负载均衡