【HTTP协议】

书生－w

已于 2023-06-17 10:07:12 修改

阅读量9.4k

点赞数 4

文章标签：网络

于 2023-05-17 12:55:34 首次发布

本文链接：https://blog.csdn.net/m0_53882348/article/details/130716928

版权

🎉🎉🎉点进来你就是我的人了
博主主页：🙈🙈🙈戳一戳,欢迎大佬指点!

欢迎志同道合的朋友一起加油喔🤺🤺🤺

4.2.3 经典面试题：GET与POST的区别？

引言

🌴可以看到，HTTP 协议属于应用层，应用层也是开发人员 / 程序员与其打交道最多的一层，这一层与 Web 开发紧密相连。

1. HTTP协议概述

HTTP协议全称为超文本传输协议，所谓超文本，就是指可以传输文本及其他格式的数据，如音乐，图片，视频等，是一种被广泛应用的应用层协议
对于应用层协议的解释：将数据从A端传输到B端，TCP/IP协议对应的功能是顺丰的功能，但是两端还要对数据进行加工处理或使用，所以还需要一层协议，不必关心通信时的细节，只关心应用，这层协议就是应用层协议
我们平时打开的网站就是通过HTTP协议来传输数据的，HTTP协议是基于传输层TCP协议实现（HTTP1.0，HTTP1.1，HTTP2.0都是基于TCP，HTTP3.0基于UDP实现），我们此处所讨论的以HTTP1.1为主
对于在浏览器访问一个资源（网页，图片，视频等）来说，就是基于HTTP数据包的格式，从主机A的进程传输到主机B的进程
如：在浏览器输入百度的网址（URL）时，浏览器向百度服务器发送了一个HTTP请求，百度的服务器给我们浏览器返回了一个HTTP响应，响应被浏览器解析后，就展示为页面内容

2. HTTP协议的工作过程

在网络通信中，基本上都是客户端与服务器之间的联系。它们之间的沟通一般分为：一发一收、多发一收、一发多收、多发多收。
HTTP 协议就是一发一收的这种模型，当然，这也是最常见的一种模型。
HTTP协议的工作过程也就是客户端与服务端交互的过程（网络通信），这里的客户端指浏览器进程，服务端指web服务器进程
如：在浏览器输入一个网址，浏览器向给对应服务器发送HTTP请求，对方收到这个请求后进行处理，处理完后返回一个HTTP响应

通常访问一个网站的时候，涉及到多次HTTP请求和响应的交互过程，可以通过浏览器的开发者工具的网络标签页，刷新页面查看详细过程

🌵说明：百度搜索的页面是通过HTTPS协议来进行通信的，HTTPS是在HTTP及基础上做了一个加密解密的过程，在后续文章中介绍

3. 使用抓包工具观察HTTP协议格式

3.1 Fiddler抓包工具

HTTP协议是一个文本格式的协议，可以使用抓包工具Fiddler进行抓包，以此来分析HTTP请求和响应的细节
下载地址1(官网地址):Fiddler抓包工具下载地址
下载地址2(搜狗地址):Fiddler4下载_搜狗下载

🌵注意:首次使用会弹出一个对话框 ,需要安装根证书,必须无脑YES,否则只能重装了

🌴上述操作完成以后,就可以开启抓包旅程了

左侧窗口显示了所有的HTTP请求/响应，可以选中某个查看详情
右侧上方显示了HTTP请求报文的内容（Raw标签可以查看详细的数据格式）
右侧下方显示了HTTP响应报文的内容（Raw标签可以查看详细的数据格式）

🌳抓包工具的原理

Fiddler相当于一个代理，当浏览器访问baidu.com时，就会把HTTP请求先发给Fiddler，Fiddler再把请求转发给baidu的服务器，baidu的服务器返回响应时，也是先把数据发到Fiddler，Fiddler再将数据转发给浏览器，所以Fiddler对浏览器和服务器交互的细节否是非常清楚的

🌳上述原理相当于：代理就可以简单理解为一个跑腿小弟，你想买罐冰可乐，又不想自己下楼去超市，那么就可以把钱给你的跑腿小弟，跑腿小弟来到超市把钱给超市老板，再把冰可乐拿回来交到你手上，这个过程中，这个跑腿小弟对于 "你" 和 "超市老板" 之间的交易细节，是非常清楚的

🌾抓包结果

HTTP请求：

HTTP响应：

3.2 HTTP协议格式

🌵协议格式总结

HTTP请求：

首行：请求方法+url+协议版本号
Header头：请求的属性，为多个用冒号空格分割的键值对，每个键值独占一行
空行：表示Header头的结束
Body：空行后面的内容都是Body，Body允许空，如果Body存在，则在Header头中有一个Content-Length的属性来标识Body的长度

HTTP响应：

首行：协议版本号+响应状态码+状态码解释
Header头：请求的属性，为多个用冒号空格分割的键值对，每个键值独占一行
空行：表示Header头的结束
Body：空行后面的内容都是Body，Body允许空，如果Body存在，则在Header头中有一个Content-Length的属性来标识Body的长度

🌴为什么HTTP报文中要存在空行？

HTTP协议并没有规定Header头有多少个键值对，空行就是相当于Header头结束的标记，也就是报头和正文的间隔
HTTP在传输层依赖TCP协议，TCP是面向字节流的，如果没有空行，就会出现“粘包问题”

🌳Body是任意格式的数据，如何解析？

Header头中有两个字段：Content-Length，Content-Type

Content-Length：标识Body的长度（字节长度）
Content-Type：标识Body的数据格式，目的是告诉对方如何解析body

content-length和content-type这两个属性都是用来描述含有body的的请求（POST），如果不含有body，就不需要这两个字段了。

Content-Type的常用格式：(body中的数据格式)

application/x-www-form-urlencode： form表单提交的格式，键值对的形式，键=值，多个键值对用&间隔（与queryString的格式一样），只能是简单类型（数值，字符，boolean等）
image/jpeg：指定具体的一个文件类型，客户端发送请求只能上传一个文件，服务端返回相应只能返回一个图片
text/javascript，text/css，text/html
application/json: 数据为 json 格式
multipart/form-data：简称form-data格式，一般用于请求，不用于响应，可以发送多个字段，每个字段可以是简单类型（数值，字符，boolean等），也可是复杂类型（图片，视频等）

🌳请求正文(body)的格式常用表单格式，图片，视频等文件格式，都是用来上传数据到服务端

🌳响应正文的格式常用的是text/javascript，text/css，text/html，来返回网页，css样式文件，js文件，客户端使用这些文件将图片渲染出来，播放视频，下载文件等

🌳application/json格式，请求和响应都常用，对于请求就是输入内容提交到服务端，对于响应就是服务端返回一些数据，客户端js代码获取到响应数据后，然后填充到html中

4. 解析HTTP请求

4.1 请求地址URL

①什么是URL：

URL是“网络唯一资源的地址符”。顾名思义：既要明确主机是谁，又要明确取主机哪个资源。要访问网络资源具体地址在哪。

②URL的组成：

一图带你详解URL

③对各部分进行详细说明：

a.协议方案名：

描述了当前URL是给哪个协议使用的。比如：http://自然是给HTTP使用的；而https://是给HTTPS使用的。

b.登录信息：

这个是在很久之前，在URL中我们直接可以看到用户的用户名和密码，很显然，放到如今是很不适用的，所以现在没有这种写法了。

c.服务器地址：

这告诉了我们要访问的主机是哪个，这里可以是一个IP地址，也可以是域名

d.服务器端口号：

表明我们要访问主机上的哪个程序。而端口号在大部分情况的时候是省略了的。但是省略并不是代表着没有，我们常用默认值来代表省略。比如：对于以http开头的URL我们设置的默认端口号值为80；而对于以https开头的URL我们设置的默认端口号值为443。

e.带层次的文件路径：

文件路径，描述了当前要访问的服务器资源是啥。虽然请求的URL中，写的是一个文件路径，但是不一定服务器上就真实存在这样一个对应的文件。这个文件可能是真实存在的，也有可能是在磁盘上存在的，也可能是虚拟的，由服务器代码构造出的一个动态数据。

f.查询字符串：

本质上是浏览器/客户端，给服务器传递的自定义的信息，相当于对获取到的资源提出了进一步的要求，查询字符串的内容，本质上也是键值对结构，完全是程序员自己定义的，查询字符串以?开头,以键值对的方式组织,键值对之间用&分割,键和值之间使用=分割 , 如userId=10，当使用不同的userId时，会获取到不同的user信息

h.片段标识符：

描述了要访问当前HTML页面中哪个具体子部分，能够控制浏览器滚动到相关位置

④URL小结：

上述的IP地址＋端口＋带层次的文件路径其实就描述了一个网络上具体的资源但是在这个基础之上，还可以携带一些其他的要求，也就是后面的参数。

对URL来说，里面的结构看起来比较复杂，其实最重要的部分与开发相关的就以下四点：

a.ip地址/域名

b.端口号

c.带层次结构的路径

d.query string查询字符串(就是对你访问的资源进行一个补充说明)

⑤URL eocode和decode:

urlencode（url编码）：将url里的中文，空格等转换为16进制数据
urldecode（url解码）：将url里的16进制数据转换为原始的空格，中文等

关于 URL encode

当 query string 中如果包含了特殊字符，就需要对特殊字符进行转义(url encode)
这个转义过程就叫做 url encode，反之，把转义后的内容还原回来就叫做 url decode
url 里面是有很多特殊含义符号的：/ : & = … 这些符号都是在 URL 中具有特定含义的~

注意: 如果,query string 里也包含了这类特殊符号,就可能导致 URL 被解析失败

比如: 当我们在baidu中搜索 C++ 的时候，就可以看到URL中的 query string 里面有一个键值对，就表示了查询词内容

转义的规则如下: 将需要转码的字符转为16进制，然后从右到左，取4位(不足4位直接处理)，每2位做一位，前面加上%，编码成%XY格式

以下是一些在地址栏输入时可能会被自动转换的常见字符：

空格：如果需要作为实际数据，它需要被编码为 %20
#：在URL中用于标识片段标识符(fragment identifier)。如果需要作为实际数据，它需要被编码为 %23。
%：在URL编码中用于表示一个编码序列的开始，因此它自身需要编码为 %25。
&：在URL中用于分隔查询参数。如果需要作为实际数据，它需要被编码为 %26。
+：在某些上下文中，"+" 可能被解释为一个空格。如果需要作为实际数据，它需要被编码为 %2B。
/：在URL中用于分隔路径组件。如果需要作为实际数据，它需要被编码为 %2F。
:：在URL中用于分隔协议和主机，或者主机和端口。如果需要作为实际数据，它需要被编码为 %3A。
;：在URL中用于分隔路径参数。如果需要作为实际数据，它需要被编码为 %3B。
=：在URL中用于分隔查询参数的名称和值。如果需要作为实际数据，它需要被编码为 %3D。
?：在URL中用于标识查询字符串的开始。如果需要作为实际数据，它需要被编码为 %3F。
@：在URL中用于标识用户信息的结束和主机名的开始。如果需要作为实际数据，它需要被编码为 %40。

4.2 认识请求方法类型

请求方法标识具体使用什么方式来操作资源，如：获取资源，保存资源，修改资源，删除资源，属于操作资源的类型

说明：这里只是规范上的约定，具体服务端代码中要怎样实现，由程序员自己决定，GET，POST方法最常用，其他方法了解就行

4.2.1 GET方法

GET方法常用于获取服务器资源，在浏览器中输入URL，浏览器会向服务器发送一个GET请求（浏览器输入URL默认是GET方法），使用JavaScript中的ajax也能构造GET请求

GET请求的特点：

首行的方法为GET
URL的queryString可以为空，也可以不为空，数据一般存放于queryString中
body一般为空

4.2.2 POST方法

POST方法常用于将用户输入的数据提交到服务端（如登陆功能），通过HTML中的form标签能构造POST请求，使用JavaScript中的ajax也能构造POST请求

POST请求的特点：

首行的方法为POST
URL的queryString一般为空
body一般不为空，数据一般保存在body中

4.2.3 经典面试题：GET与POST的区别？

1. 语义不同

GET：是从服务器获得到的数据。更多是取数据的过程。
POST：是向服务器提交/发送要被处理的数据，更多是用来上传数据。
但现状是，GET也经常用来上传数据，POST也经常用来取数据。

2. body 非空不同

GET是没有body的，它是通过query string（查询字符串）向服务器传递数据
但POST是有body的，POST通过body向服务器传递数据，但POST没有 query string。
但是我们是可以通过一定方式让GET拥有body，POST拥有query string的。

3. 幂等（多次请求得到的结果一样，就视为幂等）不同：GET 是幂等的（查询），POST 不幂等（添加插入操作）。

4. GET可以被缓存，POST不能被缓存。

能不能缓存是与是否幂等相关联的，因为幂等的结果是相同的，这样的记录就提高了效率，不用重新查找，而非幂等结果本身就是不确定，因此也没有必要被缓存而浪费间。

5. 最大值的限制不同：标准上没有规定GET的URL的长度，也没有规定POST的body的长度，传输数据量多少，完全取决于不同浏览器和不同服务器之间的区别。

6. 安全性不同：GET是把参数直接显示在URL上的，不安全。POST是放在body中，故相对安全，但也不能完全就说POST比GET安全，用抓包工具就可以抓到POST请求正文body中的数据，也不安全，因此，是否安全，取决于前端在传输密码等mingan信息时是否加密，和GET和POST无关。

4.2.4 其他方法

PUT：与POST相似，只是具有幂等特性，一般用于更新
DELETE：删除服务器指定资源
OPTIONS：返回服务器所支持的请求方法
HEAD：类似于GET，只不过响应体不返回，只返回响应头
TRACE：回显服务器端收到的请求，测试的时候会用到这个
CONNECT：预留，暂无使用

🌵这些方法的HTTP请求也可以使用JavaScript的ajax来构造

4.3. 请求报头（Header）

Header头标识数据包属性，格式为用冒号空格分割的键值对，键：值，每个键值对独占一行

Host：标识服务器主机的地址（域名或IP+端口）
Content-Length：标识Body长度，对方根据这个属性来解析
Content-Type：标识Body的数据格式
User-Agent：简称UA，标识浏览器和操作系统的信息，常用作判断是哪个浏览器，pc，手机
Referer：标识这个页面是从哪个页面跳转过来的
Cookie：用于请求头，浏览器自动携带本网站在本地保存的Cookie信息
Set-Cookie：用于响应头，服务端设置信息

a.Host:

后面跟的是一个域名，可以通过DNS解析转化成IP地址

b.content-length:

body中的数据长度；前面也提到过，HTTP协议是基于TCP协议的，而TCP协议是一个面向字节流的协议，这里就会出现粘包问题，对于同一数据内容被处理在了不同的包中，这个时候想要对整体数据进行处理，是很麻烦的。所以我们通过合理设计应用层协议，来明确包和包之间的边界；比如在HTTP中通过使用分隔符和长度。

如果当前有若干个GET请求到了TCP缓冲区中，应用程序读取请求时，以空行为分隔符。

如果当前有若干个POST请求到了TCP缓冲区中，应用程序读取请求时，这个时候空行后面仍有body，当应用程序读到空行之后，就需要按照content-length表明的长度,继续读若干长度的数据。

c.content-type:

表示请求中body的数据格式；

常见三种数据格式如下：

（1）application/x-www-form-urlencoded: form 表单提交的数据格式 .

（2） multipart/form-data: form 表单提交的数据格式 ( 在 form 标签中加上

enctyped="multipart/form - data" . 通常用于提交图片 / 文件 .

（3）application/json: 数据为 json 格式

4.3.1 User-Agent（UA）

①什么是User-Agent？

简称UA；表示的是用户在拿一个什么样的东西在上网；

②详细示例：

③UA的作用：

早期的时候，有人用棒棒机上网，有人用智能手机上网，浏览器的差别是相当大的，这个时候就给网站开发人员带来了困难，所以就通过UA采取自报家门的这种方式，通过报出相应的需求来得到响应。

但是到如今，主流的浏览器差别就很小了，因此UA这个字段的作用就没有那么大了，但是却也被赋予了新的使命，比如现阶段用来区分是pc端还是手机端，给相应的客户端打开相适应的页面的需求。

4.3.2 Referer

①什么是Referer?

Referer是用来表示当前页面是从哪个页面跳转过来的字段。

②示例：

需要注意的是并不是所有页面都有Referer ，如果是直接通过地址栏输入地址或者是在收藏夹内点开访问，这个时候是没有Referer的

③Referer的作用：

这个关键字是相当重要的，比如广告点击的收费，商家通过广告的Referer跳转页面可以判断出是由哪个网站跳过来，然后进行相应费用的结算。值得注意的是，这些网站可能被黑客篡改，后面我们将会介绍，如何进行加密等。

4.2.3 Cookie

①什么是Cookie？

Cookie就是给浏览器提供一种能够持久化存储数据的机制。这里的持久化是指不会因为电脑或者应用程序重启而导致数据丢失，也就是说实质上是写在磁盘上的内容。

②Cookie的组织形式：

a.根据域名来组织，针对每个域名分配一个小房间。

举个例子，当我访问百度的时候，浏览器会给这个域名记录一组cookie

b.在其中一个小房间里，又会按照键值对的形式来组织数据。

例如：

③Cookie数据的来源：

Cookie数据实际上是服务器返回给客户端的

当我们删除这些cookie再次刷新页面后,使用fiddler抓包获取的响应如下图

这些cookie数据实际上都是服务器返回给客户端的,当我们再次刷新网页查看cookie,发现这些cookie都回来了

④如何更好理解cookie？

这里举一个通俗易懂的例子：

当你去一个医院看病的时候，往往那个医院会让你去办一张就诊卡，后续的所有操作都是基于就诊卡上来进行的操作，这个就诊卡就有唯一确定你身份的身份证号码和名字。因此当你后续需要再次来该医院看病时，医生一刷你的就诊卡就能够知道你的既往病史，若是医生给你开了检查或者是药，那么这个时候就存储在了你的就诊卡上。此时cookie就相当于这个就诊卡，但是它存储的大小也是有限的，因此实际上存储我信息的并不是这张卡，而是可以由这张卡连接的医院的服务器。服务器通过这张卡作为媒介来存储需要的信息。

Cookie的最重要的应用场景就是存储会话id,进一步的让访问服务器的后续页面的时候。能够带上这个id 从而让服务器能够知道当前的用户信息.(服务器上保存用户信息这样的机制就称为Session会话)。
如同这里，每个session上存储了用户的关键信息（基本信息，既往病史......）

每个session也有一个会话标识sessionld(这里就诊卡的sessionld就是指存储这个会话的id)

那么cookie能不能存别的信息？

答案是可以的，这个是可以根据程序员的需要来进行设定的。

⑤对session会话的理解：

我们可以把微信列表的所有聊天对象作为会话，那么每一个对象中的详细内容就是该会话的详细信息

理解登录过程

重点说明：
登陆成功后，服务端返回的响应中响应头有一个Set-Cookie属性，该属性意味着告诉浏览器要将这些信息存起来，浏览器将收到响应，将Set-Cookie的值存在本地中，客户端浏览器后续访问该网站的其他页面时，发送的HTTP请求中，请求头携带一个Cookie属性，该属性就保存了登陆的一些相关信息

5. 解析HTTP响应

5.1 HTTP响应状态码

状态码由三位数字构成，表示访问一个页面的结果，HTTP响应报文由服务端返回（程序可以设置内容），状态码也可以由程序设置

🥭常见状态码

200：表示服务端对当次请求处理成功
404 Not Found：找不到请求路径url对应的资源
304 Not Modified：表示之前访问过的资源，本次请求时没有被修改过，也就是客户端直接从缓存中获取
403 Forbidden：表示访问被拒绝，一般是没有访问权限，没有登陆时就访问就会出现403
405 Method Not Allowed：方法不支持，检查前端请求方法也要检查后端的请求方法
500 Internal Server Error：服务器内部错误，要检查后端控制台异常堆栈信息
504 Gateway Timeout：请求在服务端处理超时，服务端也有返回响应的时间限制，发现处理时间超时就返回504
302 Move temporarily：临时重定向，响应报文的header部分会包含一个Location字段，表示要跳转到哪个页面
301 Moved Permanently：永久重定向，301也是通过Location字段来表示要重定向到的新地址

🍊状态码总结

	类别	原因
1xx	Informational（信息性状态码）	接收的请求正在处理
2xx	Success（成功状态码）	请求正常处理完毕
3xx	Redirection（重定向状态码）	需要进行附加操作完成请求
4xx	Client Error（客户端错误状态码）	服务器无法完成请求
5xx	Server Error（服务器错误状态码）	服务器处理请求出错

HTTP协议的标准文档中,还有一个特殊的状态码, 418 (彩蛋)

5.2 响应报头（Header）

响应报头的格式与请求报头的格式基本一致，也就是Content-Type，Content-Length等属性含义也和请求中含义相同

响应请求头中可能会有Location属性，指重定向跳转的路径

🍏Content-Type

响应中的Content-Type常见取值有以下几种：(body中的数据格式)

text/html：body数据格式是HTML
text/css：body数据格式是CSS
text/javascript : body数据格式是JavaScript
application/json：body数据格式是JSON

6. 构造HTTP请求

6.1 form表单构造HTTP请求

直接通过浏览器地址栏,输入一个url=> 可以构造出一个 GET 请求~~

6.1.1 form表单的介绍

form（表单）是HTML中的一个常用标签，可用于给服务端发送GET或者POST请求

🍍form的重要参数

action：构造HTTP请求的URL
method：构造HTTP请求的方法（GET或POST，form只支持GET或者POST）

🍓input的重要参数

type：表示输入框的类型，text表示文本，password表示密码，submit表示提交
name：对于GET请求来说，表示构造出的HTTP请求的queryString的key，queryString的value就是输入框输入的内容，对于POST请求来说，数据从queryString转移到了body中
value：input标签的值，对于submit来说，value对于按钮上显示的文本

6.1.2 form表单构造GET请求

<body>
    <!-- form表单，action为请求的url，method为请求的方法 -->
    <form action="https://www.baidu.com" method="GET">
        <!-- name作为键，内容作为值，多个键值对用&间隔 -->
        <input type="text" name="username">
        <Input type="password" name="password">
        <input type="submit" value="提交">
    </form>
</body>

图解如下:

页面效果：

点击提交就会构造出GET请求并发出去

体会form代码和HTTP请求之间的关系：

6.1.3 form表单构造POST请求

与构造GET请求不同的是只需将form的method由GET修改为POST

<body>
    <!-- form表单，action为请求的url，method为请求的方法 -->
    <form action="https://www.sogou.com/" method="POST">
        <!-- name作为键，内容作为值，多个键值对用&间隔 -->
        <input type="text" name="username">
        <Input type="password" name="password">
        <input type="submit" value="提交">
    </form>

页面效果:

点击提交就会构造POST请求并发出去

红框内容就是其提供给服务器的内容。

6.2 Ajax构造HTTP请求

①为什么要引入基于ajax来实现：

因为如我们上面可知，form表单这种形式是一个比较原始的方式，使用form就一定会涉及到页面跳转，这个时候就需要加载浏览器的全部页面，很显然，这是非常麻烦的，尤其是当本身牵扯到的页面较多的时候。所以我们就想能不能只对局部进行变化。而这个情况，就可以用ajax了。

②什么是ajax：

ajax 全称为 Asynchronous（异步） Javascript And XML，是 2005 年提出的一种 JavaScript给服务器发送HTTP 请求的方式。

而实现ajax主要是基于js代码，构造出HTTP请求，再通过js代码来处理响应，并且把一些数据更新到页面上。

③理解异步：（举个通俗的例子）

小张和小王一同约定去办公室，小张准备好了，但是小王还没回来，小张就给小王说，我先睡个午觉，你要到了就给我打个电话。等到小王到了就给小张拨通电话，小张就下来，这就是异步。

当调用者发出一个调用请求后就不管了，等到被调用者结果出来后会主动通知调用者。

④同步和异步的区别：

同步和异步的主要区别主要取决于是调用者主动关注，还是被调用者来给调用者进行通知。

这里再举个例子：

我去店里吃饭，我点了一份牛肉面，这个时候我就有几种选择；

（1）同步阻塞等待：

当我点了牛肉面后，我就守在窗口，直到取到我的牛肉面为止（类似Scanner输入输出流对象）

（2）同步非阻塞等待：

当我点了牛肉面后，我看着队伍还长，我就想着去隔壁买个东西，当我买完回来发现还没到我，就重复这个过程，直到到我

（3）异步等待：（ajax用的方式）

当我点了牛肉面后，我就直接在饭桌旁玩会手机，等牛肉面好了之后，老板给我端到了桌子上。

其中（2）（3）的区别就是在于（2）中的开销相对更大，而（3）是更优的选择。

⑤ajax基于异步等待是如何进行的？

首先构造出一个HTTP请求，发送给服务器，但是我们不确定什么时候能够得到回应，这个时候我们就可以在浏览器里执行其他的代码，直到服务器响应回来后，在通过回调函数的形式，通知相关的js代码

⑥基于jQuery来演示ajax的相关操作：

（1）引入jquery ：

先在搜索引擎中搜索jquery cdn查询词(jQuery CDN)

（2）使用jQuery的ajax：

a.$:这是一个变量名；变量名.js允许$作为变量的一部分，这个$就是jquery中最核心的对象，jQuery中的各种api,都是通过$来触发的。

b.$.ajax():通过$对象来调用ajax.参数只有一个，但是是一个“对象”。（通过一个对象中的若干个键值对来表示不同的参数，这是ajax中非常巧妙的部分）

在使用jQuery的ajax方法时，如果服务器返回的数据类型为application/json，那么jQuery会自动将返回的JSON字符串转换为JavaScript对象或数组。你可以通过body.length直接获取数组的长度。
然而，有些情况下，自动转换可能不会发生，例如，服务器没有将Content-Type设置为application/json，或者返回的数据结构复杂且包含特定格式的字符串，这时就需要手动使用JSON.parse()来转换数据。
如果你在调用body.length时得到的是字符串长度而非数组长度，那么很有可能是返回的数据没有被自动转换为数组。

核心代码：
<body>
   <script>
       $.ajax({
            url: 'https://www.sogou.com',//表示要访问的地址，请求的目标
            type: 'post',  //可以写get.post,put,delete等等,不区分大小写
            data: "这是body",
            contentType: "text/plain",
            //success对应的是一个回调函数,这个函数会在正确获取到HTTP响应后来调用
            //"这就是前面说的异步",回调函数的参数，就是HTTP响应的body部分
            success:function(body){
               //写处理响应的代码
               console.log("获取到响应数据"+body);
           },
           error:function(){
               //这也是一个回调函数，这个函数会在请求失败后被调用，也是异步
               console.log("获取响应失败")
           }
 
       });
   </script>
</body>
运行结果进行抓包：

ajax请求,通过抓包看到,响应里面是200 OK,并且body也是html数据:

但是浏览器却认为是一个失败的请求

出现这个错误的原因：

浏览器禁止ajax进行跨域访问。也就是跨越多个不同的域名（服务器）；对于当前而言，页面处在的服务器是本地文件，而ajax请求的URL是搜狗，这种服务器的不同就导致了跨域操作。

那怎么才不算跨域？

比如：本来页面就属于搜狗，再在页面中通过ajax请求URL，搜狗，这种就不算是跨域。并且端口也要是一样的。

当然跨越这个限制，我们也是可以避免的，如果对方服务器返回的响应中带有相关的响应头，允许跨域操作，那么就是可以的。

因此,当下构造的ajax请求是无法被正确处理的.如果要正确处理，就需要咱们自己有一个服务器，让页面和ajax的地址都是这一个服务器就行了。

6.3 基于Java socket构造

所谓的 " 发送 HTTP 请求 ", 本质上就是按照 HTTP 的格式往 TCP Socket 中写入一个字串.

所谓的 " 接受 HTTP 响应 ", 本质上就是从 TCP Socket 中读取一个字符串 , 再按照 HTTP 的格式来解析。我们基于 Socket 的知识 , 完全可以构造出一个简单的 HTTP 客户端程序 , 用来发送各种类型的 HTTP 请求。

6.4.引入postman

上述构造请求，都是要写代码~~是否有办法,不写代码也能构造请求~~??有一些现成的工具,可以直接构造出 HTTP请求~~ ------------使用postman

下载链接:Download Postman | Get Started for Free

注册账号,登录即可使用

postman还有一个实用的功能,可以自动生成不同编程语言HTTP请求的代码

以上就是HTTP协议的全部内容,我们下期见

书生－w

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
【HTTP协议】

HTTP协议全称为超文本传输协议，所谓超文本，就是指可以传输文本及其他格式的数据，如音乐，图片，视频等，是一种被广泛应用的应用层协议.我们平时打开的网站就是通过HTTP协议来传输数据的，HTTP协议是基于传输层TCP协议实现（HTTP1.0，HTTP1.1，HTTP2.0都是基于TCP，HTTP3.0基于UDP实现），我们此处所讨论的以HTTP1.1为主
复制链接

扫一扫