前言:最近在学习react,在练习中模拟一个button通过AJAX向后台发送POST请求,懒得引入AXIOS,就顺便练习了js原生ajax。

正文:

注:我忽略了IE6及以下版本

  submit(){
let data = this.props.value //这是要发送的数据
let xmlHttp = new XMLHttpRequest() //new XMLHttpRequest 对象
//发送请求
xmlHttp.open('POST', 'ajax_test.asp', true) //true是异步请求,false是同步的请求,不建议
xmlHttp.setRequestHeader('name', 'formData') //由于是提交form表单,最好set一个http头部。
xmlHttp.send(data) //只有在POST时候有参数,参数是string类型的数据,get方法并没有。 //接收相应 responseText 和 responseXML 属性
let response = xmlHttp.responseText
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
alert('成功'+ response)
}
}
}

一般项目中,还是使用Axios吧,比较方便。

js 原生手写AJAX的更多相关文章

  1. 原生js写Ajax

    //原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.挺对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...

  2. 不借助jquery封装好的ajax,你能用js手写ajax框架吗

    不借助jquery封装好的ajax,你能手写ajax框架吗?最基础的ajax框架,一起来围观吧. .创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); ...

  3. 利用js制作异步验证ajax方法()

    如何利用js写ajax异步验证.代码如下: window.onload = function(){ var name = document.getElementById('register-name- ...

  4. 用原生JavaScript写AJAX

    //原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.听对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...

  5. 使用PHP写ajax接口

    使用PHP写ajax接口 之前有学过php都是前后端没有分离的,所以也想去了解后端是怎么写出ajax接口的,可能问了别人或者上网找了很多资料都很有有点懵,或者说直接用TP或者lavarel这些后端框架 ...

  6. 2019前端面试系列——JS高频手写代码题

    实现 new 方法 /* * 1.创建一个空对象 * 2.链接到原型 * 3.绑定this值 * 4.返回新对象 */ // 第一种实现 function createNew() { let obj ...

  7. js和jQuery以及ajax的小练习

    今天学习了通过鼠标的点击事件然后让边框变颜色,还有怎么设置一个点击浏览器的输入框然后显示一个边框,还学习了通过ajak来获取post和get的值,通过它如何调用这个函数. 第一部分: 通过鼠标的点击让 ...

  8. js、jQuery、ajax面试题

    1.javascript的typeof返回哪些数据类型. 答案:string,boolean,number,undefined,function,object 2.例举3种强制类型转换和2种隐式类型转 ...

  9. .net学习之Session、Cookie、手写Ajax代码以及请求流程

    1.IIS 7 以上版本集成了两种模式,一种是经典模式,一种是集成模式(直接将asp.net框架集成到IIS中) 2.浏览器和服务器端通过什么技术来实现的?Socket(套接字),通信的语法是HTTP ...

随机推荐

  1. 背水一战 Windows 10 (117) - 后台任务: 后台下载任务

    [源码下载] 背水一战 Windows 10 (117) - 后台任务: 后台下载任务 作者:webabcd 介绍背水一战 Windows 10 之 后台任务 后台下载任务 示例演示 uwp 的后台下 ...

  2. 使用sklearn估计器构建K-Means聚类模型

    实例要求:以sklearn库自带的iris数据集为例,使用sklearn估计器构建K-Means聚类模型,并且完成预测类别功能以及聚类结果可视化. 实例代码: import pandas as pd ...

  3. Apache Commons FileUpload 实现文件上传

    Commons FileUpload简介 Apache Commons是一个专注于可重用Java组件开发的 Apache 项目.Apache Commons项目由三个部分组成: 1.Commons P ...

  4. jsp进阶

    Jsp,前段的数据读取到后端 获取前段输入框数据 request.getParameter(前段输入框的name值) Request.代表转发,(代码在服务器内部执行的一次性请求,url地址不会发生改 ...

  5. 【PHP篇】数组

    1.简介:数组存储方式是键值对 2.声明:$数组变量名=array(2,3,9,3,“546”,“yy”=>”hhhh”,100=>”uu100”): 3.下标注意:可为“字符串”或者整数 ...

  6. 【EF6学习笔记】(十一)实施继承

    上篇链接:EF学习笔记(十) 处理并发 本篇原文链接:Implementing Inheritance 面向对象的世界里,继承可以很好的重用代码.在本章就对Instructor和Student两个类进 ...

  7. linux 命令 — sort、uniq

    sort uniq sort:对行或者文本文件排序 uniq:去除重复的行 常用 sort -n file.txt 按数字进行排序 sort -r file.txt 按逆序进行排序 sort -M f ...

  8. 进程间通信IPC-消息队列

    前言: 消息队列就是一个消息的链表.可以把消息看作一个记录,具有特定的格式以及特定的优先级.对消息队列有写权限的进程可以向其中按照一定的规则添加新消息:对消息队列有读权限的进程则可以从消息队列中读走消 ...

  9. jquery的jsonp的使用

    客户端 $(function(){ $.ajax({ type: "get", async: false, url: "http://test.com/json_data ...

  10. 谈谈 JAVA 的对象序列化

    所谓的『JAVA 对象序列化』就是指,将一个 JAVA 对象所描述的所有内容以文件 IO 的方式写入二进制文件的一个过程.关于序列化,主要涉及两个流,ObjectInputStream 和 Objec ...