用原生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 相关文章推荐
QQ登录简单实现代码
Mar 09 Javascript
爆炸式的JS圆形浮动菜单特效代码
Mar 03 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
Oct 09 Javascript
JavaScript对象学习经验整理
Oct 12 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
Nov 20 Javascript
javascript中对Date类型的常用操作小结
May 19 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
浅谈JavaScript 覆盖原型以及更改原型
Aug 31 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
Jan 08 Javascript
5种JavaScript脚本加载的方式
Jan 16 Javascript
jQuery中用on绑定事件时需注意的事项
Mar 19 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
Apr 19 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
在Zeus Web Server中安装PHP语言支持
2006/10/09 PHP
一个简单的域名注册情况查询程序
2006/10/09 PHP
需要使用php模板的朋友必看的很多个顶级PHP模板引擎比较分析
2008/05/26 PHP
php基于Fleaphp框架实现cvs数据导入MySQL的方法
2016/02/23 PHP
Laravel学习教程之路由模块
2017/08/18 PHP
php分享朋友圈的实现代码
2019/02/18 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
jquery tab标签页的制作
2010/05/10 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
点击表单提交时出现jQuery没有权限的解决方法
2014/07/23 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
2015/12/03 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
2016/08/02 Javascript
jQuery ztree实现动态树形多选菜单
2016/08/12 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
AngularJs验证重复密码的方法(两种)
2016/11/25 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
jquery 正整数数字校验正则表达式
2017/01/10 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
node错误处理与日志记录的实现
2018/12/24 Javascript
如何在项目中使用log4.js的方法步骤
2019/07/16 Javascript
Python实现注册、登录小程序功能
2018/09/21 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
python实现对图片进行旋转,放缩,裁剪的功能
2019/08/07 Python
python requests证书问题解决
2019/09/05 Python
Java多线程实现四种方式原理详解
2020/06/02 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
举例讲解Python装饰器
2020/12/24 Python
美国保健品专家:Life Extension
2018/05/04 全球购物
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
COS美国官网:知名服装品牌
2019/04/08 全球购物
妇科医生自荐信
2013/11/05 职场文书
会员活动策划方案
2014/08/19 职场文书
安全生产月标语
2014/10/07 职场文书
Go语言中的UTF-8实现
2021/04/26 Golang
详解MongoDB排序时内存大小限制与创建索引的注意事项
2022/05/06 MongoDB