杨旭光的网站

我们在浏览器上输入一个地址，然后就哗啦啦的在界面上呈现各种各样的网页内容出来。那么从浏览器输入地址，我们敲打“回车”后，到底与服务器做了哪些东西呢，现在我这边写一个简单的服务端tcp来监听这一过程。

<?php

$socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);
socket_bind($socket, '192.168.247.130', 9001);
socket_listen($socket);

$acpt=socket_accept($socket);
$data=socket_read($acpt,2048);
echo $data;

socket_close($socket);

GET 方式请求

好了，现在我们可以在浏览器上输入地址访问：http://192.168.247.130:9001/login?userid=demo&pw=123456

GET / HTTP/1.1
GET /login?userid=demo&pw=123456 HTTP/1.1
Connection: keep-alive
Cache-Control: max-age=0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.130 Safari/537.36
Accept-Encoding: gzip, deflate, sdch
Accept-Language: zh-CN,zh;q=0.8

以上是服务端打印出来的结果。我来来一条条分析浏览器请求内容的意思。

请求参数说

GET /login?userid=demo&pw=123456 HTTP/1.1
get方式请求地址/login?userid=demo&pw=123456 使用http协议版本1.1

Host: 192.168.247.130:9001
请求的服务端IP+端口

Connection: keep-alive
浏览器连接服务器类型:
keep-alive 为持续连接,不会断开

Cache-Control: max-age=0
网页的缓存是由HTTP消息头中的“Cache-control”来控制的，常见的取值有private、no-cache、max-age、must-revalidate等，默认为private。其作用根据不同的重新浏览方式分为以下几种情况：

Cache-directive	打开一个新的浏览器窗口	在原窗口中单击	Enter 按钮刷新	单击 Back 按钮
public	浏览器呈现来自缓存的页面	浏览器呈现来自缓存的页面	浏览器重新发送请求到服务器	浏览器呈现来自缓存的页面
private	浏览器重新发送请求到服务器	第一次，浏览器重新发送请求到服务器；此后，浏览器呈现来自缓存的页面	浏览器重新发送请求到服务器	浏览器呈现来自缓存的页面
no-cache/no-store	浏览器重新发送请求到服务器	浏览器重新发送请求到服务器	浏览器重新发送请求到服务器	浏览器重新发送请求到服务器
must-revalidation/proxy-revalidation	浏览器重新发送请求到服务器	第一次，浏览器重新发送请求到服务器；此后，浏览器呈现来自缓存的页面	浏览器重新发送请求到服务器	浏览器呈现来自缓存的页面
max-age=xxx (xxx is numeric)	在 xxx 秒后，浏览器重新发送请求到服务器	在 xxx 秒后，浏览器重新发送请求到服务器	浏览器重新发送请求到服务器	在 xxx 秒后，浏览器重新发送请求到服务器

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,/;q=0.8
浏览器支持的 MIME 类型分别是 text/html、application/xhtml+xml、application/xml 等等，优先顺序是它们从左到右的排列顺序
text/html表示 html 文档；
Application：用于传输应用程序数据或者二进制数据；
application/xhtml+xml表示 xhtml 文档；
application/xml表示 xml 文档。
q是权重系数，范围 0 =< q <= 1，q值越大，请求越倾向于获得其“;”之前的类型表示的内容。 若没有指定 q 值，则默认为1，若被赋值为0，则用于提醒服务器哪些是浏览器不接受的内容类型。

Upgrade-Insecure-Requests: 1
Chrome浏览器引入的新技术：Chrome浏览器会在每次取得网络数据之前，把不安全的资源的传输升级为HTTPS级别

User-Agent
客户端代理信息

Accept-Encoding: gzip, deflate, sdch
浏览器支持的压缩编码是 gzip 和 deflate
gzip是 GNU zip 的缩写，它是一个 GNU 自由软件的文件压缩程序，也经常用来表示 gzip 这种文件格式。
deflate是同时使用了 LZ77 算法与哈夫曼编码（Huffman Coding）的一个无损数据压缩算法。

Accept-Language: zh-CN,zh;q=0.8
浏览器所支持的语言类型

POST 方式请求

简单编写一个html表单使用post提交

<!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">
    <title>demo</title>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
</head>
<body style="background-color: #eeeeee;">
<div class="container">
    <form method="post" action="http://192.168.247.130:9001/login">
        <input name="userid" placeholder="用户名">
        <input name="pw" placeholder="密码">
        <button type="submit">提交</button>
    </form>
</div>
</body>
</html>

输入内容 demo, 123456 提交，查看服务器结果：

POST /login HTTP/1.1
Host: 192.168.247.130:9001
Connection: keep-alive
Content-Length: 21
Cache-Control: max-age=0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Origin: http://localhost:63342
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.130 Safari/537.36
Content-Type: application/x-www-form-urlencoded
Referer: http://localhost:63342/hituappweb/tripshare.html
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.8

userid=demo&pw=123456

与get方式进行对比，post提交的内容不再是直接跟在url地址上，而且把内容放到最后，并且携带了相关参数来说明：

Content-Length: 21
提交内容长度

Content-Type: application/x-www-form-urlencoded
内容提交方式

userid=demo&pw=123456
提交的真正内容

留意下，我们会发现真正内容与上面的参数是多了一行空行隔开，没错，我们把get方式请求的所有内容，或post方式请求参数（真正内容出外），称为http请求头，http headers。我们可以在浏览器上F12查看下相关内容

可以看到Form Data 是不属于 Request Headers

浏览器http访问(一)