老师，我有个问题

来源：3-5 跨域调用

qq_慕哥8242320

2020-11-05 18:34:03

# 具体遇到的问题
1、控制台出现黄色字体提示

Cross-Origin Read Blocking (CORB) blocked cross-origin response http://class.imooc.com/api/jsonp?jsonpgetJSONP.getJSONPdcf with MIME type application/javascript. See https://www.chromestatus.com/feature/5629709824032768 for more details.

控制台无法输出跨域调用中console.log(data)的信息;

2、复制http://class.imocc.com/api/jsonp加上=abc后无法打开

# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

在这里输入代码，可通过选择【代码语言】突出显示

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="banner" class="banner"></div>
<div class="banner" id="banner_jq"></div>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript">
//封装通用的XMLHttpRequest对象，兼容各个版本
function creatXHR() {
//判断浏览器是否将XMLHttpRequest作为本地对象实现，针对ie7,firefox,opera等
if(typeof XMLHttpRequest!="undefined"){
return new XMLHttpRequest();
//ie等
}else if(typeof ActiveXObject != "undefined"){
//将ie中所有可能出现的版本统一存入数组中
var xhrArr=['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0',
'MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0',]
var len=xhrArr.length,xhr;
for(var i=0;i<len;i++){
try{
//创建ActiveXObject对象
xhr=new ActiveXObject(xhrArr[i]);
}
catch(ex){

}
}
return xhr;
}else{
throw new Error('No XHR object availabel.')
}
}
//验证是否成功
var xhr2=creatXHR(),data;
// console.log(xhr2);

//第三步：响应XMLHttpRequest对象状态变化的函数
//onreadystatechange对象的功能是在readystate属性发生变化时触发
xhr2.onreadystatechange = function(){
//异步调用成功，响应内容解析完成，可以在客户端使用
if(xhr2.readyState===4){
if(xhr2.status >= 200 && xhr2.status < 300 || xhr2.status===304){
//第五步：获得服务器返回的数据,responseText得到的是字符串，用parse()把字符串转成对象，因为对象才具有code等这些返回的方法
// console.log(xhr2.responseText)
data=JSON.parse(xhr2.responseText);
//data=eval("("+xhr2.responseText+")");
//console.log(data.slider);
//第六步：渲染数据到页面中,渲染的函数提到onreadystatechange函数之外
renderDataToDom();
}
}
}

//第二步：创建url请求
xhr2.open('get','./server/slider.json',true);//true异步

//第四步：发送请求
xhr2.send(null);
//第六步分步，渲染数据
function renderDataToDom(){
var img=data.slider,i,
len=img.length,str="",
getBanner=document.getElementById('banner');
for(i=0;i<len;i++){
str+='<a href="'+img[i].linkUrl+'"><img src="'+img[i].picUrl+'"></a>';
}
// console.log(str);
// 把数据渲染到DOM中
banner.innerHTML=str;
}

//jq的$.ajax();
$.ajax({
url:"./server/slider.json",//请求地址
type:"post", //请求方式
async:true, //同步异步
dataType:"json", //数据格式
success:function(imgData){ //请求成功的回调函数
jQrenderDataToDom(imgData.slider);
}
})
//jq数据渲染
function jQrenderDataToDom(data){
var str="";
//each()方法http://file.mukewang.com/class/assist/800/6299649/1sfyfz9q181/each%E6%96%B9%E6%B3%95.pdf
$.each(data,function(index,obj){
str+='<a href="'+obj.linkUrl+'"><img src="'+obj.picUrl+'"></a>';
})
//把返回的数据挂到页面中
$("#banner_jq").html(str);
}

//封装JSONP
function getJSONP(url,calback){
if(!url){
return;
}
//1、声明数组用来随机生成函数名
var a=['a','b','c','d','e','f','g','h','i','j']
rand1=Math.floor(Math.random()*a.length),
rand2=Math.floor(Math.random()*a.length),
rand3=Math.floor(Math.random()*a.length);
name='getJSONP'+a[rand1]+a[rand2]+a[rand3];
cbname='getJSONP.'+name;
//console.log(cbname);
//2、判断url地址中是否含有问？号
if(url.indexOf('?')===-1){
url+='?jsonp'+cbname;
}else{
url+='&jsonp'+cbname;
}
//3、动态创建script标签
var script=document.createElement('script');
//5、定义被脚本执行的回调函数
getJSONP[name]=function(data){
try{
calback && calback(data);
}catch(e){

}finally{
//最后删除该函数的script
delete getJSONP[name];
script.parentNode.removeChild(script);
}
}
//4、定义script的src
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
getJSONP('http://class.imooc.com/api/jsonp',function(data){
console.log(data);
});
</script>
</body>
</html>