前端网络知识之HTTP学习小结

dingmeng
317 阅读9分钟

服务器

  • 1、一台独立的计算机
  • 2、一个应用程序 作为开发者，通常把服务器看作是一个应用程序

要在茫茫互联网中放到服务器程序，就必须：

  • 1、精确定位到服务器所在的计算机
  • 2、精确定位计算机中的服务器程序
  • 3、精确定位到程序中的某个功能

通常，我们使用url地址来描述以上3个信息

url 全称 Uniform Resource locator, 统一资源定位符，是一个字符串，它的格式如下：

protocol://hostname:prot/path?query#hash

  • protocol:使用的协议，选择不同的协议，会导致和服务器之间消息交互格式、连接方式不同，大部分服务器都支持http和https两种协议

  • hostname: 主机名，可以使ip、域名

  • prot:端口号，0~65535之间的数字，计算机上的程序可以监听一个或多个端口号，如果访问的端口号有程序被监听，则计算机会将到达的网络访问交给对应的程序处理 端口号可以不写，使用默认值

    http协议默认值80

    https协议默认值443

  • path:一个普通的字符串，该字符串会交给web服务器处理，主要用于定位服务

  • query:一种特殊的字符串，该字符串会交给web服务器处理，主要能用于向服务器某个服务传递一些信息，格式为:属性名=属性值&属性名=属性值

  • hash:一个普通的字符串，在浏览器地址总，如果url地址不变，仅变动hash，浏览器不会重新访问服务器

注意：

  • 1、url仅支持ASCII字符，如果包含非ASCII字符，会被现代浏览器进行编码
  • 2、url地址不能过长，很多浏览器对URL地址长度是有限制的，chrom限制为8182个ASCII字符

http协议,规定浏览器和服务器之间数据交互格式的一种协议

http协议和服务器的一次交互看作是两段简单的过程：

  • 请求 request (客户端通过url地址发送数据到服务器的过程)
  • 响应 response(服务器收到请求数据后回馈给客户端的过程)

请求消息格式： 请求消息由两部分组成：请求头 request headers 和 请求体 request body

请求头（是一个多行文本的字符串）

比如我们请求 www.baidu.com/s?wd=html

得到的请求头可能如下：

GET /s?wd=html HTTP/1.1   (它的名字叫请求行)
Host: www.baidu.com
User-Agent:Mozilla/5.0(Windows NT 10.0;Wind64;x64) AppleWebkit/537.36
...

可以看出，该字符串有两个部分组成

1.请求行：请求方法、path、协议

  • 请求方法：一个普通的字符串，会不服务器读取到，常见的请求方法有：GET、POST
  • path: 既url中的 path+query+hash,服务器可能会用到path中的信息
  • 协议：协议以及版本号，目前固定为 HTTP/1.1

2.键值对：大量的属性名和属性值组合，可以自定义。

  • Host：url地址中的hostname
  • User-Agent:客户端信息描述
  • 其他键值对

请求体（包含业务数据的字符串）

理论上，请求体可以是任意格式的字符串，但习惯上，服务器普遍都采用以下格式

  • application/x-www-form-urlencoded: 属性名=属性值&属性名=属性值
  • application/json:{"属性名":"属性值"，"属性名":"属性值"}
  • multipart/form-data:使用摸个随机字符串作为属性之间的分隔符，通常用于文件上传

由于请求体的格式多样性，服务器在分析请求体的时候可能无法知晓具体的格式，因此服务器往往要求在请求头中附带一个属性 Content-Type来描述请求体使用的格式。 例如：

  • Content-Type: application/x-www-form-urlencoded
  • Content-Type: application/json
  • Content-Type: multipart/form-data

GET和POST

http并没有规定请求方法必须是什么，但随意的请求方法服务器可能无法识别 服务器一般能识别GET和POST请求，并做一下差异化的处理：

  • GET请求，不读请求体，业务数据从path和query或hash中读取
  • POST请求，读取请求体，业务数据从请求体中获取，请求体的格式不同服务器要求不同

在浏览器中输入url地址是不能产生POST请求的，可以使用表单产生POST请求

由于服务器对GET和POST处理差异，造成了GET和POST请求的差异：

  • GET请求一般没有请求体，POST请求有
  • GET请求的业务数据放在地址中，安全性较差
  • GET请求传递业务数据是有限的，POST是无限的
  • GET请求利于分享，POST不行
  • 在浏览器刷新或回退页面时，如果是GET请求，浏览器会重新发送请求，如果是POST则会重新构建请求体，一般浏览器会有提示

响应消息格式

和请求类似，响应消息分为响应头（response headers）和响应体 (response body)

响应头

HTTP/1.1 200 OK(它的名字叫响应行)

可以看出，该字符串有两个部分组成 1、响应行

  • 协议：协议以及版本号，目前固定为HTTP/1.1
  • 状态码和状态文本:一个数字和数字对应的单词，来描述服务器的响应状态，浏览器会根据状态码做不同的处理。
  • 200 OK:一切正常。
  • 301 Moved Permanently:资源已被永久重定向（你的请求我收到了，但是呢，你要的东西不在这个地址了，我已经永远把它移动到了一个新的地址，麻烦你请求新的地址，地址我放到了请求头的Location中了)
  • 302 Found：资源已被临时重定向(你的请求我收到了，但是呢，你要的东西不在这个地址了，我临时把它移动到了一个新的地址，，麻烦你请求新的地址，地址我放到了请求头的Location中了)
  • 304 Not Modified:文档内容未被修改。（你的请求我收到了，你要的东西跟之前一样，没有任何变化，所以我就不给你结果了）
  • 400 Bad Request：语义有误，当前请求无法被服务器理解（你发给我的啥，我都听不懂）
  • 403 Forbidden:服务器拒绝执行（你的请求我已收到，但是我就是不给你东西）
  • 404 Not Found：资源不存在（你的请求我已收到，但是没有你要的东西）
  • 500 Internal Server Error: 服务器内部错误（你的请求我收到，但这道题我不会，解不出来，先睡了） 通常认为，0-399之间的状态码都是正常的，其他都是不正常的

2、键值对：大量的属性名和属性值组合，可以在服务器响应的时候自定义。

  • Content-Type:响应体中的数据格式，常见格式如下
    • text/plain:普通的纯文本，浏览器通常会将响应体原封不动的显示到页面上
    • text/html:HTML文档，浏览器通常会将响应体作为页面渲染
    • text/javascript:js代码，浏览器会使用JS执行引擎将它解析执行
    • text/css:css代码，浏览器会将它视为样式
    • image/jpeg：浏览器会将它视为jpg图片
    • attachment:附件，浏览器看到这个类型，通常会触发下载功能
    • 其他MIME类型
  • Server:web服务器类型

响应体

就是响应消息的正文

一般常问的问题：

在浏览器地址栏中输入一个页面地址，按下回车键后发生了什么？

  • 1、浏览器将url地址补充完整：添加协议
  • 2、对url地址进行编码，如果url地址出现非ASCII字符，则对其进行编码
  • 3、构造一个没有消息体的GET请求，发送给服务器，等待服务器响应
  • 4、服务器接收到请求，将一个html页面代码组装到消息体中，响应给浏览器
  • 5、浏览器拿到响应体后，开始渲染消息体的html代码
  • 6、浏览器在渲染页面过程中，发现有其他嵌入资源，如CSS、JS、图片等
  • 7、浏览器使用不阻塞的方式，重新向服务器发送对该资源的请求，拿到响应结果根据Content-Type做响应处理
  • 8、当所有资源下载并处理后，浏览器触发window.onload事件

ajax

ajax是一种技术，让JS语言在浏览器环境中获得了新的API，通过该API，JS代码拥有了和服务器通信的能力

//创建发送请求的对象
var xhr = new XMLHttpRequest();
//当请求状态发生改变时运行的函数
xhr.onreadystatechange = function () {
    //xhr.readyState: 一个数字，用于判断请求到了哪个阶段
    //0:刚刚创建好了请求对象，但还未配置配置请求（未调用open方法）
    //1:open方法已被调用
    //2:send方法已被调用
    //3:正在接收服务器的响应消息体
    //4:服务器响应的所有内容均已接收完毕

    //xhr.responseText: 获取服务器响应的消息体文本

    //xhr.getResponseHeader("Content-Type") 获取响应头的Contente-Type
}
//设置请求头
xhr.setRequestHeader("Content-Type","application/json");
//配置请求
xhr.open("请求方法","url地址")
//构建请求体，发送到服务器
xhr.send("请求体内容")

其他网络小知识

  • DNS（Domain Name System）域名系统，是互联网的一项服务。它作为将域名和 IP 地址相互映射的一个分布式数据库
  • CDN 叫做内容分发网络（Content Delivery Network）。CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。
  • DDos（Distributed Denial of Service），它是一种常见的网络攻击手段。利用目标系统网络服务功能缺陷或者直接消耗其系统资源，使得目标系统无法正常服务。简单的说就是，利用大量的请求，让服务器瘫痪。基于这种攻击方式，黑客们又将其升级，加入分布式的概念，让多个计算机联合起来，对目标系统网络进行攻击，这种攻击的力度之大，难以防范。

JSON（JavaScript Object Notation）是一种基于文本的数据交换格式。

它有三种数据结构：

  • 键值对 —— Name/Value (Key/Value)
  • 对象 —— Object
  • 数组 —— Arrays

JSON中的数值（键值对中的值）可以是以下任意一种：

  • Object
  • Array
  • String
  • Number
  • Boolean
  • null
avatar
文章
阅读
粉丝