原生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函数封装的更多相关文章

  1. 原生ajax与封装的ajax使用方法

    当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...

  2. Ajax入门(二)Ajax函数封装

    如果看了的我上一篇博客<Ajax入门(一)从0开始到一次成功的GET请求>的话,肯定知道我们已经完成了一个简单的get请求函数了.如下: 1234567891011121314151617 ...

  3. js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用)

    js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用) 一.总结 2.匿名函数作为参数传递 二.js进阶ajax函数封装 ajax1.js function ajax(ur ...

  4. rxjs入门3之项目中ajax函数封装

    项目中ajax函数封装 ⽹页应⽤主要数据源有两个:⼀个是⽹页中的DOM事件,另⼀个就是通过AJAX获得的服务器资源.我们已经知道fromEvent这个操作符可以根据DOM事件产⽣Observable对 ...

  5. js原生Ajax 的封装和原理

    原理及概念 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是一种用于创建快速动态网页的技术. 动态网页:是指可以通过服务器语言结合数 ...

  6. js原生Ajax的封装与使用

    一.原生Ajax代码的封装如下: (function() { var XHR = { createStandardXHR: function() { return new XMLHttpRequest ...

  7. 原生Ajax函数

    前言 在日常工作中,我经常使用Jquery的Ajax来获取接口数据.这几天有一个的官网要制作,由于网站比较小,有一些与服务器通信的接口处理,并没有涉及到复杂的交互功能.为了可以减少加载Jquery库的 ...

  8. 原生ajax解析&封装原生ajax函数

    前沿:对于此篇随笔,完是简要写了几个重要的地方,具体实现细节完在提供的源码做了笔记 <一>ajax基本要点介绍--更好的介绍ajax 1. ajax对象中new XMLHttpReques ...

  9. 轻量级原生 ajax 函数,支持 get/array post/array post/json

    原生js封装 function ajaxRequest(type, url, data, callback, failCallBack, header, dataType) { var url_enc ...

随机推荐

  1. Data Model for Message Receiver

    1. Physical Data Model 2. SQL Statements drop database MessageReceiver go /*======================== ...

  2. 两台linux服务器各有两个不同的用户 其中一个服务器可以无密码登录服务器

    服务器A:普通用户USERA 服务器B:普通用户USERB 把USERA的公钥写入服务器B用户USERB的authorized_keys中 USERA能普能用户登录然后服务器A,然后再登录服务器B: ...

  3. Content of "Essential Software Test Design"

    Content of "Essential Software Test Design" 2015-11-16 PART I 7 TEST DESIGN TECHNIQUES: AN ...

  4. windows下JDK环境配置与Android SDK环境配置

    一.JDK环境配置1.配置变量名:JAVA_HOME变量值:jdk安装的绝对路径. 变量名:Path(在系统变量中找到并选中Path点击下面的编辑按钮,不要删除原本变量值中的任何一个字母,在这个变量值 ...

  5. Git分支操作——查看、新建、删除、提交、合并

    查看分支 1 查看本地分支 $ git branch   2 查看远程分支 $ git branch -r     创建分支 1 创建本地分支 $ git branch branchName 2 切换 ...

  6. (笔记)一场由SD卡引发的灾难

    一场由SD卡引发的灾难   注:此文章转自“https://user.qzone.qq.com/63915185/blog/1512562541”.   Flash里面的数据在使用过程中莫名改变或不翼 ...

  7. springboot-aop面向切面编程

    需求: 项目中需要记录用户操作信息,例如用户登陆系统后做了那些操作,需要有具体的日志记录. 解决办法: 1.编写操作记录日志业务类,在使用的方法中调用(一般记录方式). 2.使用面向切面方式记录日志, ...

  8. 面向对象的类关系及其C++实现

    在面向对象的程序设计中,类之间有6中关系,分别是继承, 组合, 聚合,关联, 依赖,实现,如果使用C语言实现,上面的这些关系通过"结构体包含结构体.结构体包含结构体指针以及函数指针等语法实现 ...

  9. Android学习:简易图片浏览

    这个例子学习混合使用XML布局和代码来控制UI,习惯上把变化小.行为固定的组件放在XML布局文件中管理,而那些变化较多.行为控制复杂的组件则交给Java代码来管理. 先在布局文件中定义一个线性布局容器 ...

  10. vb编程中的选择结构语句的写法

    1996年,Bohra和Jacopin提出了结构化算法的3中种基本结构:顺序结构.选择结构和循环结构 目前已经得到证明,无论多么复杂的程序,都是由上面的3种基本结构中的一种或者多种的组合构成 在此笔者 ...