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 相关文章推荐
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
Jan 23 Javascript
JQuery切换显示的效果实例代码
Feb 27 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
Dec 17 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
Mar 25 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
Nov 16 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
Aug 19 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
Sep 09 Javascript
简单实现js无缝滚动效果
Feb 05 Javascript
Bootstrap列表组学习使用
Feb 09 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
Feb 15 Javascript
vue实现滑动解锁功能
Mar 03 Vue.js
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
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
php连接sftp的作用以及实例代码
2019/09/23 PHP
jQuery 关于伪类选择符的使用说明
2013/04/24 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
2013/12/29 Javascript
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
JavaScript对象封装的简单实现方法(3种方法)
2017/01/03 Javascript
Angularjs实现搜索关键字高亮显示效果
2017/01/17 Javascript
在js中做数字字符串补0(js补零)
2017/03/25 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
require.js中的define函数详解
2017/07/10 Javascript
详解Js中的模块化是如何实现的
2017/10/18 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
Node.js的进程管理的深入理解
2019/01/09 Javascript
使用js和canvas实现时钟效果
2020/09/08 Javascript
解决await在forEach中不起作用的问题
2021/02/25 Javascript
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
用Python解决计数原理问题的方法
2016/08/04 Python
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
详解Python利用random生成一个列表内的随机数
2019/08/21 Python
可视化pytorch 模型中不同BN层的running mean曲线实例
2020/06/24 Python
CSS3的Border-radius轻松制作圆角
2012/12/24 HTML / CSS
老海军美国官网:Old Navy
2016/09/05 全球购物
美国班级戒指、帽子和礼服、毕业产品、年鉴:Balfour
2018/11/01 全球购物
社会实践感言
2014/01/25 职场文书
工程采购员岗位职责
2014/03/09 职场文书
培训协议书范本
2014/04/22 职场文书
李培根演讲稿
2014/05/22 职场文书
夫妻婚内购房协议书
2014/10/05 职场文书
2015毕业生实习工作总结
2014/12/12 职场文书
2015年中个人总结范文
2015/03/10 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书
MySQL去除密码登录告警的方法
2022/04/20 MySQL