Web 应用通讯的基石 — HTTP 协议
source link: http://misaka.im/index.php/archives/13/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
用来请求访问已被 URI 识别的资源。如浏览器请求某个地址的资源。
用来传输实体参数的方法。用法上与 GET 很相似,但不是为了获取相应结果。
用来传输文件。但在 Web 应用中配合 RESTful 架构实现资源更新。
用于确认 URI 及资源的响应头部。
DELETE
与 PUT 方法相反,用于删除文件。
OPTIONS
用于查询请求 URI 资源是否支持指定的方法。常出现跨域资源共享(CORS)中。
返回状态码
从服务器端返回的状态码,描述了当前请求是否被正常处理,还是出现错误。
2XX 成功
200 OK
请求被服务器正常处理,GET 请求会返回资源实体。
3XX 重定向
301 Moved Permanently
302 Found
当浏览器遇到 302 响应时,响应头带上了 Location
字段,用于资源重定向到新的 URI。
在 Laravel
中可以使用 return redirect()->away('https://www.baidu.com');
来重定向到新的地址。
当 POST 请求被拒返回 302 时,几乎所有浏览器都会再发出一条 GET 请求到
Location
上。
304 Not Modified
作为缓存策略的一部分,当客户端附带了 If-Match,If-Modified-Since,If-None-Match,If-Range,If-Unmodified-Since
其中一种,告知该资源的本地缓存还可以被使用。
典型值为 If-Modified-Since: {Last-Modified}
If-None-Match: {ETag}
HTTP 协议的产生就是被设计用于 Web 浏览器和服务器之间的通信,也直接基于 TCP/IP 协议,这保证传输时比 UDP 可靠。同时还有以下优点
sequenceDiagram
客户端->>服务器: 请求 (Requst)
服务器->>客户端: 响应 (Response)
由像浏览器这样的客户端发出的消息叫做 Requsts,被服务端回应的消息叫做 Responses。
从百度开始,当我们敲下回车键时,浏览器就发出了一条请求:
GET / HTTP/1.1
Host: www.baidu.com
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9
Chrome 在请求时,使用了 GET 方法来获取在 www.baidu.com
上的资源,没有强制的地写成 http://www.baidu.com:80
,并告诉服务当前协议是 1.1 版本。
Host 的 Host: www.baidu.com
正好和 GET 后面的 /
组成 www.baidu.com/
,如果请求该主机下的其他目录,这个位置也会有相应的变化。
使用 wireshark 可以捕获这个请求,但最直观方法是打开 Chrome Network 面板来查看
在请求头总还有一些字段,
User-Agent 虽然能判断客户端的版本和一些信息,显得非常糟糕的是,它经常在业务上被用来区别和提供不同的页面或者服务。
Accept 客户端告诉服务器可以处理的内容类型,通常这里会用 MIME 类型来表示;反过来,服务器通过响应头中的 Content-Type
来告诉客户端它返回内容的类型。
当服务器收到这个请求时候,经由 Nginx 或 Apache 响应之后,可能还会经过 PHP 或 Java 语言做数据存取处理,最终响应回到了客户端
HTTP/1.1 302 Found
Connection: Keep-Alive
Content-Length: 225
Content-Type: text/html
Date: Sun, 02 Sep 2018 03:57:06 GMT
Location: https://www.baidu.com/
P3p: CP=" OTI DSP COR IVA OUR IND COM "
Server: BWS/1.1
Set-Cookie: BAIDUID=C267DF134F37696F3274F4649989CCD4:FG=1; expires=Thu, 31-Dec-37 23:55:55 GMT; max-age=2147483647; path=/; domain=.baidu.com
Set-Cookie: BIDUPSID=C267DF134F37696F3274F4649989CCD4; expires=Thu, 31-Dec-37 23:55:55 GMT; max-age=2147483647; path=/; domain=.baidu.com
Set-Cookie: PSTM=1535860626; expires=Thu, 31-Dec-37 23:55:55 GMT; max-age=2147483647; path=/; domain=.baidu.com
Set-Cookie: BD_LAST_QID=13976029323002
常规 General
Request Method , 根据数据流动的方向和交互,HTTP 请求类型分为好几种类型
Request Method常用场景GET获取 HTML CSS JS 图片等资源文件,也用于文本数据(JSON、XML)的获取OPTIONS询问服务器某个资源支持的 Request Method ,返回头中会有Allow
或者 Access-Control-Allow-Methods
。发起跨域请求时,一些应用框架会发起该请求POST发送数据给服务器常用的方法,在数据提交时和跨域请求场景下变得复杂请求 Requst
客户端发出请求时,不论上述的 GET/POST 还是其他方式,下面的请求头都有可能出现:
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
发送数据给服务器常用的方法,需指定请求头中的 Content-Type
来告诉服务器发送内容的实际编码类型,与后端进行数据交换时,需要提前约定好数据类型及结构,这样能高效地推进项目进度。在表单提交和资源上传时尤为重要;
text/html; charset=UTF-8
还记得我们编写 HTML 时候首先就是声明了文档类型: <!DOCTYPE html>
。 <meta charset="UTF-8">
也在这里得到了体现text/css
CSS 样式文件application/javascript
JavaScript 文件image/png
png 图片资源文件application/x-www-form-urlencoded
请求实体中的数据内容类型以 urldecode 方式带上,GET 时将 encode 后的字符作为 URL 的查询参数https://92yo6ypwz4.codesandbox.io/abc?aa=111&bb=222
;POST 时 encode 内容存在于实体中(表单提交 )aa=111&bb=222
application/json;charset=UTF-8
告诉服务端请求实体 POST 中带上的数据内容类型为 JSON在响应头中也存在Content-Type
,这样编程时才能预料服务器返回的内容;
Referer: http://www.baidu.com/
当前请求来源页面的地址,某些场景下服务端会校检该字段来作统计分析、日志记录以及缓存优化等。
在支付场景(微信当前调起H5支付的referer为空)下校检了该字段防止非法跳转进入的支付。
Cookie: PHPSESSID=298zf09hf012fh2; csrftoken=u32t4o3tb3gg43; _gat=1;
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST
响应 Response
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://www.infzm.com
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: x-requested-with, content-type, origin, cache-control, pragma, authorization, accept, accept-encoding
Access-Control-Allow-Methods: PUT, POST, GET, OPTIONS, DELETE
Content-Type: application/json
在响应头中也存在Content-Type
,这样编程时才能预料服务器返回的内容
Content-Type: text/html; charset=UTF-8
keyvaluedata{ foo: 'bar', baz: 'qux' }
dataType指定响应返回的数据类型,默认识别 HTTP 中 MIME 类型contentType请求内容的编码类型 默认为 application/x-www-form-urlencoded
请求 Requst
contentType
指定了请求内容的编码格式,而 jQ 默认使用 application/x-www-form-urlencoded
,使得实体内容会经过 $.param()
序列化:
$.param({ foo: 'bar', baz: 'qux' }) // "foo=bar&baz=qux"
使得实体数据 encoded
$.ajax({
url : "/api/user/register_by_phone",
type : "POST",
data : jQuery.param({
phone : $(el_arr[0]).val(),
verify_code: $(el_arr[1]).val(),
password : md5($(el_arr[2]).val()),
}),
timeout : 50000,
dataType: 'json',
success : function (res) {
if (res.code != 200) {
resolve(res.msg)
} else {
resolve(text_success_register)
}
}
})
响应 Response
dataType
指定服务器返回的实体数据类型,不指定时,就要确保返回的 Content-Type
与实体内容编码一致
Content-Type
Content-Type: application/json
GET / HTTP/1.1
Host: www.baidu.com
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9
HTTP/1.1 302 Found
Connection: Keep-Alive
Content-Length: 225
Content-Type: text/html
Date: Sun, 02 Sep 2018 03:57:06 GMT
Location: https://www.baidu.com/
P3p: CP=" OTI DSP COR IVA OUR IND COM "
Server: BWS/1.1
Set-Cookie: BAIDUID=C267DF134F37696F3274F4649989CCD4:FG=1; expires=Thu, 31-Dec-37 23:55:55 GMT; max-age=2147483647; path=/; domain=.baidu.com
Set-Cookie: BIDUPSID=C267DF134F37696F3274F4649989CCD4; expires=Thu, 31-Dec-37 23:55:55 GMT; max-age=2147483647; path=/; domain=.baidu.com
Set-Cookie: PSTM=1535860626; expires=Thu, 31-Dec-37 23:55:55 GMT; max-age=2147483647; path=/; domain=.baidu.com
Set-Cookie: BD_LAST_QID=13976029323002424979; path=/; Max-Age=1
X-Ua-Compatible: IE=Edge,chrome=1
<html>
<head><title>302 Found</title></head>
<body bgcolor="white">
<center><h1>302 Found</h1></center>
<hr><center>7a367f7b87705e16b985e34ca59b8ae8b1d28d47
Time : Tue Aug 21 10:55:16 CST 2018</center>
</body>
</html>
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK