0
点赞
收藏
分享

微信扫一扫

AJAX(笔记02) - 原生AJAX - HTTP协议简介


HTTP

HTTP(Hypertext transport protocol) 超文本传输协议,协议详细规定了浏览器和万维网服务器之间互相通信的规则。

平时上网,绝大多数的数据交换,使用的都是HTTP协议;客户端按要求发送请求,服务端按要求响应请求;

参考笔记:​​HTTP协议 简介​​ 

AJAX(笔记02) - 原生AJAX - HTTP协议简介_HTTP协议


请求报文

重点是格式与参数,包括四个部分:行、头、空行、体

行   POST /s?ie=utf-8 HTTP/1.1   ## 三部分:请求方式,参数,协议版本
头 Host:baidu.com
Cookie:name=jack
Content-type: application/x-www-form-urlencoded
User-Agent: chrome 83
空行
体 username=admin&password=admin

请求行: 包括三部分;

----请求方式:GET/POST ;

----请求路径:/s?ie=utf-8  也可以叫请求参数;

----协议版本:HTTP/1.1  ,协议是 HTTP, 协版本是 1.1;

请求头:键值对形式,记住几个常用的就行,不必全记;

空行:规定写法,有这么个空行;

请求体:GET请求,没有请体;POST请求有请求体; 


响应报文

响应报文包括四个部分:行、头、空行、体

行   HTTP/1.1  200  OK
头 Content-Type:text/html;charset=utf-8
Content-length:2048
Content-encoding:gzip
空行
体 <html>
<head>
</head>
<body>
<h1>欢迎学习HTTP</h1>
</body>
</html>

响应行: HTTP/1.1  200  OK   也包括三个部分

----协议版本:HTTP/1.1

----响应状态码: 200,400,403,500等;

----响应状态:状态码说明

响应头:也是键值对出现;

空行:存在,看不到而已;

响应体:一串HTML结构;


GET请求示例

搜索 HTTP

AJAX(笔记02) - 原生AJAX - HTTP协议简介_HTTP协议_02

1)打开浏览器开发者工具中的  ​network​​ 面板,选择 ​s?ie=utf-8​ 那一行;没有内容的话,刷新页面就了(参考红框);

2)可以看到  headers 报文信息、Payload 参数解析、 preview 预览、Response 响应内容;(参考蓝框)

3)在 headers 里可以看到 General 一般信息、Response Headers 响应报文,Request Headers 请求报文(参考黄框)

看下 Headers 里的三个部分;

General:一般信息

AJAX(笔记02) - 原生AJAX - HTTP协议简介_HTTP协议_03

---- Request URL :请求地址,一长串,浏览器地址栏里的那些;

AJAX(笔记02) - 原生AJAX - HTTP协议简介_AJAX_04

---- Request Method : 请求方式, GET;另外:还有 POST、PUT、DELETE等;

---- Status Code: 状态码(200)和状态码说明(OK);

---- Remote Address:请求IP地址和端口;

---- Referrer Policy: 来源信息策略;


Request Headers:请求报文

只显示了一部分

AJAX(笔记02) - 原生AJAX - HTTP协议简介_HTTP协议_05

请求行:GET /s?ie=utf-8 ...  HTTP /1.1 

请求头:一堆键值对形式的字符串;

---- Accept :接收的一些信息,gzip 压缩, zh-CN 中文语言等;

---- Connection:keep-alive ;长链接类型(保持链接);

一次完整的请求是:客户端发起请求,服务端返回响应,完成后关闭连接。通常请求并不是一次就完成的,所以如果需要有连接的请求,就需要这种 keep-alive ,在连接保持期间(3000ms),请求会得到更快的响应;

---- Cookie:是浏览器用于在本地保存信息用的,如身份信息等;再比如,之前搜索过什么,下次会有自动弹出完成提示等;

AJAX(笔记02) - 原生AJAX - HTTP协议简介_AJAX_06

---- Referer:是指来源;就是说当前页面是从哪儿点进来的。比如,从A 网页点击搜索到后到了B网页,那在B网页查看 Referer 就会显示 A 网页;

---- User-Agent:用户代理;每个浏览器都会有特定的 User-Agent ,包含了操作系统和浏览器及版本等信息;比如,我这里显示的是 chrome 107.0.0.0 

AJAX(笔记02) - 原生AJAX - HTTP协议简介_HTTP协议_07


Response Headers:响应报文

点开  View Source 查看源码

AJAX(笔记02) - 原生AJAX - HTTP协议简介_HTTP协议_08

响应行:HTTP/1.1 200 OK;

响应头:一堆键值对形式的东西,挑几个说说;

---- Connection:keep-alive 长连接(保持连接)

---- Content-Type:text/html  内容类型;

---- Content-Length:195 指内容长度;

---- Server:BWS/1.1  是指百度的web服务器;


可供参考:​​https://www.cnblogs.com/wulaa/p/7717824.html​​


POST请求示例

以登录 apifox.cn 为例;

AJAX(笔记02) - 原生AJAX - HTTP协议简介_HTTP协议_09

重点看下几个蓝框和黄框的内容;

Request headers :请求报文

AJAX(笔记02) - 原生AJAX - HTTP协议简介_AJAX_10

PSOT请求行:POST /api/v1/login?locale=zh-CN HTTP/1.1

请求方式:POST;

请求路径:/api/v1/login?locale=zh-CN;

协议版本:HTTP/1.1

POST请求头:一堆键值对;Accept,Connection 等信息;

POST请求体:Request Payload

AJAX(笔记02) - 原生AJAX - HTTP协议简介_HTTP协议_11

包含用户名邮箱和密码;


Response Headers:响应报文

AJAX(笔记02) - 原生AJAX - HTTP协议简介_HTTP协议_12

响应行:HTTP/1.1 200 OK  (红框)

响应头:键值对信息;(黄框)


Preview 响应预览

AJAX(笔记02) - 原生AJAX - HTTP协议简介_HTTP协议_13


Response 响应体

AJAX(笔记02) - 原生AJAX - HTTP协议简介_AJAX_14


Cookies 本地信息

AJAX(笔记02) - 原生AJAX - HTTP协议简介_HTTP协议_15

举报

相关推荐

0 条评论