ajax学习第五天

ajax学习第五天

文章目录

1.HTTP协议

1.1 通信

  • 信息的传递和交换
  • 通信的三要素
    • 通信的主体
    • 通信的内容
    • 通信的方式

1.2 互联网中的通信

  • 通信主体：服务器和客户端浏览器

  • 通信内容：网页内容（HyperText），超文本

  • 通信协议：双方完成通信所必须遵守的规则和约定（HTTP协议）

  • 通信方式：

    • 客户端要以HTTP协议的要求的格式把数据**提交**到服务器
    • 服务器要以HTTP协议要求的格式把数据**响应**给客户端

  • 图解

在这里插入图片描述

2.HTTP请求消息

  • HTTP请求：客户端发起的请求
  • HTTP请求消息（请求报文）：客户端发送的服务器的消息

2.1 请求消息的组成部分

  • 图解

在这里插入图片描述

2.2 请求行

  • 图解

在这里插入图片描述

  • 示例
<!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>Document</title>
    <script src="../day04/lib/jquery.js"></script>
</head>
 
<body>
    <button id="getBtn">发起get请求</button>
    <button id="postBtn">发起post请求</button>
 
    <script>
        $(function() {
            // 发起get请求
 
            $("#getBtn").on("click", function() {
                // $.get("http://www.liulongbin.top:3006/api/get", {
                //     name: "k",
                //     age: 18
                // }, function(res) {
                //     console.log(res);
                // })
 
                $.ajax({
                    method: 'get',
                    url: "http://www.liulongbin.top:3006/api/get",
                    data: {
                        name: "k"
                    },
                    success: function(res) {
                        console.log(res);
                    }
                })
            })
 
 
            // 发起post请求
 
            $("#postBtn").on("click", function() {
                $.post("http://www.liulongbin.top:3006/api/post", {
                    name: "k",
                    age: 20
                }, function() {
                    console.log(res);
                })
            })
        })
    </script>
</body>
 
</html>
  • get请求的效果图

在这里插入图片描述

  • post请求的效果图

在这里插入图片描述

2.3 请求头部

  • 请求头部：描述客户端的基本信息
  • 常见的请求头字段
头部字段说明
Host要请求的服务器名
Connection客户端与服务器的连接方式
Content-Length用于描述请求体的大小
Accept客户端可识别的响应内容列表
User-Agent客户端使用的浏览器类型
Content-Type客户端告诉浏览器的实际发送的数据类型
Accept-Encodeing客户端可接收的内容压缩编码形式
Accept-Language客户端可识别的自然语言
  • 图示

在这里插入图片描述

2.4 空行

  • 分隔请求头部和请求体

  • 表示请求头部至此结束

  • 图解

在这里插入图片描述

2.5 请求体

  • 通过**POST请求发送给服务器的数据**

在这里插入图片描述

  • post请求的请求体

在这里插入图片描述

3. HTTP 响应消息

  • 服务器响应给客户端的消息，响应报文

  • 图解

在这里插入图片描述

3.1 状态行

  • 由HTTP协议版本、状态码和状态码的描述文本组成

在这里插入图片描述

  • 示例图

在这里插入图片描述

3.2 响应头部

  • 响应头部用于描述服务器的基本信息，响应头部的键值对组成，键值对之间用冒号分隔

在这里插入图片描述

  • 示例图

在这里插入图片描述

3.3 空行

  • 最后一个响应头部后紧跟一个空行，表示响应头部至此结束
  • 用于分隔响应头部和响应体

在这里插入图片描述

3.4 响应体

  • 存放服务器响应给客户端的资源内容

在这里插入图片描述

4.HTTP请求方法

  • 是HTTP协议中的一部分，用来表明要对服务器上的资源执行的操作，最常用的请求方法是GET和POST
  • 图解

在这里插入图片描述

5. 响应状态码

  • HTTP协议的一部分，用于标识响应的状态

  • 图解

在这里插入图片描述

  • 响应码的MDN文档

<HTTP 响应代码 - HTTP | MDN (mozilla.org)>

5.1 响应码的分类

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

posted @   凌歆  阅读(14)  评论(0)  编辑  收藏  举报
相关博文：
· Ajax学习第一天
· ajax复习
· Ajax day05
· JavaWeb基础学习笔记11——HTTP协议
· AJAX学习笔记
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示