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的三种数据请求方式