1.我们为什么要去做跨域处理?
答:出于安全考虑,浏览器采用了同源策略规定了只能拿同源的资料.所有我们需要跨域来获取资料.
2.什么是域名?什么是跨域?
一个域名是由http://(协议) www(子域名) . abc.com(主域名) : 8080(端口号) / script/jquery.js(请求资源地址)
当协议/子域名/主域名/端口号中任意一个不相同时,都算作不同域;
不同域之间相互请求资源,就算做跨域;
怎么处理跨域?
方法一 : 代理 (这个一般是后台做好一个接口然后直接调用);
方法二 : jsonp(这个比较常用);
<script>标签:
src的作用 : 加载(包含指定的外部文件)
可以跨域包含
被包含的资源可以是任何类型的文件(可以是txt,php等)
他只关注被包含的文件的内容是否是合法的JS
原理
定义函数
包含外部文件,在被包含的文件中执行调用定义好的函数
参数的(数据)的实现
问题:包含就调用,通过动态创建<script>实现按需调用
问题:包含动态文件时可以通过一个接口实现按需生成调用函数名称
JSONP : JSON with Padding
1.script标签
2.用script标签加载资源是没有跨域问题的
在资源加载进来之前定义好一个函数,这个函数接收一个参数(数据),函数里面利用这个参数做一些事情
然后需要的时候通过script标签加载对应远程文件资源,当远程的文件资源被加载进来的时候,就会去执行我们前面定义好的函数,并且把数据当作这个函数的参数传入进去
用JSONP写百度搜索效果如下;
<!DOCTYPE html>
<html>
<head id='head'>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
padding:20px;
margin:20px;
}
ul{
width: 200px;
}
#tex{
width: 200px;
height: 30px;
line-height:30;
}
li{
width: 200px;
height: 30px;
list-style:none;
}
li a{
display:block;
color:#000;
line-height:30px;
text-decoration:none;
}
ul{
border:1px solid #d6d6d6;
}
li a:hover{
background:#d6d6d6;
}
</style>
</head>
<body>
<input type="text" id="tex" />
<ul>
<!--<li><a href="###">旅游</a></li>
<li><a href="###">旅游</a></li>
<li><a href="###">旅游</a></li>
<li><a href="###">旅游</a></li>-->
</ul>
</body>
<script>
var oHead=document.getElementById('head');
var otext=document.getElementById('tex');
otext.onkeyup=function(){
var keyword=otext.value;
//获取文本框输入的文本
var scr=document.createElement('script');
//动态创建'script标签';
//赋予标签src属性为百度搜索的接口
scr.src='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+keyword+'&cb=fn';
oHead.appendChild(scr);
}
function fn(data){
var oUl=document.querySelector('ul');
//因为上面已经建立了端口的链接实现了跨域所以跨域获取到data的数据
var arr=data.s;
//接下来就是DOM的处理操作 在Ul中添加div的值为data中的属性值 这里获取到的值是json 也有可能是其他所有大家用之前最好先console一下看看是什么在进行解析调用
var html="";
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>
</html>