js 原生手写AJAX
前言:最近在学习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的更多相关文章
- 原生js写Ajax
//原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.挺对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...
- 不借助jquery封装好的ajax,你能用js手写ajax框架吗
不借助jquery封装好的ajax,你能手写ajax框架吗?最基础的ajax框架,一起来围观吧. .创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); ...
- 利用js制作异步验证ajax方法()
如何利用js写ajax异步验证.代码如下: window.onload = function(){ var name = document.getElementById('register-name- ...
- 用原生JavaScript写AJAX
//原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.听对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...
- 使用PHP写ajax接口
使用PHP写ajax接口 之前有学过php都是前后端没有分离的,所以也想去了解后端是怎么写出ajax接口的,可能问了别人或者上网找了很多资料都很有有点懵,或者说直接用TP或者lavarel这些后端框架 ...
- 2019前端面试系列——JS高频手写代码题
实现 new 方法 /* * 1.创建一个空对象 * 2.链接到原型 * 3.绑定this值 * 4.返回新对象 */ // 第一种实现 function createNew() { let obj ...
- js和jQuery以及ajax的小练习
今天学习了通过鼠标的点击事件然后让边框变颜色,还有怎么设置一个点击浏览器的输入框然后显示一个边框,还学习了通过ajak来获取post和get的值,通过它如何调用这个函数. 第一部分: 通过鼠标的点击让 ...
- js、jQuery、ajax面试题
1.javascript的typeof返回哪些数据类型. 答案:string,boolean,number,undefined,function,object 2.例举3种强制类型转换和2种隐式类型转 ...
- .net学习之Session、Cookie、手写Ajax代码以及请求流程
1.IIS 7 以上版本集成了两种模式,一种是经典模式,一种是集成模式(直接将asp.net框架集成到IIS中) 2.浏览器和服务器端通过什么技术来实现的?Socket(套接字),通信的语法是HTTP ...
随机推荐
- 探秘JS的异步单线程
对于通常的developer(特别是那些具备并行计算/多线程背景知识的developer)来讲,js的异步处理着实称得上诡异.而这个诡异从结果上讲,是由js的“单线程”这个特性所导致的. 我曾尝试用“ ...
- java基础知识-笔记整理
1.查看已安装jdk文件路径 CMD输入java -verbose. 2.java学习提升路线 java学习视屏地址: http://www.icoolxue.com/album/show/38 ...
- Apache Sentry部署
三台hadoop集群,分别是master.slave1和slave2.下面是这三台机器的软件分布: master:NameNode.ZK.HiveMetaSotre.HiveServer2.Sentr ...
- vi命令详解(转)
vi编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本编辑器,这里只是简单地介绍一下它的用法和一小部分指令.由于对Unix及Linux系统的任何版本,vi编辑器是完全相 ...
- 第48节:Java当中的集合框架
Java当中的集合框架 01 在我们班里有50位同学,就有50位对象. // 简书作者:达叔小生 Student[] stus = new Student[20]; 结果来了一位插班生,该同学因为觉得 ...
- 几个实用的CSS代码段总结
废话不多说,直接上代码,希望能帮到有需要的小伙伴 ①:遮罩 position: fixed; background: rgba(0, 0, 0, .4); top: 0; left: 0; right ...
- swiper轮播在ie浏览器上遇到的显示问题探索
前言: 最近项目有一个需求,想要下图效果,鼠标指向头像图片,图片会放大同时上面的轮播会跟着切换: 鼠标移开头像图片,图片变回原来的大小 注:下图是我根据上面需求已经实现的效果,所以截图方便说明 思考: ...
- 简单读!spring-mvc源码之穿越http请求
相信spring-mvc这种被玩坏了的架构理念,大家都烂熟于胸了,不过还是想来扒一扒他的细节. 一个http请求,怎么样被 spring 接收,又怎样做出响应呢? 一般地,我们会配置一个 web.xm ...
- RISC-V踩坑记----__builtin_clz((x)库函数的应用
RISC-V的确是个好东西,可是,免费的东西往往需要付出代价才能得到了,最近遇到了一个算法中的问题,追了好久,最终追到了这个库函数中,没想到,这个库函数居然还隐藏着一些猫腻.值得记下来啊. 首先上一个 ...
- Scala - 快速学习04 - 求值策略
表达式求值策略(Evaluation Strategy) Scala中所有的运算都是基于表达式的. Call By Value - 对函数实参求值,且仅求值一次:函数调用之前对所有表达式进行求值 Ca ...