手动封装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 ...
随机推荐
- 架构实例之Demo_JSP_JavaBean
架构实例之Demo_JSP_JavaBean 1.开发工具和开发环境 开发工具: MyEclipse10,JDK1.6.0_13(32位),Tomcat7.0(32位),mysql5.7.1 ...
- 《Invert》开发日志00:缘起
按照所有程序员的惯例,编号从0开始.本系列日志将记录一款独立游戏 发起->构思->设计->实现->完善->测试(如果需要)->上线->后期维护(如果有人玩) ...
- Hibernate选择题总结
Hibernate选择题总结 1.在Hibernate中,以下关于主键生成器说法错误的是( ). A.increment可以用于类型为long.short或byte的主键 B.identity用于如S ...
- 使用JS实现前端缓存
在前端浏览器中,有些数据(比如数据字典中的数据),可以在第一次请求的时候全部拿过来保存在js对象中,以后需要的时候就不用每次都去请求服务器了.对于那些大量使用数据字典来填充下拉框的页面,这种方法可以极 ...
- Error: Could not find the required version of the Java(TM) 2 Runtime Environment in'(null)'.
今天拿到一台新机器,搭一下开发环境,安装个JDK是个很基本的事情,从Orale的网站上下了个安装,但是一直出下面的错: 我信了你的邪,Google了一圈,有人说是可能文件下载有问题,重新下载安装就可以 ...
- Apache Shiro系列三,概述 —— 10分钟入门
一.介绍 看完这个10分钟入门之后,你就知道如何在你的应用程序中引入和使用Shiro.以后你再在自己的应用程序中使用Shiro,也应该可以在10分钟内搞定. 二.概述 关于Shiro的废话就不多说了 ...
- knockoutJS学习笔记09:使用mapping插件
一.问题引出 通常,我们先定义好html结构或者模板,通过ajax向后台发起请求,后台返回json数据,然后再将json数据渲染到页面上.以博客园个人博客里的个人信息为例子,如图: 1.定义html. ...
- 自己动手写插件底层篇—基于jquery移动插件实现
序言 本章作为自己动手写插件的第一篇文章,会尽可能的详细描述一些实现的方式和预备知识的讲解,随着知识点积累的一点点深入,可能到了后期讲解也会有所跳跃.所以,希望知识点不是很扎实的读者或者是初学者,不要 ...
- Android开发自学笔记(Android Studio)—4.界面编程与View组件简单介绍
一.引言 Android应用开发最重要的一份内容就是界面的开发,无论你程序包含的内容多么优秀,如若没有一个良好的用户交互界面,最终也只是会被用户所遗弃.Android SDK提供了大量功能丰富的UI组 ...
- manachor
在原字符串每个字符间各插入一个未曾出现的字符,在字符串头插入另一个未出现的字符防止越界,求出的p[i]-1既为以i为中心的最长回文串的长度 void manacher(){ ,id; ;i<=n ...