menu Chancel's Blog
rss_feed lightbulb_outline

前端开发快餐01 - HTTP

warning 这篇文章距离上次更新于609天前,文中部分信息可能已失效,请自行甄别无效内容。

自己在写代码的时候发现不管前端代码还是后端代码,也许都可以信手拈来,但涉及到一些前后端交互时,有不少边缘概念还是很模糊的,于是整理一下关于http的那些概念以便加深对Http概念的理解

Http

概念

来自维基百科的介绍

超文本传输协议(英文:HyperText Transfer Protocol,缩写:HTTP)是一种用于分布式、协作式和超媒体信息系统的应用层协议[1]。HTTP是万维网的数据通信的基础。 设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。通过HTTP或者HTTPS协议请求的资源由统一资源标识符(Uniform Resource Identifiers,URI)来标识。

简单讲,就是如果你需要获取HTML,浏览器发送请求到后端,后端根据请求响应返回HTML,这个时候就会涉及到前端数据提交(我需要什么样子的HTML),后端数据处理返回(给你你需要的HTML数据),这个过程就需要确定双方协议,否则就跟讲不同语言的人一样,语言不通就无法互相沟通。请求可能会失败,可能需要夹带复杂的数据,由此引入Http协议。

状态码

  • Http状态码
    • 1xx
      • 消息——请求已被服务器接收,继续处理
    • 2xx
      • 成功——请求已成功被服务器接收、理解、并接受
    • 3xx
      • 重定向——需要后续操作才能完成这一请求
    • 4xx
      • 请求错误——请求含有词法错误或者无法被执行
    • 5xx
      • 服务器错误——服务器在处理某个正确请求时发生错误

头字段

来自维基百科的介绍

HTTP头字段(英语:HTTP header fields)是指在超文本传输协议(HTTP)的请求和响应消息中的消息头部分。它们定义了一个超文本传输协议事务中的操作参数。HTTP头部字段可以自己根据需要定义,因此可能在 Web 服务器和浏览器上发现非标准的头字段。

  • 响应头包含了非常多内容,具体内容可以参考维基百科,下面简单总结下请求头(Request header)跟响应头(Response header)

  • Request header

    • Accept:告诉服务器,客户机支持的数据类型
    • Accept-Encoding:告诉服务器,客户机支持的数据压缩格式
    • Cache-Control:缓存控制,服务器通过控制浏览器要不要缓存数据
    • Connection:处理完这次请求,是断开连接还是保持连接
    • Cookie:客户机通过这个可以向服务器带数据
    • Host:访问的主机名
    • Upgrade-Insecure-Requests:参考http://www.cnblogs.com/hustskyking/p/upgrade-insecure-requests.html
    • User-Agent:告诉服务器,客户机的软件环境
  • Response Headers

    • Connection:处理完这次请求后,是断开连接还是继续保持连接
    • Content-Encoding:服务器通过这个头告诉浏览器数据的压缩格式
    • Content-Length:服务器通过这个头告诉浏览器回送数据的长度
    • Content-Type:服务器通过这个头告诉浏览器回送数据的类型
    • Date:当前时间值
    • Server:服务器通过这个头告诉浏览器服务器的类型
    • Vary:Accept-Encoding ——明确告知缓存服务器按照 Accept-Encoding 字段的内容,分别缓存不同的版本;参考:https://imququ.com/post/vary-header-in-http.html
    • X-Powered-By:服务器告知客户机网站是用何种语言或框架编写的。
  • 查看响应头(Chrome浏览器)

    • 在浏览器中,F12打开开发人员控制台,
    • 选择network(网络)选项卡
    • 刷新当前页面,选中任意一个资源,查看右侧出现的窗口,里面即是Request header跟Response Headers

请求方法(八种)

加粗部分是最常用的Http请求方法,其他方法并不常见

  • GET
    • 向指定的资源发出“显示”请求。使用GET方法应该只用在读取数据,而不应当被用于产生“副作用”的操作中,例如在Web Application中。其中一个原因是GET可能会被网络蜘蛛等随意访问。参见安全方法
  • POST
    • 向指定资源提交数据,请求服务器进行处理(例如提交表单或者上传文件)。数据被包含在请求本文中。这个请求可能会创建新的资源或修改现有资源,或二者皆有。
  • OPTIONS
    • 这个方法可使服务器传回该资源所支持的所有HTTP请求方法。用'*'来代替资源名称,向Web服务器发送OPTIONS请求,可以测试服务器功能是否正常运作。
  • HEAD
    • 与GET方法一样,都是向服务器发出指定资源的请求。只不过服务器将不传回资源的本文部分。它的好处在于,使用这个方法可以在不必传输全部内容的情况下,就可以获取其中“关于该资源的信息”(元信息或称元数据)。
  • PUT
    • 向指定资源位置上传其最新内容。
  • DELETE
    • 请求服务器删除Request-URI所标识的资源。
  • TRACE
    • 回显服务器收到的请求,主要用于测试或诊断。
  • CONNECT
    • HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。通常用于SSL加密服务器的链接(经由非加密的HTTP代理服务器)。 方法名称是区分大小写的。当某个请求所针对的资源不支持对应的请求方法的时候,服务器应当返回状态码405(Method Not Allowed),当服务器不认识或者不支持对应的请求方法的时候,应当返回状态码501(Not Implemented)。
  • PATCH(由 RFC 5789 指定的方法)
    • 用于将局部修改应用到资源。

数据提交/更新

Form

来自维基百科的介绍

网页窗体(英语: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

来自维基百科的介绍

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使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在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!");
    }

Fetch

来自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 API

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

上述的前后端交互中的概念都是较常见的,在日常开发中会经常遇到的一些概念,还有许多常见的概念后期会慢慢继续整理成新的文章。

阅读: 211
分类: 杂锦记录
创建时间: 2018-11-19 18:44:27
更新时间: 2019-12-05 15:54:12
博文目录

[[replyMessage== null?"发表评论":"@" + replyMessage.m_author]]

account_circle
email
web_asset
textsms

评论列表([[messageList.data.items.length]])

[[messageItem.m_author]] [[messageItem.m_author]]
[[messageItem.create_time]]
[[messageItem.m_environ.browser]] [[messageItem.m_environ.os]] [[messageItem.m_environ.device]]
[[subMessage.m_author]] [[subMessage.m_author]] @ [[subMessage.parent_message.m_author]] [[subMessage.parent_message.m_author]]
[[subMessage.create_time]]
[[subMessage.m_environ.browser]] [[subMessage.m_environ.os]] [[subMessage.m_environ.device]]