Chancel's blog
我就是这样的人
作者：Chancel， 更新：2019 Dec 05， 字数：6866， 已阅：670
这篇文章更新于 1278 天前，文中部分信息可能失效，请自行甄别无效内容。
自己在写代码的时候发现不管前端代码还是后端代码，也许都可以信手拈来，但涉及到一些前后端交互时，有不少边缘概念还是很模糊的，于是整理一下关于http的那些概念以便加深对Http概念的理解
来自维基百科的介绍
超文本传输协议（英文：HyperText Transfer Protocol，缩写：HTTP）是一种用于分布式、协作式和超媒体信息系统的应用层协议[1]。HTTP是万维网的数据通信的基础。
设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。通过HTTP或者HTTPS协议请求的资源由统一资源标识符（Uniform Resource Identifiers，URI）来标识。
简单讲，就是如果你需要获取HTML，浏览器发送请求到后端，后端根据请求响应返回HTML，这个时候就会涉及到前端数据提交（我需要什么样子的HTML），后端数据处理返回（给你你需要的HTML数据），这个过程就需要确定双方协议，否则就跟讲不同语言的人一样，语言不通就无法互相沟通。请求可能会失败，可能需要夹带复杂的数据，由此引入Http协议。
来自维基百科的介绍
HTTP头字段（英语：HTTP header fields）是指在超文本传输协议（HTTP）的请求和响应消息中的消息头部分。它们定义了一个超文本传输协议事务中的操作参数。HTTP头部字段可以自己根据需要定义，因此可能在 Web 服务器和浏览器上发现非标准的头字段。
响应头包含了非常多内容，具体内容可以参考维基百科，下面简单总结下请求头（Request header)跟响应头(Response header)
Request header
Response Headers
查看响应头（Chrome浏览器）
加粗部分是最常用的Http请求方法，其他方法并不常见
方法名称是区分大小写的。当某个请求所针对的资源不支持对应的请求方法的时候，服务器应当返回状态码405（Method Not Allowed），当服务器不认识或者不支持对应的请求方法的时候，应当返回状态码501（Not Implemented）。
来自维基百科的介绍
网页窗体（英语：WebForms），一个网页表单可以将用户输入的数据，发送到服务器进行处理。因为互联网的用户会操作复选框、单选按钮或文本字段来填写网页上的表格，所以网页窗体的形式类似文件或数据库。例如，网页窗体可应用在在线的电子商务：以信用卡订购产品、要求货运，或可用于检索数据（例如，搜索引擎上搜索）。
表单提交后通常会更新整个页面，服务端可以利用这个特性做到重定向到某个页面的功能
代码例子
<form action="form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" />
</form>
来自维基百科的介绍
AJAX即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术），指的是一套综合了多项技术的浏览器端网页开发技术。
传统的Web应用允许用户端填写表单（form），当提交表单时就向网页服务器发送一个请求。服务器接收并处理传来的表单，然后送回一个新的网页，但这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML码往往是相同的。由于每次应用的沟通都需要向服务器发送请求，应用的回应时间依赖于服务器的回应时间。这导致了用户界面的回应比本机应用慢得多。 与此不同，AJAX应用可以仅向服务器发送并取回必须的数据，并在客户端采用JavaScript处理来自服务器的回应。因为在服务器和浏览器之间交换的数据大量减少，服务器回应更快了。同时，很多的处理工作可以在发出请求的客户端机器上完成，因此Web服务器的负荷也减少了。 类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。虽然其名称包含XML，但实际上数据格式可以由JSON代替，进一步减少数据量，形成所谓的AJAJ。而客户端与服务器也并不需要异步。一些基于AJAX的“派生／合成”式（derivative/composite）的技术也正在出现，如AFLAX
简言之，Ajax可以动态更新网页，而无需更新整个网页。
Ajax应该是目前前端最主流的提交方式，虽然现在Fetch占有量也在逐步上升，但就目前前端大部分主流网页来讲，Ajax的应用应该是占到最大比例的，也是一个前端人员基本必备的知识点。
代码例子(来自W3School例子)
xmlhttp=null;
if (window.XMLHttpRequest)
{
// code for IE7, Firefox, Opera, etc.
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
else
{
alert("Your browser does not support XMLHTTP.");
}
来自维基百科介绍
WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
WebSocket 是 HTML5 开始提供的一种在单个 TCP连接上进行全双工通讯的协议，常用于对请求频繁/实时推送的场景（网页游戏类尤甚），但目前很多网页实现实时推送的方式多是Ajax轮询，而Websocket却是不常见的，这个中原因复杂，很多场景出于后端考虑，做ajax轮询会多消耗服务器资源/网页性能，但却能减少后端开发的工作量（websocket的后台多数情况下需要单独做），所以造成了目前Ajax轮询普遍而更好的方案Websocket却不受待见
JavaScript版本连接Websocket的例子
if ("WebSocket" in window) {
alert("您的浏览器支持 WebSocket!");
// 打开一个 web socket
var ws = new WebSocket("ws://localhost:9998/echo");
ws.onopen = function () {
// Web Socket 已连接上，使用 send() 方法发送数据
ws.send("发送数据");
alert("数据发送中...");
};
ws.onmessage = function (evt) {
var received_msg = evt.data;
alert("数据已接收...");
};
ws.onclose = function () {
// 关闭 websocket
alert("连接已关闭...");
};
}else { // 浏览器不支持 WebSocket alert("您的浏览器不支持 WebSocket!"); } ```
来自MDN的介绍
Fetch 提供了对 Request 和 Response （以及其他与网络请求有关的）对象的通用定义。使之今后可以被使用到更多地应用场景中：无论是service workers、Cache API、又或者是其他处理请求和响应的方式，甚至是任何一种需要你自己在程序中生成响应的方式。
它还提供了一种定义，将 CORS 和 HTTP 原生的头信息结合起来，取代了原来那种分离的定义。 发送请求或者获取资源，需要使用 GlobalFetch.fetch 方法。它在很多接口中都被实现了，比如 Window 和 WorkerGlobalScope。所以在各种环境中都可以用这个方法获取到资源。 fetch() 必须接受一个参数——资源的路径。无论请求成功与否，它都返回一个 promise 对象，resolve 对应请求的 Response。你也可以传一个可选的第二个参数init（参见 Request）。 一旦 Response 被返回，就有一些方法可以使用了，比如定义内容或者处理方法（参见 Body）。 你也可以通过 Request() 和 Response() 的构造函数直接创建请求和响应，但是我们不建议这么做。他们应该被用于创建其他 API 的结果（比如，service workers 中的 FetchEvent.respondWith）。
简言之，这个是个较新的技术，目前应用还不多，目前也还未兼容IE，Chrome版本必须是42以上才支持，详细的内容可以查看MDN对Fetch的介绍
例子
fetch('https://api.github.com/users/chriscoyier/repos').then(response => {
/* do something */
})
REST -- REpresentational State Transfer，英语的直译就是“表现层状态转移”，RESTful API就是REST风格的API，是一种风格，而不是一种标准/技术。
关于RestAPI，阮一峰老师讲的非常简明易懂RESTful API 设计指南、RESTful API 最佳实践，建议没有接触过RestAPI的同学可以阅读这两篇文章。
模板
schema://<API Gateway URI>/rest/{version}/{service}/{method}/{params}
例子
https://api.chancel.cn/rest/api/v1/book/get
上述的前后端交互中的概念都是较常见的，在日常开发中会经常遇到的一些概念，还有许多常见的概念后期会慢慢继续整理成新的文章。