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);//
},
(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原生ajax请求的更多相关文章

  1. JavaScript原生Ajax请求纯文本数据

    源代码 ajax1.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  2. 原生javaScript完成Ajax请求

    使用原生javaScript完成Ajax请求,首先应该创建一个对象XMLHttprequest,考虑到兼容低版本IE浏览器,使用ActiveXObject对象,代码入下: var request; i ...

  3. 原生AJAX请求教程

    ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...

  4. Servlet处理原生Ajax请求

    萌新小白人生中的第一篇博客,难免会有差错,还望各位大佬多多包涵. 1. Ajax技术简介      Ajax(Asynchronous JavaScript and XML,异步JavaScript和 ...

  5. 原生 ajax 请求

    ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...

  6. 转贴:JavaScript实现Ajax请求简单示例

    转至:https://my.oschina.net/u/658145/blog/167651 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 ...

  7. javascript版Ajax请求

    什么是Ajax请求,Ajax也就是“Asynchronous JavaScript and XML”(异步JavaScript和XML),无刷新数据读取.能减少流量的消耗,也提高了浏览的流畅性,给用户 ...

  8. [TimLinux] JavaScript 原生AJAX介绍

    1. AJAX 异步JavaScript + XML,用于浏览器内部通过前端JavaScript语言操纵,与HTTP服务器进行连接通信的技术. 2. XMLHttpRequest对象 从IE7+,以及 ...

  9. js原生ajax请求get post笔记

    开拓新领域,贵在记录.下面记录了使用ajax请求的get.post示例代码 //ajax get 请求获取数据支持同步异步 var ajaxGet = function (reqUrl, params ...

随机推荐

  1. 《【面试突击】— Redis篇》-- Redis的主从复制?哨兵机制?

    能坚持别人不能坚持的,才能拥有别人未曾拥有的.关注左上角编程大道公众号,让我们一同坚持心中所想,一起成长!! <[面试突击]— Redis篇>-- Redis的主从复制?哨兵机制? 在这个 ...

  2. P4550 收集邮票

    P4550 收集邮票 题目描述 有n种不同的邮票,皮皮想收集所有种类的邮票.唯一的收集方法是到同学凡凡那里购买,每次只能买一张,并且买到的邮票究竟是n种邮票中的哪一种是等概率的,概率均为1/n.但是由 ...

  3. Your Ride Is Here 你的飞碟在这儿 USACO 模拟

    1001: 1.1.1 Your Ride Is Here 你的飞碟在这儿 时间限制: 1 Sec  内存限制: 128 MB提交: 9  解决: 9[提交] [状态] [讨论版] [命题人:外部导入 ...

  4. 解决a标签点击会出现虚框现象

    1.解决a标签点击会出现虚框现象. 当a标签获得焦点的时候,a标签的周围就会出现虚框,它不同于border,不占任何宽度,a失去焦点的时候就会消失,就是outline. 在遨游,Firefox ,IE ...

  5. HTML中使用Vue+Dhtmlxgantt制作任务进度图

    HTML中使用Vue+Dhtmlxgantt制作任务进度图 Dhtmlxgantt官网: https://dhtmlx.com/docs/products/dhtmlxGantt/ 参考文章 甘特图配 ...

  6. List去重问题与方法

    面试中经常被问到的list如何去重,用来考察你对list数据结构,以及相关方法的掌握,体现你的java基础学的是否牢固.我们大家都知道,set集合的特点就是没有重复的元素.如果集合中的数据类型是基本数 ...

  7. maven报错:Return code is: 501 , ReasonPhrase:HTTPS Required

    今天把一个去年没做完的项目翻出来做时,发现maven无法正常导入依赖.检查了一遍项目配置,没发现有什么问题.而且依赖在本地仓库存在. 随后发现报错:Failed to transfer file:** ...

  8. 软件工程概论 网站开发要掌握的技术 &登录界面

    1.网站系统开发需要掌握的技术 一.界面和用户体验(Interface and User Experience) 1.1 知道如何在基本不影响用户使用的情况下升级网站.通常来说,你必须有版本控制系统( ...

  9. 玩转Django2.0---Django笔记建站基础四(视图)

    第四章 视图 4.1 探究视图 一.视图说明 视图(View)是Django的MTV架构模式的V部分,主要负责处理用户请求和生成相应的相应部分,然后在页面或其它类型文档中显示.也可以理解为视图是MVC ...

  10. 深浅拷贝 集合(定义,方法) 函数(定义,参数,return,作用域) 初识

    深浅拷贝 在python中浅拷贝 a=[1,2,3,4,]b=a.copy()b[0]='3333'print(a) #[1, 2, 3, 4] 浅拷贝一层并不会对a造成变化print(b) #[33 ...