原生js实现ajax方法(超简单)


Posted in Javascript onSeptember 20, 2016

上一篇文章写到原生js取代jquery的一些常用函数:原生js仿jquery一些常用方法,那么,ajax如何实现呢?如下是一个比较完整的ajax()

function ajax(){ 
  var ajaxData = { 
    type:arguments[0].type || "GET", 
    url:arguments[0].url || "", 
    async:arguments[0].async || "true", 
    data:arguments[0].data || null, 
    dataType:arguments[0].dataType || "text", 
    contentType:arguments[0].contentType || "application/x-www-form-urlencoded", 
    beforeSend:arguments[0].beforeSend || function(){}, 
    success:arguments[0].success || function(){}, 
    error:arguments[0].error || function(){} 
  } 
  ajaxData.beforeSend() 
  var xhr = createxmlHttpRequest();  
  xhr.responseType=ajaxData.dataType; 
  xhr.open(ajaxData.type,ajaxData.url,ajaxData.async);  
  xhr.setRequestHeader("Content-Type",ajaxData.contentType);  
  xhr.send(convertData(ajaxData.data));  
  xhr.onreadystatechange = function() {  
    if (xhr.readyState == 4) {  
      if(xhr.status == 200){ 
        ajaxData.success(xhr.response) 
      }else{ 
        ajaxData.error() 
      }  
    } 
  }  
} 
 
function createxmlHttpRequest() {  
  if (window.ActiveXObject) {  
    return new ActiveXObject("Microsoft.XMLHTTP");  
  } else if (window.XMLHttpRequest) {  
    return new XMLHttpRequest();  
  }  
} 
 
function convertData(data){ 
  if( typeof data === 'object' ){ 
    var convertResult = "" ;  
    for(var c in data){  
      convertResult+= c + "=" + data[c] + "&";  
    }  
    convertResult=convertResult.substring(0,convertResult.length-1) 
    return convertResult; 
  }else{ 
    return data; 
  } 
}

使用格式跟jquery的ajax差不多:

ajax({ 
  type:"POST", 
  url:"ajax.php", 
  dataType:"json", 
  data:{"val1":"abc","val2":123,"val3":"456"}, 
  beforeSend:function(){ 
    //some js code 
  }, 
  success:function(msg){ 
    console.log(msg) 
  }, 
  error:function(){ 
    console.log("error") 
  } 
})

以上就是小编为大家带来的原生js实现ajax方法(超简单)的全部内容了,希望对大家有所帮助,多多支持三水点靠木~

Javascript 相关文章推荐
关于URL中的特殊符号使用介绍
Nov 03 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
Dec 22 Javascript
JQUERY简单按钮轮换选中效果实现方法
May 07 Javascript
jquery单击事件和双击事件冲突解决方案
Mar 02 Javascript
js实现分割上传大文件
Mar 09 Javascript
jQuery 插件封装的方法
Nov 16 Javascript
Bootstrap免费字体和图标网站(值得收藏)
Mar 16 Javascript
详谈构造函数加括号与不加括号的区别
Oct 26 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 Javascript
详解vue项目中使用token的身份验证的简单实践
Mar 08 Javascript
解决一个微信号同时支持多个环境网页授权问题
Aug 07 Javascript
关于引入vue.js 文件的知识点总结
Jan 28 Javascript
原生js仿jquery一些常用方法(必看篇)
Sep 20 #Javascript
原生js封装的一些jquery方法(详解)
Sep 20 #Javascript
jQuery实现的自定义滚动条实例详解
Sep 20 #Javascript
jQuery在ie6下无法设置select选中的解决方法详解
Sep 20 #Javascript
jQuery简单倒计时效果完整示例
Sep 20 #Javascript
AngularJS中$watch和$timeout的使用示例
Sep 20 #Javascript
jQuery实现的网页换肤效果示例
Sep 20 #Javascript
You might like
DC宇宙的第一个英雄,堪称动漫史鼻祖,如今成为美国文化的象征
2020/04/09 欧美动漫
十天学会php之第六天
2006/10/09 PHP
set_include_path在win和linux下的区别
2008/01/10 PHP
基于PHP静态类的原罪详解
2013/05/06 PHP
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
php保存信息到当前Session的方法
2015/03/16 PHP
既简单又安全的PHP验证码 附调用方法
2016/06/02 PHP
PHP中SESSION过期设置
2021/03/09 PHP
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
javascript parseInt 函数分析(转)
2009/03/21 Javascript
JQuery筛选器全系列介绍
2013/08/27 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
jQuery插件Tmpl的简单使用方法
2015/04/27 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
JS小数运算出现多为小数问题的解决方法
2016/06/02 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
2017/12/09 Javascript
在一个页面实现两个zTree联动的方法
2017/12/20 Javascript
vue实现城市列表选择功能
2018/07/16 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
2018/08/19 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
2020/08/03 Javascript
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
python实现划词翻译
2020/04/23 Python
Django结合ajax进行页面实时更新的例子
2019/08/12 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
python和opencv构建运动检测器的实现
2021/03/03 Python
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
Kivari官网:在线购买波西米亚服装
2018/10/29 全球购物
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
小学生自我评价范文
2014/01/25 职场文书
员工入职担保书范文
2014/04/01 职场文书
初二学生评语大全
2014/12/26 职场文书
收费员岗位职责
2015/02/14 职场文书
spring 项目实现限流方法示例
2022/07/15 Java/Android