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的三種數據請求方式