封装通用的xhr对象(兼容各个版本)

最新推荐文章于 2024-06-17 21:45:36 发布
最新推荐文章于 2024-06-17 21:45:36 发布
阅读量375 收藏
点赞数
文章标签： javascript json ViewUI
原文链接：http://www.cnblogs.com/JankinLiu/p/10354229.html
版权
<!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>

转载于:https://www.cnblogs.com/JankinLiu/p/10354229.html

aolohzd52984
关注
在JavaScript中代理提供了一种拦截对象行为的机制，其提供了两种类型的代理，分别为函数代理和属性代理
AI天才研究院
07-31 1567
在JavaScript中代理提供了一种拦截对象行为的机制，其提供了两种类型的代理，分别为函数代理和属性代理。函数代理可以用来控制方法的调用方式、返回值等；属性代理则可以用来实现对对象的属性访问、设置、枚举等过程的控制。在很多情况下，使用代理可以有效地提升应用的灵活性、可扩展性和可测试性。本文将通过两个典型案例来展示JavaScript中的代理，包括函数代理和属性代理。
js文件上传原理（form表单 ，FormData + XHR2 + FileReader + canvas）
02-17 1000
目录 form表单上传 FormData + XHR2 + FileReader + canvas 无刷新本地预览压缩上传实例 目前实现上传的方式 浏览器小于等于IE9(低版本浏览器)使用下面的方式实现的 flash实现（主流插件的方式，本文不涉及） form + iframe（项目中很少用到，本文不涉及） form表单提交的方式是所有浏览器都支持的，借助iframe是为了实现不...
XHR的简单封装xr.zip
07-19
xr 是 XMLHttpRequest 的超简单封装，并返回 ES6 Promise。示例代码：xr.get('/api/items', {take: 5})   .then(res => console.log(res.data)); xr.post('/api/item', {name: 'hello'})   .then(res => console.log("new item", res.data)); xr({   method: xr.Methods.GET,   url: '/api/items',   params: {take: 5},   events: {     progress: (xhr, xhrProgressEvent) => {       console.log("xhr", xhr);       console.log("progress", xhrProgressEvent);     }   } });
封装XHR
weixin_57653722的博客
05-12 501
// 1.把参数进行处理 // 1.1 拼接为特定格式字符串！ // 1.2 需要对字符串处理 encodeURI(); let str="name=张三&age=18"; str = encodeURI(str); console.log(str); // 没有%？只能中文!传输数据编码格式 urlencoded 只支持ASCII; // 2.xhr实例化 let xhr = new XMLHttpRequest(); // 3.设置方式，url // 3.1 get x.
封装XHR对象
Lz_King的博客
11-28 515
封装XHR对象     function getXhr() {         // 声明XMLHttpRequest对象         var xhr = null;         // 根据浏览器的不同情况进行创建         if (window.XMLHttpRequest) {             // 表示除IE外的其他浏览器          
js封装xhr【重复造轮子】
weixin_34111819的博客
01-08 224
仿jquery ajax，不过功能没那么多。贴代码 --------------------------------------分割线------------------------------------------ //MyXhr对象 var MyXhr = function(config){ this.config = config; var that = th...
Axios 简版：XHR 的封装、函数和对象方式的请求、添加过滤器
Lovely Ruby 的手账
07-31 1198
文章目录简版 Axios目标说明目标1：实现基本请求、及多种调用方法类实例化函数式调用对象式调用添加过滤器附 简版 Axios 目标说明 实现 axios 的函数式调用、对象式调用、拦截器的实现等 目标1：实现基本请求、及多种调用方法 类实例化 如果前端想这么调用的话 首先写个简单的类，把 xhr 封装一下 class MyAxios { constructor() {} request(config) { return new Promise((resolve, re
XMLHttpRequest对象详解与AJAX通信实践
随着标准的推进，现代浏览器已经统一了实现，但在老版本的IE中仍需考虑ActiveX的兼容性。 在实际应用中，应该使用封装好的模块，如上文提到的ServerAccessObject，以确保在不同浏览器环境下的稳定性和一致性。这样...
浏览器内置对象/事件/ajax
baidu_24293811的博客
09-21 577
浏览器内置对象/事件/ajax 浏览器是一个 JS 的运行时环境，它基于 JS 解析器的同时，增加了许多环境相关的内容。用一张图表示 各个运行环境和 JS 解析器的关系如下: 我们把常⻅的，能够用 JS 这⻔语言控制的内容称为一个 JS 的运行环境。常⻅的运行环境有 Node.js， 浏览器，小程序，一些物联网设备等等。所有的运行环境都必须有一个 JS 的解释器，在解释器层面符合 ECMAScript 规范，定义了 JS 本身语言层面的东⻄比如关键字，语法等等。 在每个环境中，也会基于 JS 开发一些当前
Ado_使用ADO封装类的数据库程序开发实例[参考].pdf
10-11
然而，封装类的实现需要充分考虑异常处理、资源管理以及不同数据库操作的通用性，以确保封装类的健壮性和灵活性。 总之，ADO提供了一种强大且灵活的方式来访问和操作数据库，而通过封装ADO类，我们可以进一步提升...
xhr简单封装ajax
weixin_小白鼠的博客
04-18 389
xhr简单封装ajax // 设置默认值 const defaults = { type: "get", url: "", async: true, data: {}, header: { ​ "Content-Type": "application/x-www-form-urlencoded", }, success: function () {}, error: function () {}, }; function dealParams(d
获取XHR 兼容所有
phillip318的专栏
07-10 296
var xmlhttp; function loadXMLDoc(url) { xmlhttp=null; if (window.DOMparser)   {// code for all new browsers   xmlhttp=new XMLHttpRequest();   } else if (window.ActiveXObject)   {// code for I
AJax(XHR+Get和Post+AJax的封装)
刘大猫
04-23 1436
目标: ㈠ XMLHttpRequest ㈡GET 与 POST ㈢封装 Ajax 一、 XMLHttpRequest Ajax 技术核心是 XMLHttpRequest 对象(简称 XHR), Ajax指向服务器请求额外的数据而无须卸载页面(即刷新) 创建 XHR 对象可以直接实例化 XMLHttpRequest 即可。 var xhr = new XMLHttpRequest(); 在使用 ......
根据XHR封装一个自己的Ajax
benlalagang的博客
08-03 197
封装自己的AJAX函数
xhr：轻量级的XMLHttpRequest封装库
gitblog_00094的博客
05-09 408
xhr：轻量级的XMLHttpRequest封装库 xhrA small xhr wrapper项目地址:https://gitcode.com/gh_mirrors/xh/xhr xhr是一个小巧的JavaScript库，它对原生的XMLHttpRequest进行了封装，使你在浏览器环境下能够更方便地发送HTTP请求。与流行的request库兼容，xhr为Node.js和浏览器环境提供了一致的...
使用xhr封装axios
liguangda的博客
11-12 268
<body> <button id="btn1">按钮1</button> <button id="btn2">按钮2</button> <script> oBtn1 = document.getElementById('btn1'); oBtn2 = document.getElementById('btn2'); function axios({
XHR+Promise五分钟学会封装一个属于自己的axios
最新发布
jk0025的博客
06-17 823
XHR+Promise五分钟学会封装一个属于自己的axios
js高阶编程之---单例模式,XHR兼容 (惰性思想)
qq_42514643的博客
07-17 195
高级js编程,惰性思想:能做一次的,就不会做多次. 项目中的单例模式(惰性思想_案例1) var utils =(function(){ // 这就最简单的惰性思想运用,由于下面我很多方法都会来判断是否兼容ie6~8; //所以第一次自执行函数的时候就做了判断, var flag = 'getComputedStyle' in w...
从XHR、Promise到手动封装简易axios
CaptainDrake的博客
07-18 1182
从XHR、Promise到手动封装简易axios
理解Ajax：原理与XHR对象详解
主要内容涵盖了Ajax的基本原理，如何使用XMLHttpRequest（XHR）对象进行异步数据交互，以及XHR对象的创建、属性和方法。文档还提供了简单的PHP和HTML示例来解释Ajax的工作流程。 Ajax（Asynchronous JavaScript and...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值