<!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. Selenium运用-漫画批量下载

    今天我们要爬去的网站是http://comic.sfacg.com/.漫画网站一般都是通过JavaScript和AJAX来动态加载漫画的,这也就意味着想通过原来爬取静态网站的方式去下载漫画是不可能的, ...

  2. Sublime Text 3 -mac简体中文汉化包下载及教程

    Sublime Text 3下载 官方下载地址:http://www.sublimetext.com/3 汉化包链接 1.将上面要求下载的sublime_text_3.zip 文件解压,得到的Defa ...

  3. MySQL 存储过程和存储函数学习

    #一.存储过程和存储函数的创建案例 CREATE PROCEDURE myprocedure(in a int,in b int ,OUT c INT) BEGIN set c=a+b; end; c ...

  4. [GO]使用select实现超时

    package main import ( "fmt" "time" ) func main() { ch := make(chan int) quit := ...

  5. C# 进程Process基本的操作说明

    public int CallPhoneExe(string arg) //arg为进程的命令行参数 { WaitHandle[] waits =new WaitHandle[2]; //定义两个Wa ...

  6. MATLAB搬移到别的电脑出现License Manager Error -9

    是注册码的问题,不需要重装,主要是以前的安装包不见了.解决办法: 下一个KeyGen的MLMCrypt.exe文件.运行之后在当前目录下出现一个LICENSE.DAT文件. 复制到matlab.exe ...

  7. 12306GT多线程、分流免费抢票工具使用心德

    大事记背景 我相信很多远游他乡的朋友每逢佳节都会遇到一个难题,就是购票难,这个难题有多难呢?经常在12306官网购票的小伙伴应该知道每个地方的放票时间是不一样的,但是逢年过节的那几天即使你在放票几分钟 ...

  8. 第二章第一个项目——package.json

    在其中写版本好的时候, { "name": "chatroom", "version": "0.0.1", " ...

  9. 走进AOP In .NET

    AOP是什么,有的译为面向方面编程,有的译为面向切面编程,我更加赞同后者.接下来,让我们一步步揭开AOP的面纱. AOP衍生自 编程中出现了一些用OOP技术无法捕捉和解决的问题.跟其他开发工具和思想一 ...

  10. rabbitmqBat常用指令

    激活 RabbitMQ's Management Pluginrabbitmq-plugins.bat enable rabbitmq_management 查看已有用户及用户的角色rabbitmqc ...