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 ...
随机推荐
- web实现点击左侧导航,右侧加载不同的网页(这种布局多用于后台管理系统)
(1)实现方法:采用ajax实现点击左侧菜单,右侧加载不同网页(在整个页面无刷新的情况下实现右侧局部刷新,用到ajax注意需要在服务器环境下运行,从HBuilder自带的服务器中打开浏览效果即可) ( ...
- kuangbin专题 专题九 连通图 Strongly connected HDU - 4635
题目链接:https://vjudge.net/problem/HDU-4635 题目:有向图,给定若干个连通图,求最多还能添加几条边,添完边后,图仍然要满足 (1)是简单图,即没有重边或者自环 (2 ...
- C++ 排序引用的优化
链接:https://www.nowcoder.com/acm/contest/83/B来源:牛客网 题目描述 第一次期中考终于结束啦!沃老师是个语文老师,他在评学生的作文成绩时,给每位学生的分数都是 ...
- 异数OS TCP协议栈测试(五)--关于QOS与延迟
. 异数OS TCP协议栈测试(五)–关于QOS与延迟 ##本文来自异数OS社区 github: https://github.com/yds086/HereticOS 异数OS社区QQ群: 6524 ...
- 生产者消费者代码学习,Producer_Consuner
使用BlockingQuery实现生产者者消费者:考虑并发,解耦. 生产者消费者模式是面向过程的设计模式. 生产者制造数据 ------> 生产者把数据放入缓冲区 -------> ...
- 个人第四次作业:Alpha项目测试
个人第四次作业:Alpha项目测试 格式描述 详情 这个作业属于哪个课程 http://edu.cnblogs.com/campus/xnsy/GeographicInformationScience ...
- Linux中inode详解
转自:https://www.cnblogs.com/itech/archive/2012/05/15/2502284.html 一.inode是什么? 理解inode,要从文件储存说起. 文件储存在 ...
- ios--->泛型
泛型 开发中使用场景: 1.限制集合中的类型,只能检测方法的调用,因为声明的泛型只能存在方法中 2.当一个类在声明的时候,某个对象的属性不确定,只有创建对象的时候才能确定,就可以使用泛型. 使用泛型的 ...
- Kubernetes 服务自动发现CoreDNS
前言 Service服务,是一个概念,逻辑通过selector标签代理指定后端pod.众所周知,pod生命周期短,状态不稳定,pod错误异常后新生成的Pod IP会发生变化,之前Pod的访问方式均不可 ...
- spring mvc 框架运行机制 + 数据绑定原理
spring mvc 运行主要的组件: 1 前端控制器 (dispatchservlet) 相当于一个重要处理器,它用来调用其他功能模块来分工的效应一次请求,主要起调度的作用. 2. handler ...