原生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 相关文章推荐
jquery tools系列 expose 学习
Sep 06 Javascript
JavaScript高级程序设计 DOM学习笔记
Sep 10 Javascript
Javascript 面向对象编程(coolshell)
Mar 18 Javascript
javascript实现页面内关键词高亮显示代码
Apr 03 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
Dec 01 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
Dec 19 Javascript
JavaScript简单拖拽效果(1)
May 17 Javascript
详解Vue2.0 事件派发与接收
Sep 05 Javascript
fastadmin中调用js的方法
May 14 Javascript
javascript面向对象三大特征之继承实例详解
Jul 24 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
Sep 26 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
php中删除、清空session的方式总结
2015/10/09 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
在html页面上拖放移动标签
2010/01/08 Javascript
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
2015/09/15 Javascript
JavaScript是如何实现继承的(六种方式)
2016/03/31 Javascript
JS添加删除DIV的简单实例
2016/07/08 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
详解vue-router 路由元信息
2017/09/13 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
2019/04/10 Javascript
JS使用H5实现图片预览功能
2019/09/30 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
2020/02/11 Javascript
[44:10]2018DOTA2亚洲邀请赛 4.5 淘汰赛 EG vs VP 第一场
2018/04/06 DOTA
python使用正则表达式检测密码强度源码分享
2014/06/11 Python
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
实例讲解Python中global语句下全局变量的值的修改
2016/06/16 Python
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
pymongo中group by的操作方法教程
2019/03/22 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
numpy库ndarray多维数组的维度变换方法(reshape、resize、swapaxes、flatten)
2020/04/28 Python
python判断是空的实例分享
2020/07/06 Python
酒店总经理助理岗位职责
2014/02/01 职场文书
兴趣小组活动总结
2014/05/05 职场文书
乡镇创先争优活动总结
2014/08/28 职场文书
优秀班组申报材料
2014/12/25 职场文书
小学班主任培训心得体会
2016/01/07 职场文书
vue中div禁止点击事件的实现
2022/04/02 Vue.js
讲解MySQL增删改操作
2022/05/06 MySQL