ajax请求报文和响应报文一

请求报文：
- 请求行：里面有请求的方法（get，post）、请求路径（路径和参数）、请求协议（http1.1）；
- 请求头：里面像对象一样，有属性和属性值（Host：…com；cookie：name=…;Content-type： application/x-www-from-uriencoded;user-Agent：Chrome 83）；
- 空行；
- 请求体：username-admin&password=admin；
响应报文：
- 响应行：http/1.1 200 ok;
- 响应头：格式和请求报文里面的一样，像对象形式；（Content-Type： text/html;charset=utf-8;Content-lnegth-length: 2048; Content-encoding: gzip）;
- 空行；
- 响应体：主要返回结果（如html的语法内容）

二、express

new XMLHTTPRequest；
open（）；
send（）
onreadystatechange；
readystate:有5个状态值，0,1,2,3,4，分别表示：最开始属性为0，open方法调用的时候，send方法调用完毕，服务端返回部分结果，服务端返回全部结果；

//express.js
const { response } = require('express')
const express = require('express')

const app = express()

// 创建路由规则
app.get('/express',(request, response)=> {
  // 设置响应头,设置允许跨域
  response.header('Access-Control-Allow-Origin', '*')
  // 设置响应体
  response.send('hello express')
})
// 监听端口，启动服务
app.listen(8000, ()=> {
  console.log('服务已经启动，8000，端口监听中');
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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>向express服务端发送请求title>
head>
<body>
  <button>点击发送请求button>
  <div style="border: 1px solid #000; width: 200px; height: 100px">div>
  <script>
    var btn = document.querySelector('button')
    var div = document.querySelector('div')
    btn.onclick = function() {
      // 创建对象
      const xhr = new XMLHttpRequest()
      // 设置请求方法
      xhr.open('get', 'http://127.0.0.1:8000/express')
      // 发送
      xhr.send()
      // 处理服务端返回的结果
      // readystate:有5个状态值，0,1,2,3,4，分别表示：最开始属性为0，open方法调用的时候，send方法调用完毕，服务端返回部分结果，服务端返回全部结果；
      xhr.onreadystatechange = function() {
        if(xhr.readyState == 4) {
          if(xhr.status >= 200 && xhr.status <= 300) {
            console.log(xhr.status);
            div.innerHTML = xhr.response
          }
        }
      }
    }
  script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

相关阅读:
如何使用决策树判断要不要去相亲？
简述如何使用Androidstudio对文件进行保存和获取文件中的数据
零基础学习使用SSRS
GBASE 8A v953报错集锦60--在线扩容过程中使用 swap 导致业务性能下降
SpringBoot+vue实现前后端分离的校园志愿者管理系统
CADD课程学习（7）-- 模拟靶点和小分子相互作用（半柔性对接 AutoDock）
正则表达式模块re
gurobi求解问题时为什么要关闭输出 # 关闭输出 model.setParam(‘OutputFlag‘, 0)
监控画面时间同步校准
buu(rce命令执行)

原文地址：https://blog.csdn.net/qq_50563868/article/details/126202713