为什么标签没被删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>123</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="banner" id="banner"></div>
<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'
];
//遍历创建XMLHttpRequest对象
var len = xhrArr.length;
for (var i = 0; i < len; i++) {
try {
//创建XMLHttpRequest对象
xhr = new ActiveXObject(xhrArr[i]);
//如果创建XMLHttpRequest对象成功,则跳出循环
break;
} catch (ex) {}
}
} else {
throw new Error("No XHR object available.");
}
}
var xhr = createXHR(),
date = null;
//响应XMLHttpRequest对象状态变化的函数
//在我们readystate 属性发生改变时候
// xhr.onreadystatechange = function () {
// //异步调用成功
// if (xhr.readyState === 4) {
// if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
// //获得服务器返回的数据
// //evel 转换为js来使用
// date = JSON.parse(xhr.responseText);
// // console.log(date.slider);
// //渲染数据到页面中
// renderDataToDom();
// }
// }
// };
//创建http请求
// xhr.open('get', './ser/se.json', true);
//发送http请求
// xhr.send(null);
// function renderDataToDom() {
// var img = date.slider,
// i,
// banner = document.getElementById("banner"),
// str="";
// len = img.length;
// for (i = 0; i < len; i++) {
// str+= '<a href="./'+img[i].linkUrl+'"><img src="./'+img[i].picUrl+'"></a>'
// }
// banner.innerHTML=str;
// console.log(banner);
// }
//jq的封装
$.ajax({
url: "./ser/se.json", //请求地址
type: "get", //请求的方式
async: true, //同步异步
dataType: "json", //请求的数据格式
success: function (imgDate) { //请求成功
// JQrenderDataToDom(imgDate.slider)
//渲染数据
var str = "";
$.each(imgDate.slider, function (index, obj) {
str += '<a href="./' + obj.linkUrl + '"><img src="' + obj.picUrl + '"></a>';
})
$("#banner").html(str)
}
})
//渲染数据
// function JQrenderDataToDom(date) {
// var str = "";
// $.each(date, function (index, obj) {
// str += '<a href="' + obj.linkUrl + '"><img src="' + obj.picUrl + '"></a>';
// })
// $("#banner").html(str)
// }
//json封装
function getJsonp(url, callback) {
if (!url) {
return;
}
//声明数组 用来 随便生成函数名
var a = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n'],
r1 = Math.floor(Math.random() * a.length),
r2 = Math.floor(Math.random() * a.length),
r3 = Math.floor(Math.random() * a.length),
//name中的引号部分是可以任意命名的
name = 'json.'+a[r1]+a[r2]+a[r3],
//在服务器断传回来这个getJsonp属性,所有引号的内容要和封装的function函数名一致并且加个.
cbname = 'getJsonp.'+name;
// console.log(cbname);
//判断url地址有没有?号
if(url.indexOf('?')=== -1){
url+='?jsonp='+cbname;
}else{
url+='&jsonp='+cbname;
}
//创建script标签
var script = document.createElement('script');
//定义被执行脚本的回调函数
getJsonp[name]=function(data){
try {
callback && callback(data)
} catch (error) {
}finally{
delete getJsonp[name];
script.parentNode.removeChild(script);
}
}
//将url地址添加到src里面
script.src=url;
//将script添加到head下面
document.getElementsByTagName('head')[0].appendChild(script);
}
getJsonp('http//www.baidu.com',function(){});
</script>
</body>
</html>
正在回答 回答被采纳积分+1
同学你好, 因为代码书写有问题,所以无法删除。具体可以参考如下解析
跨域请求的规则是针对指定链接的,并不是随随便便就可以跨域请求到资源的,同学粘贴的代码想要跨域请求百度的资源,是需要经过百度同意,根据他们的规则来书写回调函数的名称是什么的。
老师视频中讲解的跨域方式是针对http://class.imooc.com/api/jsonp这个链接的,所以推荐同学目前学习使用这个链接进行测试。
如下所示,引号部分内容确实是可以任意命名的,但并不是说前端人员随意命名的,需要与后台商量具体命名规则。针对视频中的链接函数名中不可以添加点
调整之后,可以输出返回的数据,并查看是否已经删除了script标签,示例:
打印结果如下:可以正常访问到数据
html结构中添加的script标签也已经删除了
如果我的回答帮助到了你,欢迎采纳,祝学习愉快~
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星