Javascript原生ajax请求代码实例

 更新时间:2020年02月20日 14:09:45   作者:weihexin  
这篇文章主要介绍了Javascript原生ajax请求代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

这篇文章主要介绍了Javascript原生ajax请求代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

代码如下

class Ajax{

  constructor(url, method, data, callback_suc, callback_err, callback_run){
   this.RT = true;//默认为异步请求
   this.url = url;
   this.method = method || "POST";
   this.data = data || "";
   this.callback_suc = callback_suc || function () {};
   this.callback_err = callback_err || function () {};
   this.callback_run = callback_run || function () {};
   if(!this.url){this.callback_err(); return;}
   this.createRequest();
  }

  createRequest(){
   let xhr = new XMLHttpRequest();
   xhr.onreadystatechange = (e)=>{this.run(e);}
   xhr.open(this.method, this.url, this.RT);
   xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   xhr.send(this.data);
  }

  run(e){
   this.callback_run(e);
   if(e.target.readyState !== 4 || e.target.status !== 200){return;}
   this.callback_suc(e);
  }

 }
 //调用:
 new Ajax(
  "./main.php", //url:请求地址
  "POST", //method:请求方法
  "data=3&sb=2",//data:传递数据
  (e)=>{//callback_suc:请求完成 回调函数
   document.write(e.target.responseText);//3
  },
  (e)=>{},//callback_err:请求错误 回调函数
  (e)=>{}//callback_run:请求中 回调函数
 )

上面是js代码

下面以main.php为例接收请求

<?php
 //接收客户端请求数据data和sb
 $data = isset($_POST['data']) ? $_POST['data'] : "data为空";
 $sb = isset($_POST['sb']) ? $_POST['sb'] : "sb为空";
 //向客户端返回数据
 echo $data." ".$sb;
?>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • JavaScript中闭包的4个有用技巧分享

    JavaScript中闭包的4个有用技巧分享

    当谈到JavaScript编程中的高级概念和技巧时,闭包(Closures)是一个重要而有趣的主题,闭包是一种函数与其创建时的词法环境的组合,它允许我们捕获和保留局部变量,并在函数之外使用它们,在这篇文章中,我们将深入探讨JavaScript中闭包的4种有用技巧
    2023-10-10
  • 简单的邮箱登陆的提示效果类似于yahoo邮箱

    简单的邮箱登陆的提示效果类似于yahoo邮箱

    类似于yahoo邮箱登陆的提示效果,当鼠标聚焦到邮箱地址文本框时,文本框文字被清空
    2014-02-02
  • 微信小程序实现日期格式化和倒计时

    微信小程序实现日期格式化和倒计时

    这篇文章主要为大家详细介绍了微信小程序实现日期格式化和倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-06-06
  • js保留两位小数使用toFixed实现

    js保留两位小数使用toFixed实现

    直接使用Math.round(x*100)存在一个问题,有时会有很小的误差,显示很多位的小数位,如0.9996*100,就会变成99.96000000000001,我想要的在下面,感兴趣的朋友可以参考下哈
    2013-07-07
  • canvas实现图像放大镜

    canvas实现图像放大镜

    这篇文章主要为大家详细为大家详细介绍了canvas实现图像放大镜的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • js传值后台中文出现乱码的解决方法

    js传值后台中文出现乱码的解决方法

    这篇文章主要介绍了js传值后台中文出现乱码的解决方法,涉及javascript针对中文的编码及java解码操作相关技巧,需要的朋友可以参考下
    2016-06-06
  • JavaScript 动态创建VML的方法

    JavaScript 动态创建VML的方法

    JavaScript 动态创建VML的方法,需要的朋友可以参考下。
    2009-10-10
  • 原生JS进行前后端同构

    原生JS进行前后端同构

    本文通过实例给大家分享了原生JS进行前后端同构的相关知识点以及相关代码,有需要的朋友参考学习下。
    2018-04-04
  • layer.alert回调函数执行关闭弹窗的实例

    layer.alert回调函数执行关闭弹窗的实例

    今天小编就为大家分享一篇layer.alert回调函数执行关闭弹窗的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript开发中需要搞懂的字符编码总结

    JavaScript开发中需要搞懂的字符编码总结

    字符集就是字符的集合,字符编码则代表字符集的实际编码规则,是用于计算机解析字符的。本文为大家整理了JavaScript开发中需要搞懂的字符编码,希望对大家有所帮助
    2023-02-02

最新评论