<!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. [GO]断言

    使用if实现断言 package main import "fmt" type Student struct { name string id int } func main() ...

  2. 编写高质量代码改善C#程序的157个建议——建议79：使用ThreadPool或BackgroundWorker代替Thread

    建议79:使用ThreadPool或BackgroundWorker代替Thread 使用线程能极大地提升用户体验度,但是作为开发者应该注意到,线程的开销是很大的. 线程的空间开销来自: 1)线程内核 ...

  3. gitlab发送邮件配置

    在使用gitlab过程中,通常需配置邮件来实现代码管理服务器向成员(member)发送邮件.本文将实现gitlab中邮件配置 1.编辑 /etc/gitlab/gitlab.rb,修改配置邮件,这里以 ...

  4. C#中遇到的方法总结

    1.Select(string filterExpression, string sort)  // 获取按照指定的排序顺序且与筛选条件相匹配的所有 System.Data.DataRow 对象的数组 ...

  5. C/C++ Pthread线程

    线程按照其调度者可以分为用户级线程和核心级线程两种 用户级线程主要解决的是上下文切换的问题,它的调度算法和调度过程全部由用户自行选择决定,在运行时不需要特定的内核支持: 我们常用基本就是用户级线程,所 ...

  6. Java50道经典习题-程序2 输出素数

    题目:判断101-200之间有多少个素数,并输出所有素数 分析:判断素数的方法:用一个数分别去除2到(这个数-1)的数,如果能被整除,则表明此数不是素数,反之是素数. public class Pro ...

  7. java-03 变量与运算符

    1.java中的变量与常量 1.1 变量的定义: 变量,顾名思义就是会变的量,这种思想来源于数学,指的是一个不确定的量或者随时会改变的量. 在我们进行编程的过程中,有一些东西是会随着实际情况而发生变化 ...

  8. 腾讯云通信UserSig生成.Net实现

    腾讯云通信后台生成usersig只有java实现代码.以下是根据java代码转换为net实现,java版GitHub地址:https://github.com/TencentVideoCloudMLV ...

  9. mvn install 报错Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:2.3.2 错误: 找不到符号

    报错信息 在Eclipse中执行mvn install时,console端显示如下报错信息: [ERROR] Failed to execute goal org.apache.maven.plugi ...

  10. 1.Javascript简介

    web前端有三层: HTML:从语义的角度,描述页面的结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) 历史背景介绍 布兰登 艾奇 199 ...