原生ajax函数封装
原生ajax函数
function ajax(json){
json=json || {};
if(!json.url){
return;
}
json.data=json.data || {};
json.type=json.type || 'get';
var xmlhttp = null;
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject('Microsoft.XMLHTTP'); //兼容IE
}
//将data转换成字符串
var arr = [];
for(var key in json.data){
arr.push(key + "=" + json.data[key]);
}
var postData = arr.join("&");
json.type = json.type.toUpperCase();
if(json.type === "GET"){
xmlhttp.open(json.type, json.url+'?'+postData+"&time=" +Math.random(), true);
xmlhttp.send();
}else{
xmlhttp.open(json.type, json.url, true);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=utf-8');
xmlhttp.send(postData);
}
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState === 4){
if(xmlhttp.status>=200 && xmlhttp.status<300 || xmlhttp.status==304){
json.success && json.success(xmlhttp.responseText);
}else{
json.error && json.error(xmlhttp.status);
}
}
};
}
使用方法举例:
ajax({
url: '/login',
data: {user: oUser.value, pass: oPass.value},
success: function (str){
var json=eval('('+str+')');
if(json.ok){
alert('登录成功');
}else{
alert('失败:'+json.msg);
}
},
error: function (){
alert('通信失败');
}
});
原生ajax函数封装的更多相关文章
- 原生ajax与封装的ajax使用方法
当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...
- Ajax入门(二)Ajax函数封装
如果看了的我上一篇博客<Ajax入门(一)从0开始到一次成功的GET请求>的话,肯定知道我们已经完成了一个简单的get请求函数了.如下: 1234567891011121314151617 ...
- js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用)
js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用) 一.总结 2.匿名函数作为参数传递 二.js进阶ajax函数封装 ajax1.js function ajax(ur ...
- rxjs入门3之项目中ajax函数封装
项目中ajax函数封装 ⽹页应⽤主要数据源有两个:⼀个是⽹页中的DOM事件,另⼀个就是通过AJAX获得的服务器资源.我们已经知道fromEvent这个操作符可以根据DOM事件产⽣Observable对 ...
- js原生Ajax 的封装和原理
原理及概念 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是一种用于创建快速动态网页的技术. 动态网页:是指可以通过服务器语言结合数 ...
- js原生Ajax的封装与使用
一.原生Ajax代码的封装如下: (function() { var XHR = { createStandardXHR: function() { return new XMLHttpRequest ...
- 原生Ajax函数
前言 在日常工作中,我经常使用Jquery的Ajax来获取接口数据.这几天有一个的官网要制作,由于网站比较小,有一些与服务器通信的接口处理,并没有涉及到复杂的交互功能.为了可以减少加载Jquery库的 ...
- 原生ajax解析&封装原生ajax函数
前沿:对于此篇随笔,完是简要写了几个重要的地方,具体实现细节完在提供的源码做了笔记 <一>ajax基本要点介绍--更好的介绍ajax 1. ajax对象中new XMLHttpReques ...
- 轻量级原生 ajax 函数,支持 get/array post/array post/json
原生js封装 function ajaxRequest(type, url, data, callback, failCallBack, header, dataType) { var url_enc ...
随机推荐
- IPv6地址分类及表示方法
对于IPv4地址,我们知道分为A类.B类.C类.组播地址和留用地址,几大类,ABC类地址中还会有不同功能的如广播地址.私有地址等类型.那么IPv6的地址是怎么分类的呢?本文就带大家初步了解一下. 先说 ...
- “The subscription does not exist” when a distributor primary replica fails over to a replica that does not use the same agent profile
Symptoms Consider the following scenario: In Microsoft SQL Server 2017, you have a distribution agen ...
- Win10正式企业版激活方法
Win10正式企业版激活方法 在正式开始激活Win10正式企业版系统之前,我们需要先查看一下当前Win10正式企业版系统的激活状态: 右击桌面左下角的“Windows”按钮,从弹出的右键菜单中选择“控 ...
- Java源码阅读的真实体会(一种学习思路)
Java源码阅读的真实体会(一种学习思路) 刚才在论坛不经意间,看到有关源码阅读的帖子.回想自己前几年,阅读源码那种兴奋和成就感(1),不禁又有一种激动. 源码阅读,我觉得最核心有三点:技术基础+强烈 ...
- NPS - 数字化营销 - 净推荐值
在获客成本高涨的时代,拥有一批超级用户,让企业更有本钱专注在提升产品及体验,创造更多的超级用户,形成良性循环.超级用户究竟要如何创造?超级用户可以定义成“忠诚用户当中最忠诚的一群人”,因此创造超级用户 ...
- [转java发送http的get、post请求]
Http请求类 package wzh.Http; import java.io.BufferedReader; import java.io.IOException; import java.io. ...
- SpringBoot------整合MyBatis
1.添加pom.xml需要的依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="htt ...
- Pointer-network的tensorflow实现-1
pointer-network是最近seq2seq比较火的一个分支,在基于深度学习的阅读理解,摘要系统中都被广泛应用. 感兴趣的可以阅读原paper 推荐阅读 https://medium.com/@ ...
- shell中uniq与sort -u 两种去重的对别
sort -u 和 uniq都能起到删除重复信息的功能,那么他们的区别究竟在哪呢?$ cat test jasonjasonjasonfffffjason 下面分别执行三个命 ...
- Visual Studio 2010 VS IDE 编辑界面出现绿色的点 去掉绿色的空格点
Visual Studio 2010 VS IDE 编辑界面出现绿色的点 去掉绿色的空格点 Vs乱按一顿忽然出现一堆绿色的点,我去好难看,还不知道什么鬼,查了查其实就是个 每个点表示一个空格 让他显 ...