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

 更新时间:2016年07月13日 10:21:28   投稿:jingxian  
下面小编就为大家带来一篇用原生JS对AJAX做简单封装的实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

首先,我们需要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做简单封装的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Bootstrap一款超好用的前端框架

    Bootstrap一款超好用的前端框架

    Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,用于开发响应式布局、移动设备优先的 WEB 项目。接下来通过本文给大家分享Bootstrap一款超好用的前端框架,感兴趣的朋友一起看看吧
    2017-09-09
  • AlertBox 弹出层信息提示框效果实现步骤

    AlertBox 弹出层信息提示框效果实现步骤

    弹出层就是相对文档或窗口定位的一个层,一般用来显示提示信息、广告等内容,还可以配合覆盖层来锁定页面。
    2010-10-10
  • JavaScript中数组遍历的7种方法小结

    JavaScript中数组遍历的7种方法小结

    作为JavaScript开发人员,熟悉数组的遍历和操作是非常重要的,数组遍历是处理和操作数组元素的基本需求之一,本文将介绍JavaScript中的7种常见数组遍历方法,帮助你成为数组操作的达人
    2023-11-11
  • 详解小程序原生使用ES7 async/await语法

    详解小程序原生使用ES7 async/await语法

    这篇文章主要介绍了详解小程序原生使用ES7 async/await语法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 前端JS获取URL参数的4种方法总结

    前端JS获取URL参数的4种方法总结

    通过url传递参数是我们在开发中经常用到的一种传参方法,下面这篇文章主要给大家介绍了关于前端JS获取URL参数的4种方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • 详解weex默认webpack.config.js改造

    详解weex默认webpack.config.js改造

    本篇文章主要介绍了详解weex默认webpack.config.js改造,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • TypeScript mixin提升代码复用性的方法和原理

    TypeScript mixin提升代码复用性的方法和原理

    在前端开发中,我们经常需要在不同的组件或类之间共享功能代码,Mixin提供了一种非常灵活的方式,可以让我们在不破坏继承关系的前提下,将功能代码复用到多个对象中,文章通过代码示例介绍mixin提升代码复用性的方法和好处,需要的朋友可以参考下
    2023-06-06
  • jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)

    jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)

    本文主要介绍了jquery自定义插件结合baiduTemplate.js实现异步刷新的具体实例,具有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • javascript每日必学之多态

    javascript每日必学之多态

    javascript每日必学之多态,介绍了有关多态的相关内容,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • js中的reduce()函数讲解

    js中的reduce()函数讲解

    今天小编就为大家分享一篇关于js中的reduce()函数讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01

最新评论