封装通用的xhr对象(兼容各个版本)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ajax</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 type="text/javascript">
// 封装通用的xhr对象,兼容各个版本
function createXHR(){
//判断浏览器是否将XMLHttpRequest作为本地对象实现,针对IE7,火狐,欧朋等
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.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 available')
}
}
//XHLHttpRequest对象 (第一步)
var xhr=createXHR(),data=null;
// 响应XMLHttpRequest对象函数状态变化的函数,onreadystatechange在readystatuschange在readystatechange属性发生改变时触发
//(第三步)
xhr.onreadystatechange=function(){
// 异步调用成功,响应内容解析完成,可以在客户端调用
if(xhr.readyState===4){
if((xhr.status>=200 && xhr.status<300) || xhr.status===304){
//第五步
// 获得服务器返回的数据
data=JSON.parse(xhr.responseText);
//渲染数据到页面中
renderDataToDom();
}
}
}
//创建请求 (第二步)
xhr.open("get","./server/slider.json",true);
// 发送请求(第四步)
xhr.send(null);
//渲染数据
function renderDataToDom(){
var img=data.slider,i,
len=img.length,
str="",
banner=document.getElementById("banner");
for(i=0;i<len;i++){
str+='<a href="'+img[i].linkurl+'"><img src="'+img[i].picUrl+'"></a>';
}
banner.innerHTML=str;
}
// jQuery中的ajax();
$.ajax({
url:"./server/slider.json",
type:"post",
async:true,
dataType:"json",
success:function(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'],
r1=Math.floor(Math.random()*10),
r2=Math.floor(Math.random()*10),
r3=Math.floor(Math.random()*10),
name='getJSONP'+a[r1]+a[r2]+a[r3],
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(e){
}finally{
// 最后删除该函数及script标签
delete getJSONP[name];
script.parentNode.removeChild(script);
}
}
//定义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>
