码迷,mamicode.com
首页 > Web开发 > 详细

js 原生手写AJAX

时间:2018-06-22 13:33:24      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:rop   test   form   数据   发送请求   col   The   send   版本   

前言:最近在学习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

标签:rop   test   form   数据   发送请求   col   The   send   版本   

原文地址:https://www.cnblogs.com/yadiblogs/p/9212432.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!