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. 简单的c语言程序

    我猜大部分人第一门掌握的语言是c语言吧(我第一门学的是python). 在接下来的文章里我会逐步的介绍有关自己对c语言的理解,希望对一些小伙伴有帮助,有哪里有错误希望大佬指出. 首先这是第一个c语言程 ...

  2. python中方法调用和函数调用的区别

    函数调用: 传几个参数,就会有几个实参方法调用: 默认传递一个参数self,至少要定义一个形参

  3. C++类中的重载

    函数重载回顾 函数重载的本质为相互独立的不同函数 C++中通过函数名和函数参数确定函数调用 无法直接通过函数名得到重载函数的入口地址 函数重载必然发生在同一个作用域 类中的成员函数可以进行重载 构造函 ...

  4. cogs 2098. [SYOI 2015] Asm.Def的病毒 LCA 求两条路径是否相交

    2098. [SYOI 2015] Asm.Def的病毒 ★☆   输入文件:asm_virus.in   输出文件:asm_virus.out   简单对比时间限制:1 s   内存限制:256 M ...

  5. C入门题目

    37. 反转一个3位整数 反转一个只有3位数的整数. 样例 样例 1: 输入: number = 123 输出: 321 样例 2: 输入: number = 900 输出: 9 注意事项 你可以假设 ...

  6. IntelliJ IDEA编辑文件的时候CPU飙高问题的解决

    原文地址:https://www.javatang.com/archives/2018/04/26/25582403.html 上篇文章中说明了解决IntelliJ IDEA中文输入法无提示的问题,最 ...

  7. python+pandas+jupyter notebook 的 hello word

  8. Basic Thought / Data Structure: 差分 Difference

    Intro: 作为查询界的\(O(1)\)王者--前缀和的亲兄弟,差分,他可是修改界的\(O(1)\)王者 Prerequisite knowledge: 前缀和 Function: 仅单次询问的区间 ...

  9. 记一次阿里云LVM扩容与 LVM 相关知识学习

    一.lvm 扩容 问题: 我们阿里云服务器有一个磁盘容量为 1T ,但是最近由于业务的扩增,磁盘容量已经不够了,需要增大磁盘的容量.磁盘挂载在 /home,使用的是 LVM.我们现在需要对磁盘进行扩容 ...

  10. potel99se 文件损坏修复

    一直使用protel99se来做电路图,非常方便快捷.最近一次打开常用的一个ddb文件,提示失败,无法打开了.protel99使用的数据库文件实际上是access97 的mdb数据库,于是修改成mdb ...