AJAX

Posted 2021-04-15 正儿八经学前端

点击蓝色字关注我们！

长的好看的人都关注了

同源与跨域

同源策略

        同源指的是协议相同、域名相同和端口相同。如果非同源，以下三种行为都将收到限制。

            1. Cookie、LocalStorage 和 IndexDB 无法读取。

            2. DOM 无法获得。

            3. AJAX 请求不能发送。

        虽然这些限制是很有必要的，但是也给我们日常开发带来不好的影响。比如实际开发过程中，往往都会把服务器端架设到一台甚至是一个集群的服务器中，把客户端页面放到另外一个单独的服务器。那么这时候就会出现不同源的情况，如果我们知道两个网站都是安全的话，我们是希望两个不同源的网站之间可以相互请求数据的。这就需要使用到跨域 。

跨域

可通过两种方式实现跨域

1. jsonp

        虽然ajax请求会受到同源策略的限制，但是script标签的src属性是不受同源策略限制的。因此可以通过script标签来绕过同源策略的限制。其原理是：服务端返回一个预先定义好的javascript函数的调用，并且将服务器的数据以该函数参数的形式传递过来，这个方法需要前后端配合。说白了，jsonp的原理就是借助了script标签不受同源策略的限制，在服务端返回一个函数的调用，将数据当前调用函数的实参。 在浏览器端，需要程序要声明一个函数，通过形参就可以获取到服务端返回的对应的值。

• jsonp演化过程1

// php文件header("content-type:text/html;charset=utf-8");echo "alert(1111)";

// html文件<script src="http://www.api.com/testjs.php"></script>

        原理：其实src的路径是什么文件不重要，无论引入js文件还是php文件，最后返回给浏览器的都是字符串，因此我们script标签是可以引入一个php文件的。

• jsonp演化过程2

// php文件header("content-type:text/html;charset=utf-8");$arr = array( "name"=>"zs", "age"=>18);$result = json_encode($arr);//这是一段js函数的调用的代码，$result就是我们想要的数据echo "func($result)";

// html文件<script> function func(data) { console.log(data); }</script><script src="http://www.api.com/testjs.php"></script>

缺点：后端必须知道前端声明的方法的名字，后端才能调用。

• jsonp演化过程3

// php文件header("content-type:text/html;charset=utf-8");$arr = array( "name"=>"zs", "age"=>18);$result = json_encode($arr);//这是一段js函数的调用的代码，$result就是我们想要的数据echo $_GET['callback']."($result)";

// js文件function fun(data) { console.log(data);}var button = document.querySelector("button");button.onclick = function () { var script = document.createElement("script"); script.src = "http://www.api.com/testjs.php?callback=fun"; document.body.appendChild(script);}

• jquery对于jsonp的封装

//使用起来相当的简单，跟普通的get请求没有任何的区别// 只需要把dataType固定成jsonp即可// 但是此ajax方法和ajax请求没有任何关系，原理还是通过script标签来实现$.ajax({ type:"get", url:"http://www.api.com/testjs.php", dataType:"jsonp", data:{ uname:"hucc", upass:"123456" }, success:function (info) { console.log(info); }});

2. CORS (跨域资源共享)

新版本的XMLHttpRequest对象，可以向不同域名的服务器发出HTTP请求。这叫做“跨域资源共享"（Cross-origin resource sharing，简称CORS）。CORS不需要前端做任何修改，只需要后端打开共享接口即可。

// 服务器允许跨域的代码
//允许所有的域名访问这个接口header("Access-Control-Allow-Origin:*");//允许www.study.com这个域名访问这个接口header("Access-Control-Allow-Origin:http://www.study.com");

补充：jsonp与cors的对比

• jsonp兼容性好，老版本浏览器也支持，但是jsonp仅支持get请求，发送的数据量有限。使用麻烦。

• cors需要浏览器支持cors功能才行。但是使用简单，只要服务端设置允许跨域，对于客户端来说，跟普通的get、post请求并没有什么区别。

• 跨域的安全性问题：跨域并不会造成安全性问题，因为跨域是需要服务端配合的 ，也就是说不论jsonp还是cors，如果没有服务端的允许，浏览器是没法做到跨域的。

关

注

听说关注了我们的人

都升职加薪啦