老师为啥我这个创建不了script标签控制台显示这个警告阻塞？
来源：3-4 跨域URL处理
幻城163630
2020-04-23 16:38:24
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="banner" id="banner"></div>
<div class="banner_jq" id="banner_jq"></div>
<script type='text/javascript' src='js/jquery-1.7.1.js'></script>
<script>
// 封装通用的xhr,兼容各个版本
function createXHR(){
//判断浏览器是否将XMLHttpRequest作为本地对象实现，针对IE7，Firefox，Opera等浏览器
if(typeof XMLHttpRequest !='undefined'){
return new XMLHttpRequest();
}else if(typeof ActiveXObject !='undefined'){
//将所有可能出现的ActiveXObject版本放在一个数组中
var xhrArr=['Microsoft.XMLHTTP',
'MSXML2.XMLHTTP.6.0',
'MSXML2.XMLHTTP.5.0',
'MSXML2.XMLHTTP.4.0',
'MSXML2.XMLHTTP.3.0',
'MSXML2.XMLHTTP'];
var len=xhrArr.length;
var xhr;
for(var i=0;i<len;i++){
//遍历创建XMLHttpRequest对象
try{
//创建XMLHttpRequest对象
xhr=new ActiveXObject(xhrArr[i]);
//如果创建XMLHttpRequest对象成功，则跳出循环
break;
}
catch(ex){
}
}
return xhr;
}else{
throw new Error('NO XHR object availabal.');
}
}
//XMLHttpRequest对象
var xhr=createXHR();
// 响应XMLHttpRequest对象状态变化的函数,onreadystatechange会在readyState发生改变的时候触发。
var data=null;
xhr.onreadystatechange=function(){
//异步调用成功，响应内容解析完成，可以在客户端调用
if(xhr.readyState===4){
if((xhr.status>=200 && xhr.status<300)||xhr.status===304){
//获得服务器还回的数据
// data=eval("("+xhr.responseText+")");
data=JSON.parse(xhr.responseText);
console.log(data.code);
//渲染数据到页面中
renderDataToDom();
}
}
}
//创建请求
xhr.open('get','./server/slider.json',true);
//发送请求
xhr.send(null);
//xhr.send({user:'xm',id:6});
//设置http头部信息
// xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
//渲染数据
function renderDataToDom(){
var img=data.slider,i,
len=img.length;
var str='';
var banner=document.getElementById('banner');
for(i=0;i<len;i++){
// console.log(img[i]);
var linkUrl=img[i].linkUrl;
var picUrl=img[i].picUrl;
str+='<a href="'+linkUrl+'"><img src="'+picUrl+'"></a>'
}
console.log(str);
banner.innerHTML=str;
}
// jQuery的$.ajax();
$.ajax({
url:'./server/slider.json', //请求地址
type:'get', //请求方式
async:true, //异步/同步
dataType:'json', //数据格式
success:function(imgData){ //请求成功的回调
console.log(imgData);
jQrenderDataToDom(imgData.slider);
}
})
//渲染数据
function jQrenderDataToDom(data){
var str='';
$.each(data,function(index,obj){
str+='<a href="'+obj.linkUrl+'"><img src="'+obj.picUrl+'"></a>'
});
$('#banner_jq').html(str);
}
//封装JSONP
function getJSONP(url,callback){
if(!url){
return;
}
//声明数组用来随机生成函数名
var a=['a','b','c','d','e','f','g','h','i','j'];
var r1=Math.floor(Math.random()*10);
var r2=Math.floor(Math.random()*10);
var r3=Math.floor(Math.random()*10);
var name='JSONP'+a[r1]+a[r2]+a[r3];
gbname='getJSONP.'+name;
console.log(gbname);
//判断URL中是否有？
if(url.indexOf('?')===-1){
url+='?jsonp='+gbname;
}else{
url+='&jsonp='+gbname;
}
console.log(url);
//动态创建script标签
var script=document.createElement('script');
//定义script的src
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}
getJSONP('http://www.baidu.com?pid=8788826');
</script>
</body>
</html>
1回答
-
同学你好，警告信息是跨域的问题。代码中使用的并不是课程中的链接，所以有警告。
课程中提供的接口是封装好的，固定的‘jsonp=’设置，但是同学用的这个不知道后台怎么写的。在实际开发中后台会提供开发文档，按照文档提示写就好，不用担心。
另外粘贴的代码中还缺少执行的回调函数：
祝学习愉快！
0
相似问题