<!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>

封装通用的xhr对象(兼容各个版本)的更多相关文章

  1. 深入理解ajax系列第一篇——XHR对象

    × 目录 [1]创建对象 [2]发送请求 [3]接收响应[4]异步处理[5]实例演示 前面的话 ajax是asynchronous javascript and XML的简写,中文翻译是异步的java ...

  2. [转]AppCompat 22.1,Goole暴走，MD全面兼容低版本

    AppCompat 22.1,Goole暴走,MD全面兼容低版本 分类: Android2015-04-24 09:48 1354人阅读 评论(0) 收藏 举报 android   目录(?)[+] ...

  3. ajax入门之建立XHR对象 (1)

    ajax入门之建立XHR对象 今天帮朋友写了一个简单的ajax的demo,发现了一些东西,决定写一篇文章记录一下,避免以后挖坑. 创建XMLHttpRequest 通常 function create ...

  4. 深入理解 ajax系列第一篇（XHR 对象）

    1999年,微软公司发布了IE5, 第一次引入新功能:允许javascript 脚本向服务器发起 hffp 请求.这个功能方式并没有被引起注意,知道2004年 Gmail 发布和 Google Map ...

  5. 转:AJAX中xhr对象详解

    XJAX ,并不是一种新技术的诞生.它实际上代表的是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用. 它包括: 使用XHTML和CSS标准化呈现: 使用DOM实现动态显示和交互: 使用XML ...

  6. 模拟实现兼容低版本IE浏览器的原生bind()函数功能

    模拟实现兼容低版本IE浏览器的原生bind()函数功能: 代码如下: if(!Function.prototype.bind){   Function.prototype.bind=function( ...

  7. Ajax原生XHR对象

    前端学了有一段时间了,在项目中我通常使用的都是jQuery封装好的Ajax函数($.ajax.$.get.$.post),使用非常的简单方便,但为了更清楚的了解Ajax,需要学习原生xhr对象.   ...

  8. fragment基础 fragment生命周期 兼容低版本

    fragment入门 ① 创建一个类继承Fragment 重写oncreateView方法 public class FirstFragment extends Fragment { @Overrid ...

  9. 免费IP代理池定时维护，封装通用爬虫工具类每次随机更新IP代理池跟UserAgent池，并制作简易流量爬虫

    前言 我们之前的爬虫都是模拟成浏览器后直接爬取,并没有动态设置IP代理以及UserAgent标识,本文记录免费IP代理池定时维护,封装通用爬虫工具类每次随机更新IP代理池跟UserAgent池,并制作 ...

随机推荐

  1. Perl 学习笔记－标量数据

    最近学习Perl, 准备看一遍入门指南,关键的东西还是记录下来,以便以后复习和查看参考． 笔记来自<<Perl语言入门第5版>> 1. 在Perl内部,不区分整数值和浮点数值, ...

  2. MicroRNA 详解

    MicroRNA研究历史和方法   Views 88 1Report

  3. 基于maven从头搭建springMVC框架

    0.准备工作 首先将eclipse和需要的插件准备好,例如maven插件,spring IDE插件. 1.建立maven下的webapp项目 1.新建一个maven项目,类型为webapp,如下图 2 ...

  4. overflow 在ie7下失效

    问题原因: 当父元素的后代元素的样式拥有position:relative属性时,父元素的overflow:hidden属性就会失效. 解决方法: 在父元素中使用position:relative;即 ...

  5. java GC机制（转）

    http://blog.csdn.net/zsuguangh/article/details/6429592 1. 垃圾回收的意义 在C++中,对象所占的内存在程序结束运行之前一直被占用,在明确释放之 ...

  6. python-字符串-技巧

    1.删除字符串末尾空白:rstrip函数 test1 = "This is a test " print(test1.rstrip()) 但是这种删除只是暂时的,如果想永久删除,则 ...

  7. 编写高质量代码改善C#程序的157个建议——建议148：不重复代码

    建议148:不重复代码 如果发现重复的代码,则意味着我们需要整顿一下,在继续前进. 重复的代码让我们的软件行为不一致.举例来说,如果存在两处相同的加密代码.结果在某一天,我们发现加密代码有个小Bug, ...

  8. Utimate Visual 2013 突然间无法新建项目工程解决

    问题: 我用的Win7 安装的VS2013,这一段时间用的好好的,突然间新建工程师向导页面跳转不过去... 解决: 参考:http://stackoverflow.com/questions/1225 ...

  9. Java实现四则运算---任路乾，乐滔

    1.GitHub地址:https://github.com/3116004700/ruanjiangongcheng 2.项目需求: 生成的题目中计算过程不能产生负数(完成) 生成的题目中如果存在形如 ...

  10. 原创：各种normalize函数实现的性能和精度大比拼

    ///////////////////////////////////////////////////////////////////////// // // Performance benchmar ...