原生封装的ajax的代码如下:

//将数据转换成 a=1&b=2格式;

function json2url(json){

var arr = [];

//加随机数防止缓存;

json.t = Math.random();

for(var name in json){

arr.push(name+'='+json[name]);

}

return arr.join('&');

}

function ajax(json){

//1.创建一个ajax对象;

if(window.XMLHttpRequest){

var oAjax = new XMLHttpRequest();

}else{

var oAjax = new ActiveXObject('Microsoft.XMLHTTP');

}

//考虑默认值:

if(!json.url){

alert('请输入合理的请求地址!');

return;

}

json.type = json.type || 'get';

json.time = json.time || 5000;

json.data = json.data || {};

//判断用户传递的是get还是post请求:

switch (json.type.toLowerCase()){

case 'get':

//2.打开请求;

oAjax.open('get',json.url+'?'+json2url(json.data),true);

//3.发送数据:

oAjax.send();

break;

case 'post':

//打开请求;

oAjax.open('post',json.url,true);

//设置请求头;

oAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');

//发送数据;

oAjax.send(json2url(json.data));

}

//4.获取响应数据

oAjax.onreadystatechange = function() {

if (oAjax.readyState == 4) {

if (oAjax.status >= 200 && oAjax.status < 300 || oAjax.status == 304) {

//如果外边传递了成功的回调函数,那么就执行,

json.success && json.success(oAjax.responseText);

} else {

//如果外边传递了失败的回调函数,那么就执行,

json.error && json.error(oAjax.status);

}

clearTimeout(timer);//规定时间内取到数据后清除定时器;

}

};

var timer;

timer = setTimeout(function(){//设置网络响应超时;

alert('网络响应超时,请稍后再试');

oAjax.onreadystatechange = null;//网络超时后清除事件;

},json.time);

}

希望对大家有用

原生封装的ajax的更多相关文章

  1. 类似jQuery的原生JS封装的ajax方法

    一,前言: 前文,我们介绍了ajax的原理和核心内容,主要讲的是ajax从前端到后端的数据传递的整个过程. Ajax工作原理和原生JS的ajax封装 真正的核心就是这段代码: var xhr = ne ...

  2. Ajax工作原理和原生JS的ajax封装

    前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...

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

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

  4. javascript - 封装原生js实现ajax

    1 /* * ajax方法 */ var Ajax = function() { var that = this; //创建异步请求对象方法 that.createXHR = function() { ...

  5. 原生js实现ajax封装

    一.什么是ajax? 定义:Ajax(Asynchronous Java and XML的缩写)是一种异步请求数据的web开发技术,在不需要重新刷新页面的情况下,Ajax 通过异步请求加载后台数据,并 ...

  6. 原生js中用Ajax进行get传参

    原生js中用Ajax进行get传参 案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  7. 原生 JavaScript 实现 AJAX、JSONP

    相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的 ...

  8. 用原生JavaScript写AJAX

    //原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.听对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...

  9. 原生js写Ajax

    //原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.挺对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...

随机推荐

  1. 点滴积累【other】---HTTP 错误 404.13 - Not Found,请求筛选模块被配置为拒绝超过请求内容长度的请求(转载)

    此文参考来源:http://blog.csdn.net/tiantian1980/article/details/6577499 问题:HTTP 错误 404.13 - Not Found,请求筛选模 ...

  2. linux kill 关闭进程命令

    杀死进程最安全的方法是单纯使用kill命令,不加修饰符,不带标志. 首先使用ps -ef命令确定要杀死进程的PID,然后输入以下命令: # kill -pid 注释:标准的kill命令通常都能达到目的 ...

  3. 跑酷游戏的一些bug总结(滥用FixedUpdate的坑)

    最近把1年前的跑酷游戏demo拿出来重做了一遍,解决了2个之前的遗留bug. 虽然罪魁祸首都是FixedUpdate,但细节又不太一样.这里记录一下 1.点击空格键,角色会跳跃.而有时会跳的比之前高很 ...

  4. 多国语言解决方案gnu.gettext + poedit

    1.工具简介 1.1.关于i18n i18n其来源是英文单词 internationalization的首末字符i和n,18为中间的字符数是“国际化”的简称. i10n为资源本地化,全称为Locali ...

  5. Netty的ByteBuf

    https://blog.csdn.net/thinking_fioa/article/details/80795673  netty的ByteBuf知识点

  6. 线程相关函数(7)-sem_post(), sem_wait() 信号量

    sem_tsem_initsem_waitsem_trywaitsem_timedwaitsem_postsem_destroy 生产者消费者实例: #include <stdlib.h> ...

  7. 线程相关函数(2)-pthread_self()获取调用线程ID

    获取调用线程tid #include <pthread.h>pthread_t pthread_self(void); 示例: #include <pthread.h> #in ...

  8. Java类的实例化的初始化过程

    A a = new A(); new 创建对象过程: 1.类加载     代码验证 2.给对象在内存(堆)中分配空间(给属性赋值): 3.属性赋默认值: byte,short.int,long -&g ...

  9. Bootstrap学习笔记(8)--响应式导航栏

    说明: 1. 响应式导航栏,就是右上角的三道杠,点一下下方出现隐藏的导航栏.如果屏幕够大就显示所有的导航选项,如果屏幕小比如手机,就显示部分,剩下的放到三道杠里隐藏. 2. 外面套一个大的div,其实 ...

  10. Python操作Word【批量生成文章】

    http://www.cnblogs.com/codex/p/4668396.html 需要做一些会议记录.总共有多少呢?五个地点x7个月份x每月4篇=140篇.虽然不很重要,但是140篇记录完全雷同 ...