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 相关文章推荐
window.onload 加载完毕的问题及解决方案(上)
Jul 09 Javascript
跟着JQuery API学Jquery 之三 筛选
Apr 09 Javascript
原生js实现给指定元素的后面追加内容
Apr 10 Javascript
使用js写的一个简易的投票
Nov 27 Javascript
jQuery功能函数详解
Feb 01 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
理解javascript中DOM事件
Dec 25 Javascript
AngularJS ng-mousedown 指令
Aug 02 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
Mar 23 Javascript
seajs实现强制刷新本地缓存的方法分析
Oct 16 Javascript
jquery获取img的src值实例介绍
Jan 16 jQuery
taro小程序添加骨架屏的实现代码
Nov 15 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
使用数据库保存session的方法
2006/10/09 PHP
PHP has encountered an Access Violation at 7C94BD02解决方法
2009/08/24 PHP
初学PHP的朋友 经常问的一些问题。不断更新
2011/08/11 PHP
Android AsyncTack 异步任务实例详解
2016/11/02 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
jquery插件之easing使用
2010/08/19 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
2014/12/17 Javascript
JQuery基础语法小结
2015/02/27 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
2016/05/17 Javascript
分享javascript、jquery实用代码段
2016/10/20 Javascript
Vue DevTools调试工具的使用
2017/12/05 Javascript
在element-ui的select下拉框加上滚动加载
2019/04/18 Javascript
js模拟实现百度搜索
2020/06/28 Javascript
python检测服务器是否正常
2014/02/16 Python
在Django的URLconf中使用命名组的方法
2015/07/18 Python
python绘制评估优化算法性能的测试函数
2019/06/25 Python
Python matplotlib学习笔记之坐标轴范围
2019/06/28 Python
详解PyQt5信号与槽的几种高级玩法
2020/03/24 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
贝玲妃美国官方网站:Benefit美国
2016/08/28 全球购物
RetroStage德国:复古服装
2019/02/03 全球购物
Eclipse面试题
2014/03/22 面试题
linux下进程间通信的方式
2013/01/23 面试题
毕业生求职信
2014/06/10 职场文书
2014年社区工作总结
2014/11/18 职场文书
3.15消费者权益日活动总结
2015/02/09 职场文书
通用员工手册范本
2015/05/14 职场文书
办公室管理规章制度
2015/08/04 职场文书
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js
Nginx如何配置根据路径转发详解
2022/07/23 Servers