xhr

晏炳

2023-12-01

xhr数据请求流程

1.前端初始化xhr对象，设置请求方法：get方法，post方法，form方法，以及请求接口 open() 此时xhr.readyState=0

开始发送数据到后台 send()

<body>
    <button onclick="get()">xhr之get请求</button>
    <button onclick="post()">xhr之post请求</button>
</body>
//创建一个数据请求的实例化对象
//使用get方法
<script>
    function get(){
        var xhr = new XMLHttpRequest()
        xhr.open('get','/getTest?name=张三&age=17')
        xhr.send()
    }
//使用post方法
    function post(){
        var xhr =new XMLHttpRequest()
        // post请求方式 接口后面不能追加参数
        xhr.open('post','/postTest')
        // 如果使用post请求方式 而且参数是以key=value这种形式提交的
        // 那么需要设置请求头的类型
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
        xhr.send('name=张三&age=17')
    }
</script>

2.后端接受前端发送过来的数据，此时xhr.readyState = 1

3.将数据从后台返回给前端，res.send()发送数据到前端，此时xhr.readyState = 2

//五句固定代码
var express=require('express')
var bodyParser= require('body-parser')
var web = express()
//public 为允许前端访问的静态文件夹
web.use(express.static('public'))
web.use(bodyParser.urlencoded({extended:false}))

//使用get方法
//参数 req 前端传递给后端的数据  参数res 后端传递给前端的数据
web.get('/getTest',function(req,res){
    var name = req.query.name
    var des = req.query.des
    setTimeout(function(){
        res.send('get方法接受成功')
    },2000)
})
//使用post方法
//参数 req 前端传递给后端的数据  参数res 后端传递给前端的数据
web.post('/postTest',function(req,res){
    var name = req.body.name
    var age = req.body.age
    setTimeout(function(){
        res.send('post方法接受成功')
    },2000)
})

4.前端接受后台发送过来的数据，接受部分数据时 xhr.readyState = 3，全部数据接收完毕 xhr.readyState=4

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        alert('数据全部接收完毕')
    }
}

xhr之form请求

form请求可以看成是在post请求上的延伸

上面的前端代码要改成下面的样子

<body>
    <button onclick="get()">xhr之get请求</button>
    <button onclick="post()">xhr之post请求</button>
    <button onclick="form()">xhr之form请求</button>
</body>
//创建一个数据请求的实例化对象
//使用get方法
<script>
    function get(){
        var xhr = new XMLHttpRequest()
        xhr.open('get','/getTest?name=张三&age=17')
        xhr.send()
    }
//使用post方法
    function post(){
        var xhr =new XMLHttpRequest()
        // post请求方式 接口后面不能追加参数
        xhr.open('post','/postTest')
        // 如果使用post请求方式 而且参数是以key=value这种形式提交的
        // 那么需要设置请求头的类型
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
        xhr.send('name=张三&age=17')
    }
//使用form方法
    function post(){
        var xhr =new XMLHttpRequest()
        var form = new FormDate()
        form.append('name','张三')
        form.append('age','17')
        xhr.open('post','/formTest')
        xhr.send(form)
    }
</script>

后端中要添加如下代码

//引入multer模块
var multer = require('multer')
//初始化multer对象
var form = multer()
web.post('/test',form.array(),function(req,res){
    name = req.body.name
    age = req.body.age
    res.send('姓名是'+name+'，年龄是'+age)
})

以上就是使用xhr的三种数据请求方式

xhr

xhr数据请求流程

相关阅读

相关文章

相关问答