手动封装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 ...
随机推荐
- 如何利用excel中的数据源制作数据地图
关于这个问题,制作数据地图的方法已不新奇,总体来说有这么几类方案: 一类方案:直接在excel里制作 优势:个人小数据量应用较为方便简单 缺点:需要熟悉VBA,且更强大的功能对VBA水平要求较高 1. ...
- 线程同步之 yield() wait()
yield()没有参数. sleep 方法使当前运行中的线程睡眼一段时间,进入不可运行状态,这段时间的长短是由程序设定的,yield 方法使当前线程让出CPU占有权,但让出的时间是不可设定的.yiel ...
- github
学习github的不错的资源 http://gitref.org/zh/index.html https://wuyuans.com/2012/05/github-simple-tutorial/#t ...
- hbase-site.xml中HBASE_CLASSPATH 的设置
http://www.dataguru.cn/thread-95064-1-1.html
- Linux 进程间通讯详解二
消息队列 --消息队列提供了本机上从一个进程向另外一个进程发送一块数据的方法 --每个数据块都被认为有一个类型,接收者进程接收的数据块可以有不同的类型值 --消息队列也有管道一样的不足,就是每个消息的 ...
- Spring源码分析——资源访问利器Resource之接口和抽象类分析
从今天开始,一步步走上源码分析的路.刚开始肯定要从简单着手.我们先从Java发展史上最强大的框架——Spring...旗下的资源抽象接口Resource开始吧. 我看了好多分析Spring源码的,每每 ...
- Libsvm Matlab 快速安装教程 (适用于Win7+, 64bit, and Matlab2016a+)
近日在开始学习Machine Learning SVM 相关算法,将Matlab平台安装SVM的步骤记录如下,亲测可用: 开发环境: Windows 8 64 bit, Matlab 2016a, S ...
- .net Core学习笔记:Windows环境搭建
1.安装 VS2015 Update3.如果已经安装了VS2015,但不是Update3版本,请在VS的工具 --> 扩展与更新 中执行update3的升级(大约需要2小时). 2..net C ...
- RequireJS中的require如何返回模块
requirejs中定义AMD模块规则如下: define(function(){ var ProductManager={ Create:function(){ console.log(" ...
- 在oracle中,如何当前系统时间往前推7天
' day from dual 另附: 当前时间减去7分钟的时间 ' MINUTE from dual 当前时间减去7小时的时间 ' hour from dual 当前时间减去7天的时间 ' day ...