jquery封装的ajax方法为什么没有添加dom成功……
而且老师在视频中的控制台报错了也可以输出，我报了同样的错误但是无法输出，这是为什么？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ajax</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="banner" id="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">
//封装通用的xhr对象（即XMLHttpRequest对象）
//目的是兼容各个版本浏览器
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','MSXML.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0'];
//遍历创建XMLHttpRequest对象
var len = xhrArr.length,xhr;
for(var i=0;i<len;i++){
try{
//创建XMLHttpRequest对象
xhr = new ActiveXObject(xhrArr[i]);
break;
}
catch(ex){
}
}
return xhr;
}else{
throw new Error('NO XHR object availabel.')
}
}
//第一步：XMLHttpRequest对象
var xhr = createXHR(),data = null;
console.log(xhr);
//第三步（一般写在第二步上面）：设置响应XMLHttpRequest对象状态变化的函数
//onreadystatechange在readystatechange属性发生改变时触发。是用来监控整个readystatechange属性的。
xhr.onreadystatechange = function(){
//异步调用成功，响应内容解析完成，可以在客户端调用
//0表示还没有初始化（还没有调用send方法），1表示已经调用send方法，正在发送请求，2表示send方法已经执行完成，3表示正在解析响应的内容，4表示异步调用成功，
if(xhr.readyState === 4){
//status大于等于200且小于300表示异步调用成功，
//304表示请求资源没有被修改，可以使用浏览器的缓存（304表示之前请求成功过，并且这次请求的资源距离上次请求没有发生过改变）
if((xhr.status >=200 && xhr.status<300) || xhr.status ===304){
//向服务器发送了一个请求，服务器返回的数据存放在slider.json这个文件下。就可以获得服务器返回的数据。
//第五步：获得服务器返回的数据。
//data = eval("("+xhr.responseText+")");
//50行代码也可以写成如下形式：
data = JSON.parse(xhr.responseText);
//这是把JSON对象转成JS字符串：
//data = JSON.stringify(xhr.responseText); //undefined
console.log(data.slider);
//最后一步：渲染数据到页面中。
renderDataToDom();
}
}
}
//第二步：创建请求
xhr.open("get","./server/slider.json",true);
//第四步：发送HTTP请求
xhr.send(null); //不需要传参
//xhr.send({user:"zhangsan",id:6}); //需要传参
//设置http头部信息
//xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//渲染数据
function renderDataToDom(){
var img = data.slider,i,
len = img.length,str = "";
for(i=0;i<len;i++){
console.log(img[i]);
str += '<a href="'+img[i].linkUrl+'"><img src="'+img[i].picUrl+'"></a>';
}
console.log(str);
banner.innerHTML = str;
}
//jquery的$.ajax()方法，把所有的参数写在大括号当中
$.ajax({
url:"./server/slider.json", //请求地址
type:"post", //请求方法
async:true, //异步同步
dataType:"json", //从服务器返回的数据格式
success:function(imgData){ //当请求成功之后的回调函数
jQrenderDataToDom(imgData);
//console.log(imgData); //imgData相当于xhr.responseText获取到的数据
}
})
//渲染数据
function jQrenderDataToDom(data){
var str = "";
$.each(data,function(index,obj){
//console.log(obj);
str += '<a href="'+obj.linkUrl+'"><img src="'+obj.picUrl+'"></a>';
})
$("#banner_jq").html(str);
}
</script>
</body>
</html>
*{
margin: 0;
padding: 0;
}
.banner{
width: 600px;
height: 338px;
overflow: hidden;
position: relative;
margin: 50px auto;
}
.banner a{
display: block;
float: left;
width: 600px;
height: 338px;
}
.banner a img{
display: block;
width: 600px;
height: 338px;
}
其他文件都是资料中下载的源码，slider.json以及jquery.js
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星