ajax请求报文和响应报文一

最新推荐文章于 2024-04-03 18:23:44 发布

米白蓝

最新推荐文章于 2024-04-03 18:23:44 发布

阅读量214

点赞数

分类专栏： ajax 文章标签： ajax

本文链接：https://blog.csdn.net/qq_50563868/article/details/126202713

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

请求报文：
- 请求行：里面有请求的方法（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，端口监听中');
})

<!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>