本站承诺永不接任何虚假欺骗、联盟广告、弹窗广告、病毒广告、诱导充值等影响用户体验的广告,广告屏蔽插件会影响本站部分功能,还请不要屏蔽本站广告,感谢支持!

当前位置:首页 / 正文

2021-02-22 | 编程技术 | 3401 次阅读 | 等你评论 | 1 次点赞 | 繁体

由于不想多引入一个 jquery,百度了一个原生 js 实现 ajax 的方法(超简单),挺不错的,现在就分享给大家,也给大家做个参考。

首先新建一个 js 文件:

function ajax(){
  var ajaxData = {
    type:arguments[0].type || "GET",
    url:arguments[0].url || "",
    async:arguments[0].async || "true",
    data:arguments[0].data || null,
    header:arguments[0].header || {"Content-Type":"application/x-www-form-urlencoded"},
    dataType:arguments[0].dataType || "text",
    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);
  for(item in ajaxData.header){
    xhr.setRequestHeader(item,ajaxData.header[item]);
  }
  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",
  header:{"Content-Type": "application/json"},
  data:{"val1":"abc","val2":123,"val3":"456"}, 
  beforeSend:function(){ 
    //some js code 
  }, 
  success:function(msg){ 
    console.log(msg) 
  }, 
  error:function(){ 
    console.log("error") 
  } 
}) 

标签: javascript

猜你喜欢
Lazysizes.js图片懒加载的使用
lazysizes 是一种快速(无垃圾),对 SEO 友好且可自动初始化的 lazyloader,用于图像(包括响应图像 picture/ srcset),iframe,脚本/小部件等。它还通过...
通用的检测到广告屏蔽插件进行弹窗提示实现方法
用的 js 方法来检测,按理说所有博客都能使用,就是在打开网页的时候进行一次判断。如果发现没有加载广告代码,就会出来一个弹窗来提示浏览者将本站加到广告拦截插件的白名单里面。别喷我,个人站长经营实...
javascript | 原生JS多语言切换简单实现
由于项目需要实现一个前端的多语言切换,不想因为一个简单的功能就引入 jQuery,所以经过 google 编程大法摸索出一个原生 JS 就可以实现的多语言前端切换的小例子,仅供参考。<bo...
github 的黑夜模式小猫咪动画源码
github 上的小猫咪黑夜模式切换很可爱,想要~ 。于是花了点时间扒了下来放在了自己的博客上。秉着开源精神,将源码分享给大家。废话少说,上代码html:<!-- 暗黑模式 --> ...
最简单的方式使用原生 js 发送 http 请求
使用场景1、检查接口可用性主要用于在没有引入 jQuery 等工具的页面上需要验证一些 api 能否调得通的时候,可以快速调出浏览器调试界面发请求。 这在判断是否存在跨域问题的场景下,特别好用。...
仿网易评论盖楼 JS 实现 | html
看了些评论引用盖楼的网站,觉得网易的效果比较好,简单明了,让人看了就知道是引用评论,迟点准备自己也写个玩玩,应该能从中学到不少东西. 前端部分实现如下:https://www.phpvar.co...
什么是防抖和节流?vue 中如何使用防抖和节流
什么是防抖和节流?vue 中如何使用防抖和节流介绍在 JavaScript 中,防抖和节流其实是一个很重要的概念。主要应用场景就是会频繁触发的事件,比如监听滚动、点赞功能,总不能点一次赞就向后台...
卸载阿里云、腾讯云服务器监控系统
众所周知,阿里云、腾讯云的服务器都自带监控(AliYunDun / 阿里云盾 / 安骑士),大家都不想自己的所作所为都被监控着,比如我在上面安装 XX 服务,一旦云监控查到,会被警告,很麻烦,我们总想
mysql8利用CTE特性实现递归查询
递归查询分为父子查询和子父查询。 父子查询: 根据父 id 查询下面所有子节点数据; 子父查询: 根据子 id 查询上面所有父节点数据; 下边就利用 mysql8 新增语
三种方式修改 MySQL 数据库名
在 Innodb 数据库引擎下修改数据库名的方式与 MyISAM 引擎下修改数据库的方式完全不一样,如果是 MyISAM 可以直接去数据库目录中 mv 就可以,Innodb 如果用同样的方法修改会提示
(首次提交评论需审核通过才会显示,请勿重复提交)