跨域是指不同域名之间进行数据访问,为了保证数据传输安全,浏览器默认情况下是不允许跨域访问的
Ajax和cookie不能跨域使用,而script的src可以发送请求并加载任何资源, 没有域的限制。
这里模拟一个在各大搜索网站搜索框里输入内容出现相应关联内容的例子。
<script>
window.οnlοad=function () {
var inp=document.getElementById('text');
inp.οnkeyup=function () {
var content=inp.value;
// 创建标签script
// var url='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su';
var url = "https://sug.so.360.cn/suggest";
ky(url,'callback',{'word':content},function (json) {
var ul=document.getElementById('ul');
ul.innerHTML='';
for (var i = 0; i < json.s.length; i++) {
var li=document.createElement('li');
li.innerHTML=json.s[i];
ul.appendChild(li);
}
});
}
}
</script>
<script>
function json2str(json) {
var arr=[];
json.t=Math.random();
for(var key in json){
arr.push(key+'='+encodeURI(json[key]));
}
return arr.join('&');
}
function ky(url,cbName,dat,fn){
var callBackName=('sjq_'+Math.random()).replace('.','');
dat[cbName]=callBackName;
window[callBackName]=function(json) {
fn&&fn(json);
}
var str=json2str(dat);
var scrip=document.createElement('script');
scrip.src=url+'?'+str;
document.body.appendChild(scrip);
}
</script>
运行截图: