用原生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函数库-集合框架
Apr 27 Javascript
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
JQuery中上下文选择器实现方法
May 18 Javascript
JS封装的自动创建表格的实现代码
Jun 15 Javascript
BootStrap便签页的简单应用
Jan 06 Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 Javascript
浅谈JavaScript异步编程
Jan 20 Javascript
ES6中Proxy代理用法实例浅析
Apr 06 Javascript
微信小程序左右滑动的实现代码
Dec 15 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 Javascript
ES6 中可以提升幸福度的小功能
Aug 06 Javascript
Javascript confirm多种使用方法解析
Sep 25 Javascript
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
php 购物车实例(申精)
2009/05/11 PHP
基于Zend的Captcha机制的应用
2013/05/02 PHP
php 实现Hash表功能实例详解
2016/11/29 PHP
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
javascript实现TreeView 无刷新展开的实例代码
2013/07/13 Javascript
基于jQuery的图片不完全按比例自动缩小
2014/07/11 Javascript
不同编码的页面表单数据乱码问题解决方法
2015/02/15 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
angular5 httpclient的示例实战
2018/03/12 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
JS apply用法总结和使用场景实例分析
2020/03/14 Javascript
js实现弹窗效果
2020/08/09 Javascript
[45:14]Optic vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Python生成短uuid的方法实例详解
2018/05/29 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
15行Python代码实现网易云热门歌单实例教程
2019/03/10 Python
通过cmd进入python的实例操作
2019/06/26 Python
python实现通过队列完成进程间的多任务功能示例
2019/10/28 Python
python实现回旋矩阵方式(旋转矩阵)
2019/12/04 Python
Python OpenCV读取中文路径图像的方法
2020/07/02 Python
基于HTML5 的人脸识别活体认证的实现方法
2016/06/22 HTML / CSS
捷克电器和DJ设备网上商店:Electronic-star
2017/07/18 全球购物
美国非常受欢迎的Spa品牌:Bliss必列斯
2018/04/10 全球购物
英国家喻户晓的家居商店:The Range
2019/03/25 全球购物
艺术应用与设计个人的自我评价
2013/11/23 职场文书
医药代表个人的求职信分享
2013/12/08 职场文书
大学军训感言800字
2014/02/27 职场文书
祖国在我心中演讲稿500字
2014/05/04 职场文书
2014年作风建设工作总结
2014/10/29 职场文书