用原生JS对AJAX做简单封装的实例代码


Posted in Javascript onJuly 13, 2016

首先,我们需要xhr对象。这对我们来说不难,封装成一个函数。

var createAjax = function() { var xhr = null; try { //IE系列浏览器 xhr = new ActiveXObject("microsoft.xmlhttp");
  } catch (e1) { try { //非IE浏览器 xhr = new XMLHttpRequest();
    } catch (e2) { window.alert("您的浏览器不支持ajax,请更换!");
    }
  } return xhr;
};

然后,我们来写核心函数。

var ajax = function(conf) { // 初始化 //type参数,可选 var type = conf.type; //url参数,必填 var url = conf.url; //data参数可选,只有在post请求时需要 var data = conf.data; //datatype参数可选 var dataType = conf.dataType; //回调函数可选 var success = conf.success; if (type == null){ //type参数可选,默认为get type = "get";
  } if (dataType == null){ //dataType参数可选,默认为text dataType = "text";
  } // 创建ajax引擎对象 var xhr = createAjax(); // 打开 xhr.open(type, url, true); // 发送 if (type == "GET" || type == "get") {
    xhr.send(null);
  } else if (type == "POST" || type == "post") {
    xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
    xhr.send(data);
  }
  xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { if(dataType == "text"||dataType=="TEXT") { if (success != null){ //普通文本 success(xhr.responseText);
        }
      }else if(dataType=="xml"||dataType=="XML") { if (success != null){ //接收xml文档 success(xhr.responseXML);
        } 
      }else if(dataType=="json"||dataType=="JSON") { if (success != null){ //将json字符串转换为js对象 success(eval("("+xhr.responseText+")"));
        }
      }
    }
  };
};

最后,说明一下此函数的用法。

ajax({ type:"post",
    url:"test.jsp",
    data:"name=dipoo&info=good",
    dataType:"json",
    success:function(data){ alert(data.name); } });

以上这篇用原生JS对AJAX做简单封装的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JavaScript计算在UTF-8下存储字符串占用字节数
Aug 08 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 Javascript
关于js二维数组和多维数组的定义声明(详解)
Oct 02 Javascript
读Javascript高性能编程重点笔记
Dec 21 Javascript
js判断PC端与移动端跳转
Dec 24 Javascript
js中的DOM模拟购物车功能
Mar 22 Javascript
微信小程序 页面跳转传值实现代码
Jul 27 Javascript
详解node.js中的npm和webpack配置方法
Jan 21 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
element 动态合并表格的步骤
Dec 31 Javascript
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
javascript类型系统——undefined和null全面了解
Jul 13 #Javascript
javascript类型系统——日期Date对象全面了解
Jul 13 #Javascript
浅谈javascript中关于日期和时间的基础知识
Jul 13 #Javascript
jQuery EasyUI菜单与按钮详解
Jul 13 #Javascript
JQuery对ASP.NET MVC数据进行更新删除
Jul 13 #Javascript
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 #Javascript
Bootstrap登陆注册页面开发教程
Jul 12 #Javascript
You might like
第七节 类的静态成员 [7]
2006/10/09 PHP
windows xp下安装pear
2006/12/02 PHP
解析在apache里面给php写虚拟目录的详细方法
2013/06/24 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
php微信公众号开发之音乐信息
2018/10/20 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
JavaScript While 循环基础教程
2007/04/05 Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
2010/05/17 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
Three.js源码阅读笔记(光照部分)
2012/12/27 Javascript
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
JQuery 使用attr方法实现下拉列表选中
2014/10/13 Javascript
ES6新特征数字、数组、字符串
2016/10/01 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
五分钟搞懂Vuex实用知识(小结)
2019/08/12 Javascript
package.json配置文件构成详解
2019/08/27 Javascript
layui文件上传控件带更改后数据传值的方法
2019/09/23 Javascript
vuex中store存储store.commit和store.dispatch的用法
2020/07/24 Javascript
antd配置config-overrides.js文件的操作
2020/10/31 Javascript
[51:11]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS DT
2014/05/22 DOTA
Python实现简单的四则运算计算器
2016/11/02 Python
Python 正则表达式入门(初级篇)
2016/12/07 Python
python opencv之SIFT算法示例
2018/02/24 Python
Python3.4学习笔记之 idle 清屏扩展插件用法分析
2019/03/01 Python
Python split() 函数拆分字符串将字符串转化为列的方法
2019/07/16 Python
Philosophy美国官网:美国美容品牌
2016/08/15 全球购物
澳大利亚先进的皮肤和激光诊所购物网站:Soho Skincare
2018/10/15 全球购物
有个性的自我评价范文
2013/11/15 职场文书
信息专业学生学习的自我评价
2014/02/17 职场文书
《三国志》赏析
2019/08/27 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers