Ajax GET请求和POST请求的基本操作

一、首先写一个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{
            width: 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\')