用原生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中的void运算符语法及使用介绍
Mar 10 Javascript
javascript封装简单实现方法
Aug 11 Javascript
基于JavaScript的操作系统你听说过吗?
Jan 28 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 Javascript
DIV+CSS+jQ实现省市联动可扩展
Jun 22 Javascript
bootstrap警告框使用方法解析
Jan 13 Javascript
详解vue前后台数据交互vue-resource文档
Jul 19 Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 Javascript
AngularJS集合数据遍历显示的实例
Dec 27 Javascript
layui form表单提交后实现自动刷新
Oct 25 Javascript
js实现鼠标拖拽div左右滑动
Jan 15 Javascript
原生js+ajax分页组件
Jan 30 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对字符串的递增运算分析
2010/08/08 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
PHP自定义错误用法示例
2016/09/28 PHP
jQuery Clone Bug解决代码
2010/12/22 Javascript
ExtJS实现文件下载的方法实例
2013/11/09 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
Javascript非构造函数的继承
2015/04/27 Javascript
js操作数组函数实例小结
2015/12/10 Javascript
vue + socket.io实现一个简易聊天室示例代码
2017/03/06 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
2018/09/19 Javascript
JQuery实现ajax请求的示例和注意事项
2018/12/10 jQuery
详解基于Vue/React项目的移动端适配方案
2019/08/23 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
js实现踩五彩块游戏
2020/02/08 Javascript
一起深入理解js中的事件对象
2021/02/06 Javascript
详解基于django实现的webssh简单例子
2018/07/17 Python
python实现飞机大战游戏
2020/10/26 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
推荐8款常用的Python GUI图形界面开发框架
2020/02/23 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
苹果中国官方网站:Apple中国
2016/07/22 全球购物
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
办公室文秘岗位职责
2013/11/15 职场文书
小学二年级学生评语
2014/04/21 职场文书
法制教育演讲稿
2014/09/10 职场文书
统计员岗位职责范本
2015/04/14 职场文书
节约用电倡议书
2015/04/28 职场文书
领导莅临指导欢迎词
2015/09/30 职场文书
聊一聊python常用的编程模块
2021/05/14 Python
Python还能这么玩之用Python修改了班花的开机密码
2021/06/04 Python
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle