同源限制: 浏览器不允许一个域的脚本请求另一个域的文档,通俗来说,不允许访问不同协议、不同域名或不同端口的文档
跨域处理方法:
1.jsonp
前提: 浏览器虽然对ajax请求做出了限制,但script的链接没有限制,例如: <script src= 'xxx'>,我们可以轻松地链接到另一个域的文件
原理:
首先在客户端创建一个回调函数,将回调函数的名称(例如callback)传给服务端;
服务端生成json数据data后,创建js文件,将callback(data)(data成了callback的参数)写入js文件;
客户端创建script文件,链接地址为此前生成的js文件地址;
解析script文件,返回的callback(data)即调用callback函数(前面已创建),由此,我们获取了data,如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script> //创建callback函数 function callBack(data){ console.log(data) } </script> <script> //客户端返回的文件 callBack({content: 'xx'}) </script> </html>
实际应用的例子如下:
<script type="text/javascript"> var url = "http://localhost:8080/html5/jsonp_data11.js"; // 创建script标签,设置其属性 var script = document.createElement('script'); script.setAttribute('src', url); // 把script标签加入head,此时调用开始 document.getElementsByTagName('head')[0].appendChild(script); function callbackFun(data) { console.log(data.age); console.log(data.name); } </script>
也可以使用jquery
$.ajax({
type:"post",
url:"http://localhost:8080/html5/JsonServlet",
dataType:'jsonp',
jsonp:'mycallback',
jsonpCallback:'callbackFun',
success:function(data) {
console.log(2222);
console.log(data.age);
}
});
值得注意的是使用jsonp是一个前后端配合的过程,后台根据前端的请求也得做成相应调整,特别是使用jquery时, 有时回调函数名是jsonp属性的值,有时候追加到
url后面。
优点: 很好地解决了同源策略的限制
缺点:
1.只能GET;
2.不会返回状态码;
3.安全性不佳,毕竟返回一段js,对安全由一定威胁。