学习笔记 HTTP | 青训营

zzh66vip
62 阅读7分钟

Web标准与前端开发

Web开发标准

通过W3C，Ecma会议可以了解

HTTP协议

什么是http协议

HTTP（Hypertext Transfer Protocol）是一种用于在计算机网络上进行数据通信的协议，它是现代互联网的基础之一。HTTP的发展始于20世纪90年代初，它是由网络科学家Tim Berners-Lee在CERN开发的，旨在支持万维网中的超文本文档传输。

HTTP的主要目标是允许不同计算机之间的信息交换，特别是在Web浏览器和Web服务器之间传输超文本文档。它是一种无状态协议，这意味着每个HTTP请求都是独立的，服务器不会保留之前请求的任何信息。这种无状态性使得HTTP协议可以在大规模的分布式网络中有效地工作。

http协议的特点：客户端-服务器模型、无连接 、无状态性、请求-响应模型、可扩展性、URI、方法、状态码、媒体类型等。

HTTP报文是在HTTP通信中传输的数据单元，它包含了请求和响应的信息。HTTP报文的结构可以分为两种：请求报文和响应报文。

  1. 请求报文结构： 一个HTTP请求报文通常由以下几个部分组成：

    • 请求行（Request Line）： 请求行包括请求方法、请求的URL和HTTP协议版本。例如：GET /index.html HTTP/1.1，其中GET是请求方法，/index.html是请求的URL，HTTP/1.1是协议版本。
    • 请求头（Request Headers）： 请求头包含了关于请求的附加信息，如User-Agent（客户端标识）、Host（主机名）、Accept（可接受的响应媒体类型）等。每个请求头由一个字段名和对应的值组成，使用冒号分隔，例如：User-Agent: Mozilla/5.0。
    • 空行： 请求行和请求头之间用一个空行分隔。
    • 请求体（Request Body）： 在某些请求中，可能会包含请求体，例如在POST请求中传输表单数据、上传文件等。

  2. 响应报文结构： 一个HTTP响应报文通常由以下几个部分组成：

    • 状态行（Status Line）： 状态行包括HTTP协议版本、状态码和状态描述。例如：HTTP/1.1 200 OK，其中HTTP/1.1是协议版本，200是状态码，OK是状态描述。
    • 响应头（Response Headers）： 响应头包含了关于响应的附加信息，类似于请求头。例如：Content-Type: text/html指示响应数据的媒体类型。
    • 空行： 状态行和响应头之间用一个空行分隔。
    • 响应体（Response Body）： 响应体包含了服务器返回的实际数据，如HTML文档、JSON数据等。

示例请求报文：

GET /index.html HTTP/1.1
Host: www.myHTML.com
User-Agent: Mozilla/5.0
Accept: text/html

示例响应报文：

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 6000
​
<!DOCTYPE html>
<html>
<head>
    <title>MyHTML</title>
</head>
<body>
    <!-- Content here -->
</body>
</html>

HTTP报文的结构使得通信双方能够准确地识别和解析请求和响应，从而实现有效的数据交换。报文的格式清晰，头部和体部的分隔通过空行来实现。这种结构性使得HTTP成为了一种灵活且可扩展的通信协议。

静态资源

HTTP中的静态资源是指在服务器上存储的不会经常改变的文件，如图片、CSS样式表、JavaScript脚本、字体文件等。这些资源在服务器上保存为文件，并在需要时通过HTTP协议传输给客户端，以供浏览器加载和显示。与之相对的是动态资源，动态资源是在服务器端生成的，通常是根据用户请求或其他参数生成的内容。

静态资源的应用场景包括但不限于：

  1. 静态网页： 简单的静态网页可以完全由HTML和CSS构成，不需要服务器端的动态生成。这在一些静态内容展示页面或个人简历等场景中非常有用。
  2. 媒体资源： 图片、音频和视频等媒体资源可以作为静态资源存储在服务器上。网站可以使用这些资源来展示多媒体内容，如图片画廊、音频播放器和视频展示。
  3. 静态文件存储： 一些应用程序需要存储和传递静态文件，如文档、PDF文件、压缩包等。通过HTTP服务器存储这些文件，可以方便地在应用中进行分发和访问。
  4. CDN： CDN是一种将静态资源分发到全球各地的网络服务，以减少用户访问时的延迟和提高性能。CDN可以缓存静态资源，使其就近访问，并减轻源服务器的负载。
  5. 浏览器缓存

网页登录

在网页上进行登录过程中，涉及到HTTP的几个关键技术，主要包括：

  1. HTTP请求和响应： 登录过程通常涉及两个主要HTTP操作，即HTTP请求和HTTP响应。用户在浏览器中输入用户名和密码，然后点击登录按钮。这会触发一个HTTP请求，该请求会发送到服务器上的登录端点（通常是一个URL）。服务器会处理这个请求，验证用户提供的凭据，然后返回一个HTTP响应。

  2. 表单提交： 在网页上登录通常通过表单实现，用户输入用户名和密码等信息后，这些信息会被打包成一个HTTP POST请求，然后发送到服务器。表单中的字段会映射到HTTP请求中的数据，这些数据在请求体中被编码并发送到服务器。

  3. Cookie和Session： 为了在用户的不同请求之间保持登录状态，服务器会在成功登录后生成一个唯一的标识符，通常称为

    session ID，然后将该标识符存储在一个称为Cookie的HTTP响应头中发送给浏览器。浏览器会在随后的请求中将这个Cookie自动包含在HTTP头中，使服务器能够识别用户。服务器会使用Session ID将用户与其数据关联起来，以便跟踪登录状态和会话信息。

  4. 安全性和加密： 为了保护用户的敏感信息（如密码）在传输过程中不被恶意第三方截获，通常会使用HTTPS（HTTP Secure）。HTTPS通过SSL/TLS协议对数据进行加密，使数据在传输过程中变得不可读。

SSO登录

SSO代表单点登录（Single Sign-On），它是一种身份验证和访问控制的解决方案，允许用户通过一次登录获得对多个相关但独立的应用程序或系统的访问权限，而无需为每个应用程序都输入不同的凭据。在SSO中，用户只需在一次身份验证后，可以无缝地访问多个应用程序，提高了用户体验并简化了身份验证流程。

跨域（Cross-Origin）指的是在浏览器中，一个网页的代码试图从一个源（域名、协议和端口的组合）去请求另一个源的资源。浏览器出于安全考虑，实施了同源策略（Same-Origin Policy），这意味着默认情况下，一个网页只能与同一个源的资源进行交互，而无法直接与其他源的资源进行交互。

跨域问题通常表现为：

  1. Ajax请求跨域： 在浏览器端使用XMLHttpRequest或Fetch API进行Ajax请求时，受同源策略影响，通常不能跨域请求数据。
  2. 跨域脚本请求： 通过<script>标签加载的外部JavaScript文件（JSONP）可以跨域请求，但受到安全风险。
  3. 跨域资源共享（CORS）： 跨域资源共享是一种通过服务器设置来解决跨域问题的方式，允许在响应头中指定哪些域名可以跨域访问资源。
  4. 嵌入跨域iframe： 如果在一个域名下的页面中嵌入了来自另一个域名的iframe，访问iframe中的内容也被认为是跨域。

解决跨域问题的方法包括：

  1. CORS： 跨域资源共享（CORS）是一种较为安全和常用的跨域解决方案。服务器在响应头中添加特定的CORS头，指示哪些域名允许跨域访问资源。浏览器会自动处理这些头部，实现安全的跨域访问。
  2. 代理： 在自己的服务器上设置代理，将跨域请求发送给服务器，然后由服务器代为请求其他域的资源，再将结果返回给前端。
avatar
文章
阅读
粉丝