http的请求与响应（一）

SwordQiu
131 阅读5分钟

前置条件：

1、下载代码

2、确保电脑安装node.js （比较新的版本）

3、安装crul工具--我是mac 直接使用brew install curl

代理工具说明

我们知道可以通过url（统一资源定位符）来获取互联网上的各种文件。

url是互联网的基础，网页之间可以通过link来达到互相跳转的功能。

一般来说我们可以通过以下方式来使用url向服务器发送请求：

1、浏览器地址栏

2、curl命令

这两种帮助发送请求的被称为：代理工具（User-Agent）

实际上curl可以模拟还原浏览器向服务端发送请求时所做的事。

我们先来尝试在终端中使用curl看看向服务端发送请求时做了哪些事。

输入curl -v http://baidu.com 从第一行代码到第三行开始看：

curl帮我们通过dns服务器来解析了域名，建立了tcp连接，并且发送请求尝试链接到39.156.69.79这个ip地址，端口号为80 因为我们使用的是http服务。

发送的请求内容：

GET / HTTP /1.1

使用get（获取）的方式来访问 `/`根目录
协议为HTTP 1.1的版本

Host:baidu.com
域名是baidu.com

User-Agent：curl/7.64.1
代理工具是curl，后面是版本号

Accept：*/*
接受所有数据

请求时做了哪些事？

我们从上面的代码可以看出以下步骤：

1、你GET了一下，GET实际上是一个请求动词，意思是想要获取。

2、GET后面的/跟命令行的根目录是一致的，你是不是联想到了什么？没错就是要获取根目录里面的内容

3、HTTP / 1.1 表示用到的http协议是1.1版本（话说这个版本用了几十年 还是很流行啊）

4、Host:baidu.com 你告诉服务器域名是baidu.com

5、User-Agent：curl/7.64.1 代理工具是curl，后面是版本号

6、Accept：/ 表示接受所有数据

打个比方，你现在是在跟服务器这位大哥打招呼：大佬，我需要你传给我一个东西，至于是什么东西，无所谓xxxx。我要从你的根目录上获取xxxx，你要是还不明白的话这个xxxx的对应的域名是xxxx，噢我是用xxxx工具来跟你联络的。

考验来了

上面的xxxx代表什么？

服务器做了什么？

服务器收到请求

请复制在【前置条件】代码，并且拷贝到js文件中，并且新建第一个终端并运行 node server.js（注意路径，要在存放js文件的目录中）

这段代码是什么呢？

实际上这段代码应该放在服务器上，但是因为我没有服务器，所以只好让你把自己的电脑当成服务器来跟自己交互，只需要使用http://127.0.0.1就可以实现和自己对话。

噢，如果代码运行没成功，请按照提示正确输入：

node server.js 8888 实际上这个8888表示端口（port），你随便写，不需要按照我的要求填写8888。

当运行成功后，【新开】一个终端，输入curl -v http://127.0.0.1:xxxx

  • 这里的xxxx就是你输入的端口号，假设这时候设置的是8888

  • -v指的是选项，--verbose的缩写，指定该选项后，可以跟踪URL的连接信息，简单来说能让客户端和服务器的交互更加详细地展示给你看。

这时候回到运行js代码的终端，你看到了什么？

/favicon.ico是默认请求，请忽略。

从上面的反馈信息中，你可以看得出，当你用curl工具发出请求时，服务器端会收到你的信息，如果只写域名的话，默认访问主机的根目录。

整个过程就好像你用curl工具在喊

服务器听到了。

接下去，它在考虑吹点什么

服务器的心路历程

服务器的心路里程取决于你的代码设置

看中间的代码

先看第一行代码： pathWithQuery就是我在客户端的终端中打的路径，根据下图的提示，可以得出这个路径此时为/,这是因为默认输入域名时访问的是服务器的根目录。 查看提示

在客户端中重新发送链接curl localhost:8888/x试试，提示内容： 可以看到返回了一串css代码body{color:red}，请记住它后面我们要用到。

对应代码 图片2

可以得出结论，当在前端中请求时，服务器会根据请求的路径来判断想访问的内容，并且根据代码来返回对应的内容，这个对应的内容则是写在response.write()中。

response.write是什么

在内部填写一个html代码试试，注意看红框的代码

这时候curl一下试试 可以看到用curl后服务器端将write()内部的字符串和end()内部的字符串发送返回了。

那么如果用chrome工具发送这段代码会怎样呢？

chrome把这段代码放到了可视化界面上，并且帮你访问了/x，并读取了里面的css代码body:{color:red}从而实现在可视化界面上渲染效果。

为什么我没有发送/x的指令，它却把css代码也渲染出来了呢？

现在请看我在上面图中的红框代码，你知道什么？

没错，说明 <link rel="stylesheet" href="/x">这段代码将链接link到了/x上，自动帮你做了访问，发现这里有一段css，于是css和html帮你做了渲染。

现在我们可以画一张草图来模拟一下客户端和服务端的交互过程，html和css之间发生了什么

最后得出一个简单的结论：

1、如果你用url向服务器发送请求，你写什么路径它就会帮你做判断，看给你返回什么

2、服务器响应的内容取决于服务器程序员写的代码，会返回write()和end()里面的字符串，浏览器会解析内容，并把内容展现在可视化窗口区域

3、你在客户端中发送请求,服务端会返回这个if判断下的write()和end()里面的内容。

延伸

  • 通过<link rel="stylesheet" href="">，服务器会自动帮你访问另外的路径，并做对应的返回。现在知道为什么要写这段代码了吗？

  • 通过<script src=""></script>能达到和link一样的效果

avatar
文章
阅读
粉丝