vlambda博客
学习文章列表

分析步骤

• 使用 ajax 发送请求需要有一台可以接送请求的服务器

• 需要处理请求

• 前端发送请求

接下来我们就是用 node 的 Express 框架写一个简单的后台

1. 新建一个项目文件，使用 npm 命令初始化一个包管理文件

npm init -y

2.使用 npm  安装 Express

npm i express -g

3.项目文件夹下新建一个 express.js 文件

4.使用 node 的导入模块导入express

const express = request('express')
// 将其命名为 app
const app = express()

5.使用 app.get() 指定请求的路径

// 形参 request 是对请求报文的封装
// 形参 response 是对响应报文的封装
app.get('/server', (request, response) => {
    response.send('hello world')
})

6.启动监听端口服务

app.listen(8000, () => {
    console.log('8000端口启动中。。。')
})

此时，终端打印出端口启动中，说明服务启动成功，此时我们可以前端页面进行发送请求

前端部分

<!-- 创建一个按钮和一个用来显示请求数据的div -->
<button id='btn'>发送请求</button>
<div id="result" style="border: 1px red solid; width: 200px; height: 150px;"></div>

<script>
// 使用 DOM 获取按钮和div
let btn = document.getElementsByTagName('button')[0]
let result = document.getElementById('result')

// 绑定按钮点击事件
btn.addEventListener('click', function() {
// new 一个XMLHttoRequest()对象
 const xhr = new XMLHttpRequest()
// 使用 Xhr.open 设置请求的方式和请求的地址
    xhr.open('GET', 'http://127.0.0.1:8000/server')
// 发送
    xhr.send()
// 使用 onreadyStatechange 监听事件在某一个阶段做什么事
    xhr.onreadyStatechange = function() {
        // on 当。。。时候
        // readyState 状态值
        // change 变化
        // 连起来就是当状态值发生变化的时候出发这个函数
        if (readyState === 4){
            // readyState 有5个值
            // 0，初始化XMLHttpRequest对象
            // 1, 调用 open 方法
            // 2, 调用 send 方法
            // 3. 返回部分请求结果
            // 4. 全部返回，意味着此次请求失败或者成功
            // 在全部返回的时候判断，status 状态值等于多少
            // 如果不等于接口文档的值则 return 错误消息
            if (xhr.status !== 200) return alert('请求失败')
            // 如果没有 return 则在 div 中插入请求回来的数据
            result.innerHTML = xhr.response
        }
    }
}
</script>

这个时候整个准备工作就全部做完，如果请求正常将请求回来的数据插入到页面上，如果请求失败则弹窗警告

重点

// readyState 有5个值            // 0，初始化XMLHttpRequest对象            // 1, 调用 open 方法            // 2, 调用 send 方法            // 3. 返回部分请求结果            // 4. 全部返回，意味着此次请求失败或者成功