Javascript原生ajax请求代码实例


Posted in Javascript onFebruary 20, 2020

这篇文章主要介绍了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 相关文章推荐
简单的JS多重继承示例
Mar 13 Javascript
Javascript isArray 数组类型检测函数
Oct 08 Javascript
js文件缓存之版本管理详解
Jul 05 Javascript
解决Jquery鼠标经过不停滑动的问题
Mar 03 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
Aug 06 Javascript
Bootstrap警告框(Alert)插件使用方法
Mar 21 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
实现div滚动条默认最底部以及默认最右边的示例代码
Nov 15 Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 Javascript
JavaScript面向对象继承原理与实现方法分析
Aug 09 Javascript
在微信小程序中保存网络图片
Feb 12 Javascript
webpack中的模式(mode)使用详解
Feb 20 #Javascript
jquery向后台提交数组的代码分析
Feb 20 #jQuery
koa-passport实现本地验证的方法示例
Feb 20 #Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
Feb 20 #Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 20 #Javascript
浅析JS中NEW的实现原理及重写
Feb 20 #Javascript
JS通过识别id、value值对checkbox设置选中状态
Feb 19 #Javascript
You might like
example1.php
2006/10/09 PHP
php _autoload自动加载类与机制分析
2012/02/10 PHP
php中echo()和print()、require()和include()等易混淆函数的区别
2012/02/22 PHP
PHP仿博客园 个人博客(1) 数据库与界面设计
2013/07/05 PHP
PHP+MySQL统计该库中每个表的记录数并按递减顺序排列的方法
2016/02/15 PHP
php生成Android客户端扫描可登录的二维码
2016/05/13 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
JavaScript 获取任一float型小数点后两位的小数
2014/06/30 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
javascript实现拼图游戏
2021/01/29 Javascript
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
用Python编写脚本使IE实现代理上网的教程
2015/04/23 Python
python处理xml文件的方法小结
2017/05/02 Python
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
python3大文件解压和基本操作
2017/12/15 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
numpy中的高维数组转置实例
2018/04/17 Python
python利用smtplib实现QQ邮箱发送邮件
2020/05/20 Python
python调用摄像头显示图像的实例
2018/08/03 Python
pandas通过索引进行排序的示例
2018/11/16 Python
浅谈pycharm的xmx和xms设置方法
2018/12/03 Python
python中查看.db文件中表格的名字及表格中的字段操作
2020/07/07 Python
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
部门活动策划方案
2014/08/16 职场文书
技术经济专业求职信
2014/09/03 职场文书
五五普法心得体会
2014/09/04 职场文书
乡镇干部党的群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
县政府班子个人对照检查材料
2014/10/05 职场文书
天坛导游词
2015/02/02 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书