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);//
},
(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请求的更多相关文章
- JavaScript原生Ajax请求纯文本数据
源代码 ajax1.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
- 原生javaScript完成Ajax请求
使用原生javaScript完成Ajax请求,首先应该创建一个对象XMLHttprequest,考虑到兼容低版本IE浏览器,使用ActiveXObject对象,代码入下: var request; i ...
- 原生AJAX请求教程
ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...
- Servlet处理原生Ajax请求
萌新小白人生中的第一篇博客,难免会有差错,还望各位大佬多多包涵. 1. Ajax技术简介 Ajax(Asynchronous JavaScript and XML,异步JavaScript和 ...
- 原生 ajax 请求
ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...
- 转贴:JavaScript实现Ajax请求简单示例
转至:https://my.oschina.net/u/658145/blog/167651 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 ...
- javascript版Ajax请求
什么是Ajax请求,Ajax也就是“Asynchronous JavaScript and XML”(异步JavaScript和XML),无刷新数据读取.能减少流量的消耗,也提高了浏览的流畅性,给用户 ...
- [TimLinux] JavaScript 原生AJAX介绍
1. AJAX 异步JavaScript + XML,用于浏览器内部通过前端JavaScript语言操纵,与HTTP服务器进行连接通信的技术. 2. XMLHttpRequest对象 从IE7+,以及 ...
- js原生ajax请求get post笔记
开拓新领域,贵在记录.下面记录了使用ajax请求的get.post示例代码 //ajax get 请求获取数据支持同步异步 var ajaxGet = function (reqUrl, params ...
随机推荐
- win + ubuntu 双系统 grub引导项修复
ubuntu liveCD模式,找到ubuntu的系统盘位置,挂载到系统上面,然后使用grub进行修复 ubuntu liveCD模式下是用boot-repair软件进行修复 grub急救模式 1. ...
- 序言vue.js介绍
vue.js :渐进式JavaScript框架 vue.js 优点 1.体积小 例如:压缩后 33k; 2.更高的运行效率 基于虚拟dom,一种可以预先通过JavaScript进行各种计算,把最终的D ...
- hadoop搭建
一.前期准备 1.1 静态ip,请查看虚拟机安装不放呢 1.2 hostname 以及 hosts文件修改 cat /etc/hostname 不同的机器设置不同的名字 cat /etc/hosts ...
- Java入门 - 语言基础 - 20.Stream和File和IO
原文地址:http://www.work100.net/training/java-stream-file-io.html 更多教程:光束云 - 免费课程 Stream和File和IO 序号 文内章节 ...
- Java单体应用 - Markdown - 01.简介
原文地址:http://www.work100.net/training/monolithic-markdown.html 更多教程:光束云 - 免费课程 简介 序号 文内章节 视频 1 概述 2 特 ...
- [bzoj4825] [loj#2018] [Hnoi2017] 单旋
Description \(H\) 国是一个热爱写代码的国家,那里的人们很小去学校学习写各种各样的数据结构.伸展树(\(splay\))是一种数据 结构,因为代码好写,功能多,效率高,掌握这种数据结构 ...
- 第二阶段冲刺个人任务——three
今日任务: 优化统计个人博客结果页面的显示. 昨日成果: 优化作业查询结果,按学号排列.
- GeoGebra学习-lesson1
我曾经想过学习数学的时候总觉得不太直观,希望通过直观的图形来直观的学习数学.庆幸的是,在B站看视频时看到了妈咪叔使用了这款数学软件,很好用的样子.就去简单的了解了一下,下面是摘抄自<Geogeb ...
- 使用doxygen
Getting started with Doxygen 可执行文件doxygen是解析源文件并生成文档的主程序. 另外, 也可以使用可执行文件doxywizard, 是用于编辑配置文件, 以及在图形 ...
- Client API Object Model - Form Context
FormContext 提供界面或者界面上控件的的引用. 比如说 quick view control, row in an editable grid 等等. Xrm.Page 和 getFormC ...