原生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 相关文章推荐
eval与window.eval的差别分析
Mar 17 Javascript
JavaScript中链式调用之研习
Apr 07 Javascript
电子商务网站上的常用的js放大镜效果
Dec 08 Javascript
JQUERY对单选框(radio)操作的小例子
Apr 25 Javascript
js怎么终止程序return不行换jfslk
May 30 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
Oct 24 Javascript
javascript数组快速打乱重排的方法
Jan 02 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
May 30 Javascript
jquery实现界面无刷新加载登陆注册
Jul 30 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
Apr 08 Javascript
JavaScript运行机制实例分析
Apr 11 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
Jul 20 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
WindowsXP中快速配置Apache+PHP5+Mysql
2008/06/05 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
在Ubuntu 14.04上部署 PHP 环境及 WordPress
2014/09/02 PHP
PHP屏蔽过滤指定关键字的方法
2014/11/03 PHP
Linux+Nginx+MySQL下配置论坛程序Discuz的基本教程
2015/12/23 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
jQuery 方法大全方便学习参考
2010/02/25 Javascript
JavaScript中的Array对象使用说明
2011/01/17 Javascript
jQuery div层的放大与缩小简单实现代码
2013/03/28 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
2014/12/10 Javascript
javascript事件委托的方式绑定详解
2015/06/10 Javascript
javascript中alert()与console.log()的区别
2015/08/26 Javascript
Jquery实现的简单轮播效果【附实例】
2016/04/19 Javascript
jQuery查找节点并获取节点属性的方法
2016/09/09 Javascript
vue-axios使用详解
2017/05/10 Javascript
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
2020/08/05 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
2020/10/18 Javascript
python django 实现验证码的功能实例代码
2017/05/18 Python
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
Python判断中文字符串是否相等的实例
2018/07/06 Python
谈谈Python中的while循环语句
2019/03/10 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
Python实现粒子群算法的示例
2021/02/14 Python
关于HTML5语义标签的实践(blog页面)
2016/07/12 HTML / CSS
关工委先进个人事迹材料
2014/05/23 职场文书
美食节目策划方案
2014/05/31 职场文书
村安全生产责任书
2014/08/25 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript
python中super()函数的理解与基本使用
2021/08/30 Python