vlambda博客
学习文章列表

使用ajax发送第一个请求

分析步骤

  • 使用 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. 全部返回,意味着此次请求失败或者成功