<!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. 并查集 - 1611 The Suspects

    题目地址: http://poj.org/problem?id=1611 分析: - 数据结构 - parent[x] 表示 x 元素的父节点位置. - rank[x] 记录x的子链的长度, 以便在合 ...

  2. [GO]接口的转换

    package main import "fmt" type Humaner interface { //子集 SayHi() } type Personer interface ...

  3. HDU 6069 Counting Divisors (素数+筛法)

    题意:给定 l,r,k,让你求,其中 l <= r <= 1e12, r-l <= 1e6, k <= 1e7. 析:首先这个题肯定不能暴力,但是给定的区间较小,可以考虑筛选, ...

  4. Linq基础操作之Select,Where,OrderBy,ThenBy源码分析

    Linq基础操作之Select,Where,OrderBy,ThenBy源码分析 二:Select 它是延迟执行.yield有得一拼,因为他们都是生成了一个枚举类. if (source is TSo ...

  5. mybatis-初步使用

    最近因为业务各方面的原因,需要使用mybatis,所以系统的学习和总结下. 其实mybatis出来已经很久了,貌似大家伙用得也挺顺手的样纸,好歹我先不评价,还是先了解了解mybatis的样纸,后续再添 ...

  6. [Erlang16]为什么要用MFA代替fun()–>end?

    MFA:Module Function Arguments. 首先你要知道Module:Func(Args)和Func(Args)的区别在哪里? 如果对细节感兴趣,可以通过这里了解:http://ww ...

  7. 清除clusternode

    Import-Module FailoverClusters then clear-clusternode

  8. day02.5-集合内置方法

    集合——set的定义:test = {1,2,3,4,5} 或 test = frozenset(1,2,3,4,5) 特点:1. 集合是可变数据类型 2. 集合中元素是无序的,可以是数字.字符串与元 ...

  9. AcWing 153. 双栈排序

    https://www.acwing.com/problem/content/155/ #include <cstring> #include <iostream> #incl ...

  10. jQuery展开收缩2

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...