手动封装js原生XMLHttprequest异步请求
Code
Object.extend =function(targetObj,fnJson){
//扩展方法,类似于jQuery的$.extend,可以扩展类的方法,也可以合并对象
for(var fnName in fnJson){
targetObj[fnName]=fnJson[fnName];
}
return targetObj;
}; HttpAjax = (function(){
function HttpAjax(options){
var settings={
type:'post', //请求类型
url:'', //请求地址
data:{"id":-1}, //json格式的参数
success:function(){},//成功的回调函数
failure:function(){},//失败的回调函数
isAsyn:true //是否为异步
};
this.options = Object.extend(settings,options); Object.extend(HttpAjax.prototype,{
_createXhr:function(){
if (typeof XMLHttpRequest !== 'undefined') {
return new XMLHttpRequest();
}
else if (typeof ActiveXObject !== 'undefined') {
var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'];
for (var i = 0, len = versions.length; i < len; i++) {
try {
var xhr = new ActiveXObject(versions[i]);
this.IsCreateOk = versions[i];
return xhr;
}
catch (e) { }
}
if (typeof this.IsCreateOk === 'undefined') {
throw new Error("您的浏览器版本过低,无法创建异步对象,请升级您的浏览器!");
}
}
},
_encodeData:function(paramters){
var data = [];
for (var name in paramters) {
//将数组中的数据以=拼接后再添加到data数组中 [name=aa,age=11]
var _regesp = /%20/g; //空格的正则表达式
var _value = paramters[name].toString(); //获取值
data.push(encodeURIComponent(name).replace(_regesp, '+') + "=" + encodeURIComponent(_value).replace(_regesp, '+'));
}
//以&将数组元素拼接后返回 如:name=aa&age=11
return data.join("&");
},
_regCallback:function(xhr){
var _this=this;
xhr.onreadystatechange = function(){
if (xhr.readyState == 4) {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 300) {
_this.options.success(_this._getResponseData(xhr), xhr.statusText);
} else {
_this.options.failure(xhr.status, xhr.statusText);
}
}
}
},
_getResponseData:function(xhr){
var responseType = xhr.getResponseHeader("Content-Type");
switch (responseType) {
case 'text/xml':
return xhr.responseXML;
case 'text/json':
case 'text/javascript':
case 'application/javascript':
case 'application/x-javascript':
return eval('(' + xhr.responseText + ')');
default:
return xhr.responseText;
};
},
_init:function(options){
this.options=options;
if(this.options.url=="") return;
this.xhr = this._createXhr();//创建异步对象
this._regCallback(this.xhr);//注册回调事件 //根据请求类型,发送异步请求
if(this.options.type.toLowerCase()=="post"){
this._post(this.xhr);
}
else{
this._get(this.xhr);
}
},
_post:function(xhr){
this.xhr=xhr;
this.data=this._encodeData(this.options.data);
this.url=this.options.url+"?d=" + parseInt(Math.random()*100+1,10);
this.asyn=!!this.options.isAsyn; xhr.open("POST", this.url, this.asyn);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(this.data);
},
_get:function(xhr){
this.xhr=xhr;
this.data=this._encodeData(this.options.data);
this.url=this.options.url+'?' + this.data + '&d=' + parseInt(Math.random()*100+1,10);
this.asyn=!!this.options.isAsyn; xhr.open('GET', this.url, this.asyn);
xhr.send(null);
}
});
this._init(this.options);
};
return HttpAjax;
})(window);
Code// 调用示例:
var ss = new HttpAjax({//get
type:"get",
url:"testAjax.php",
data:{"name":'Jack'},
success:function(data){
console.log(data);
},
failure:function(data){
console.log(data);
},
isAsyn:false
}); console.log(new HttpAjax({//post
type:"post",
url:"testAjax.php",
data:{"name":'Bob'},
success:function(data){
console.log(data);
},
failure:function(data){
console.log(data);
}
})); new HttpAjax({//post
type:"post",
url:"testAjax.php",
data:{"name":'Bob'},
success:function(data){
console.log(data);
},
failure:function(data){
console.log(data);
}
}); new HttpAjax({//post
type:"post",
url:"testAjax.php",
data:{"name":'Stack'},
success:function(data){
console.log(data);
},
failure:function(data){
console.log(data);
}
});
Code//请求:
testAjax.php?name=Jack&d=21 GET 200
testAjax.php?d=85 POST 200
testAjax.php?d=46 POST 200 //返回结果:
name:Jack index.htm:134
name:Stack index.htm:159
name:Bob // 待完善的地方:
添加默认参数:cache //是否允许缓存
添加两个监测状态的事件:beforeSend 、complete // php后台
<?php
header("Content-Type:text/html; charset=utf8");
echo "name:".$_REQUEST['name'];
?>
手动封装js原生XMLHttprequest异步请求的更多相关文章
- js多个异步请求
一,两个(或多个)js异步并发执行,怎么在两个AJax异步操作之后执行一个新的操作 原题来自 ES6 方法 1.Promise 包装异步ajax操作,2.定义async 函数,3.用await等待pr ...
- js fetch处理异步请求
以往一直认为异步请求只能使用原生js的XMLHttpRequest或jQuery的$.ajax().$.post()等框架封装的异步请求方法 原来js还提供fetch来替代XMLHttpRequest ...
- js 原生 ajax 异步上传图片
<script type="text/javascript"> function upload() { var file1 = document.getElementB ...
- libcurl的封装,支持同步异步请求,支持多线程下载,支持https
最近在做一个项目,需要用到http get post等 需求分析需要做到同步和异步,异步请求的返回以可选的回调通知的方式进行. 本人以Linux为例,一步一步的来实现. 配置并且编译libcurl我以 ...
- 原生ajax异步请求基础知识
一.同步交互与异步交互的概念: * 同步交互:客户端向服务器端发送请求,到服务器端进行响应,这个过程中,用户不能做任何其他事情(只能等待响应完才能继续其他请求). * 异步交互:客户端向服务器端发送请 ...
- js多个异步请求,按顺序执行next
在js里面,偶尔会遇见需要多个异步按照顺序执行请求,又不想多层嵌套,,这里和promise.all的区别在于,promise或者Jquery里面的$.when 是同时发送多个请求,一起返回,发出去的顺 ...
- javascript js原生ajax post请求 实例
HTML代码: 注意: xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencod ...
- js实现所有异步请求全部加载完毕后,loading效果消失
在实际开发中,一定有情况是这样的,一个页面我们有多个地方请求了ajax,在这种情况下,我们要实现数据没来之前出现我们炫酷的loading效果,而且要等到所有的ajax都请求完毕后,才让我们的loadi ...
- JS原生对象实现异步请求以及JQ的ajax请求四种方式
一.JS原生方式异步请求 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="A ...
随机推荐
- 《InsideUE4》-5-GamePlay架构(四)Pawn
<InsideUE4>-5-GamePlay架构(四)Pawn Tags: InsideUE4 我像是一颗棋 进退任由你决定 我不是你眼中唯一将领 却是不起眼的小兵 引言 欢迎来到Game ...
- poj2478 Farey Sequence (欧拉函数)
Farey Sequence 题意:给定一个数n,求在[1,n]这个范围内两两互质的数的个数.(转化为给定一个数n,比n小且与n互质的数的个数) 知识点: 欧拉函数: 普通求法: int Euler( ...
- 【2016-11-6】【坚持学习】【Day21】【子窗口关闭时,同步关闭它的主窗口(方法二)】
根据上文,在子窗口设置一个委托.然后在子窗口关闭事件,执行委托实例,然后在主窗口增加监听委托的方法.... 想想,本事关闭事件就是一个特殊的委托.那么干嘛还要特意去声明一个新的呢?多此一举. 于是有下 ...
- codevs2178 表达式运算Cuties[笛卡尔树]
2178 表达式运算Cuties 时间限制: 1 s 空间限制: 32000 KB 题目等级 : 大师 Master 题解 查看运行结果 题目描述 Description 给出一个表达 ...
- JPA中entityManager的CRUD
private EntityManagerFactory entityManagerFactory; private EntityManager entityManager; private Enti ...
- java程序设计线程池(newCachedThreadPool())
创建一个无界的可缓存的线程池,若线程长时间没用会自动销毁,直接上代码好了: import java.util.concurrent.ExecutorService; import java.util. ...
- JS当心隐式的强制转换
JavaScript对类型错误出奇的宽容 3 + true; // 4 null + 3; // 3 运算符+(加号)的重载 运算符+既重载了数字相加,又重载了字符串连接操作.具体是数字相加还是字符串 ...
- knockoutJS学习笔记07:绑定上下文
所谓绑定上下文就是当前绑定(dat-bind)所使用到的对象(ViewModel).在单个对象绑定的情况下是很容易理解的,但对象可能是复杂的类型,嵌套很多层,这个时候每层都有自己的上下文对象,理解起来 ...
- 备忘:mybatis 3的使用记录
这是一篇记录.mybatis是一个部分模仿ORM的framework.是一个介于ORM和原始JDBC的框架.既可以提供ORM的操作对象的特性,又能从详细地控制最终的SQL.达到一个平衡.我们还是得写s ...
- ECharts学习(1)--简单图表的绘制
1.获取ECharts 官网 下载:http://echarts.baidu.com/download.html 2.在html页面中引入ECharts文件 <!DOCTYPE html> ...