一、首先写一个server.js，用于模拟服务器，并启动
// 1.引入express
const express = require('express')
// 2.创建express应用对象
const app = express();
// 为了使用req.body解析post请求的参数
app.use(express.json())
app.use(express.urlencoded({extended: true}))
// 3.创建路由规则
app.get('/', (request, response)=>{
// 设置响应头，设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*')
// 设置响应体
response.send('Hello, Ajax!')
})
app.post('/', (req, res)=>{
res.setHeader('Access-Control-Allow-Origin', '*')
console.log(req.body)
res.send('ajax, post!')
})
// 4.监听端口，启动服务
app.listen(8000, ()=>{
console.log('服务启动，端口8000启动中...')
})
二、前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax Demo</title>
<style>
#result{
300px;
height: 400px;
border: solid;
}
</style>
</head>
<body>
<div id="result">
</div>
<button>点我发送Ajax请求</button>
<script>
const btn = document.getElementsByTagName('button')[0]
btn.onclick = function(){
// 1.创建对象
const xhr = new XMLHttpRequest()
// 2.初始化，设置请求方法和url
xhr.open('GET', 'http://localhost:8000')
// 3.发送
xhr.send()
// 4.事件绑定，处理服务端返回的结果
xhr.onreadystatechange = function(){
// 判断返回结果,0,1,2,3,4
if(xhr.readyState===4){//服务端返回了所有的结果
// 判断响应状态码
if (xhr.status>=200 && xhr.status<300){
// 处理结果, 请求行，请求头，空行，请求体
console.log(xhr.status)//响应码
console.log(xhr.statusText)//相应字符串
console.log(xhr.getAllResponseHeaders())//所有的响应头
console.log(xhr.response)//响应体
// 设置result的内容
const result = document.getElementById('result')
result.innerHTML = xhr.response
}else{
console.log('请求失败')
}
}
}
}
</script>
</body>
</html>
三、GET请求设置参数
在初始化xhr对象的时候，在url中加入参数，例如
xhr.open('GET', 'http://localhost:8000?q=arg1&w=arg2&e=arg3')
先使用?与前面隔开，然后参数=参数值&参数=参数值&参数=参数值，用&连接每个参数
四、POST请求设置参数
xhr.open('POST', 'http://localhost:8000')
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send('username=admin&password=123456')