ajax的跨域处理

最新推荐文章于 2024-08-26 17:07:20 发布

派小星星星星

最新推荐文章于 2024-08-26 17:07:20 发布

阅读量550

点赞数

文章标签： ajax 跨域 js

本文链接：https://blog.csdn.net/Bp_L1993/article/details/72599105

版权

跨域

什么是域名

一个域名地址的组合：http:// www . abc.com : 8080 / scripts/jquery.js
协议子域名主域名端口号请求的资源
当协议、子域名、主域名、端口号中任意一个不同时，都算作不同域。
不同域之间的相互请求资源，就叫“跨域”
比如：http://www.abc.com/index.html 请求 http://www.efg.com/service.php

2. 我们为什么要做跨域处理

JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象，浏览器采用了同源策略规定了只能拿同源的资料.所有我们需要跨域来获取资料。

3. 怎么处理跨域?

方法一：代理（后台做的，不做特别介绍）

通过在同域名的web服务器端创建一个代理：
北京服务器（域名：www.beijing.com）
上海服务器（域名：www.shanghai.com）
比如在北京的web服务器后台
（www.beijing.com/proxy-shanghaiservice.php）来调用上海服务器
（www.shanghai.com/service.php）的服务，然后再把响应结果返回给前端，这样前端调用北京同域名的服务就和调用上海的服务效果想通了。

方法二：jsonp

JSONP可用于解决主流浏览器的跨域数据访问的问题。

JSONP的原理和步骤：

<script>标签
src的作用：加载（包含指定的外部文件）
可以跨域包含
被包含的资源可以是任何类型的文件(可以是txt,php等)
他只关注被包含的文件的内容是否是合法的JS
原理
定义函数
包含外部文件，在被包含的文件中执行调用定义好的函数
参数的（数据）的实现
问题：包含就调用，通过动态创建<script>实现按需调用
问题：包含动态文件时可以通过一个接口实现按需生成调用函数名称

JSONP : JSON with Padding
1.script标签
2.用script标签加载资源是没有跨域问题的
在资源加载进来之前定义好一个函数，这个函数接收一个参数（数据），函数里面利用这个参数做一些事情
然后需要的时候通过script标签加载对应远程文件资源，当远程的文件资源被加载进来的时候，就会去执行我们前面定义好的函数，并且把数据当作这个函数的参数传入进去

案例：百度搜索提升框

打开百度，我们一边打字会发现出现相关的关键字供你查看：这个时候打开网络查看，

发现这个数据是通过ajax的方式动态加载过来的，还能找到这个域名请求的地址：

<!DOCTYPE html>
<html>
<head id="head">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
body{
padding: 50px;
}
#text{
width: 300px;
height: 40px;
}
ul li{
list-style: none;
height: 30px;
line-height: 30px;
}
ul li a{
display: block;
text-decoration: none;
color: #000;
padding-left: 10px;
}
ul{
border: 1px solid #ccc;
width: 302px;
display: none;
}
ul li a:hover{
background: #d8d8d8;
}
</style>
</head>
<body>
<input type="text" id="text"/>
<ul id="list">
<!--<li><a href="javascript:">旅游</a></li>
<li><a href="javascript:">旅游</a></li>
<li><a href="javascript:">旅游</a></li>
<li><a href="javascript:">旅游</a></li>
<li><a href="javascript:">旅游</a></li>
<li><a href="javascript:">旅游</a></li>-->
</ul>
</body>
<script>
function fn(data){
var oUl = document.getElementById('list');
//已经建立好断开的链接实现了跨域，所以跨域获取到data的数据
//console.log(data);
//接下来就是DOM的处理操作，在UL中添加DIV的值为data中的属性值，

这里获取到的值是JSON也可能是其他了（xml、html），
所以在使用前最好先console输出一下看看是什么类型再进行解析调用。
var html = '';
var arr = data.s;
for(var i=0;i<arr.length;i++){
html+='<li><a href="https://www.baidu.com/s?wd='+arr[i]+'"target="_blank">'+arr[i]+'</a></li>'
}
oUl.innerHTML = html;
}
</script>
<script>
// 1. 边写边加载,创建script
var oText = document.getElementById('text');
var oHead = document.getElementById('head');
var oUl = document.getElementById('list');
oText.onkeyup = function(){
if(oText.value!=''){
var oS = document.createElement('script');
//赋予标签src属性为百度搜索的接口
oS.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+oText.value+'&cb=fn';
//https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=aa&cb=fn
//动态创建script标签
oHead.appendChild(oS);
		
oUl.style.display = 'block';
}else{
oUl.style.display = 'none';
}

}
</script>
</html>

效果如下：

方法三：XHR2

派小星星星星

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax的跨域处理

跨域什么是域名一个域名地址的组合：http:// www . abc.com : 8080 / scripts/jquery.js 协议子域名主域名端口号请求的资源当协议、子域名、主域名、端口号中任意一个不同时，都算作不同域。不同域之间的相互请求资源，就叫“跨域”比
复制链接

扫一扫