网络知识

头像
wcly
    阅读 6 分钟
    6

    浏览器如何定位一台服务器？

    使用url统一资源定位符：protocal://hostname:port/path?query#hash

    • protocal: 协议，服务器根据不同的协议确定数据交换的格式和方式，常用的有http和https；

    • hostname: 主机名，可以是ip，也可以是域名；

      • ip：网络中每个终端的唯一编号；
      • 域名：和ip一一对应，方便记忆；
      • 域名和ip的关系：计算机是通过ip在网络上查找的另一台计算机，域名是方便人阅读和记忆。输入域名的时候，计算机会先去通过域名解析服务器（DNS）将域名转化成ip，再去网络中根据这个ip查找计算机。

    • port：端口号，服务器中有很多其它的应用，端口是用来定位使用服务器中的哪一个应用；

      • http: 默认端口80
      • https：默认端口443
    • path：路径，用于区分使用web服务器的哪个服务。

    • query：查询参数，用于向web服务器传递信息。

      url只支持ASCII字符，输入中文会被转义
    • hash：锚点，定位页面中的内容，唯一一个改变后浏览器不会重新访问服务器的值（不会刷新页面），可以用来做路由。

    浏览器和服务器传输数据的格式是什么？

    http是其中一种用来规定浏览器和服务器传输数据格式的协议。
    http将浏览器和服务器之间的一次交互分为两个部分：

    • 请求request：客户端发生数据给服务器的过程
    • 响应response：服务器收到请求返回一个数据给客户端的过程

    其实一个请求可以看做是一个规定了格式的特殊字符串，下面我们看看这个字符串是有什么组成的。

    以百度的网址为例，

    请求request由请求头和请求体两个部分组成：

    1. 请求头（request headers）

    规定请求的请求方式，就是告诉服务器自己给什么格式的数据，以什么方式给，希望返回什么数据等。

    GET /s?wd=abc HTTP/1.1
Host: www.baidu.com
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36
Sec-Fetch-User: ?1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Sec-Fetch-Site: none
Sec-Fetch-Mode: navigate
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Cookie: PSTM=1563287690;

    请求头又包括请求行和其它属性：

    • 请求行：请求头的第一行

      • 请求方法：GET、POST等
      • path：url中的path + search + has
      • 协议及版本号：HTTP/1.1

    • 其它属性：后面的数据以键值对的形式存储，可以自定义

      • Host: 主机名
      • Connection: 连接方式

    2. 请求体（request body）

    1. 请求体就是浏览器要发送给服务器的数据，一般是服务器需要用到的业务数据。

    2. 请求头中也可以传递不同格式的数据，一般由请求头中的Content-Type属性来描述请求体中使用的格式。

      • 常见的格式：

        • application/x-www.form-urlencoded对应的数据格式：属性名=属性值&属性名=属性值
        • application/json对应的数据格式：{"属性名":"属性值", "属性名":"属性值"}
        • multipart/form-data对应的数据格式：使用某个随机字符串作为属性之间的分隔符，通常用于文件上传。
        ------WebKitFormBoundaryD1o3TzulmXAIABD2
Content-Disposition: form-data; name="image"; filename="xxx.png"
Content-Type: image/png
------WebKitFormBoundaryD1o3TzulmXAIABD2--

    响应response由响应头和响应体两个部分组成：

    1. 响应头（response headers）

    服务器根据请求头和请求体构建出来的数据，告诉客户端响应的状态，响应数据的格式等信息。

    HTTP/1.1 200 OK
Content-Length: 24
Content-Type: text/plain; charset=UTF-8
Date: Mon, 03 Feb 2020 10:21:37 GMT

    响应头又包括响应行和其它属性：

    • 请求行：请求头的第一行

      • 协议及版本号：HTTP/1.1
      • 状态码：对应不同的响应状态
      • 状态文本：用于描述状态码的文本
    常见的状态码:
200: 请求成功。
301：资源永久重定向，告诉浏览器这个资源已经不在当前地址了，去其它地方取，其它地方的地址一般放在Location属性中。
302：资源临时重定向，告诉浏览器这个资源没有变化，自己去缓存中拿。
400：请求有问题，当前请求服务器无法识别。
403：服务器拒绝执行，可能是权限不够造成的，服务器不返回数据。
404：页面找不到，告诉浏览器这个地址不对，我这里找不到对应的资源。
500：服务器内部错误，表示是服务器处理程序出错。
502：网关错误，浏览器请求的地址可能还会进行一层网关的过滤，用来分发到不同的服务器，网关错误表示代理网关无法从上游服务器获取数据。
503：服务器过载，表示当前服务器处理不了那么多请求，拒绝当前浏览器发出的请求，一般会在响应头添加一个Retry-After属性。
504：网关超时，网关请求上游服务器一般会设置的一个时间限制，在规定时间内没有从上游服务器获取数据就会产生该错误信息。

    • 其它属性：后面的数据以键值对的形式存储，可以自定义

      • Server: web服务器类型，Apache、IIS等
      • Content-Type: 描述响应体中的数据格式

    2. 响应体（response body）

    服务器返回给客户端的业务数据

    常见的数据格式有:

    • text/plain：普通的存文本。浏览器会原封不动的显示在页面上。
    • text/html：html文档，浏览器会将返回的数据解析成页面。
    • text/css：css代码，浏览器会根据返回数据渲染html页面。
    • text/javascript：js代码，浏览器会启动js引擎进行解析。
    • attachment：附件、浏览器看到该属性会自动下载服务器返回的数据。
    • 其它MIME类型

    POST请求和GET请求的区别？

    就协议的角度来讲是没有什么实质的区别，不管是那种请求都是由请求头和请求体组成的，只不过服务器会根据请求的方式不同去不同的地方读取业务数据。

    服务器对于不同的请求方法做出的处理（不是绝对的，开发者可以自己处理）

    • GET请求：服务器遇到GET请求一般会去path中读取数据。
    • POST请求：服务器遇到POST请求一般会去请求体中读取数据。

    浏览器对于不同请求做出的处理

    • GET请求会限制url大小，因此如果业务数据过大要使用POST请求。
    • POST请求只能通过表单的形式提交，在浏览器地址栏输入的url都是以GET的方式向服务器发送请求。

    其它差异：

    1. GET请求会保留请求数据，利于用户做分享。
    2. GET请求的业务数据是放在url中的，一般带有用户信息的数据都不应该使用GET请求，防止被其它人偷窥，或者被用户自己分享出去。

    什么是Ajax?

    AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

    是浏览器提供给js的请求网络数据的API。

    请求实例：

    var xhr = new XMLHttpRequest(); //创建请求实例
// 监听请求变化的函数  
xhr.onreadystatechange = function (response) {
    if (xhr.readyState === 4 && xhr.status === 200) { //表示所有内容接受完毕，并且服务器返回的状态是请求成功
        console.log(xhr.responseText);
    }
}
xhr.open("GET", "https://api.binstd.com/shouji/query"); //配置请求
xhr.send(); //构建请求体，发送请求体
    现在大部分的请求都使用fetch替代ajax。（fetch是es6提供的请求网络数据的新API，用promise封装的网络请求API。）

    什么是跨域？

    1. 协议，域名，端口三者有一个不同就会造成跨域无法获取数据的问题；
    2. 跨域是浏览器为了提高安全性做的限制。只有在浏览器中才会发生的现象。服务器之间互相访问是不会出现跨域问题的；
    3. link、img、script等含有src属性的标签也不会出现跨域问题；
    4. 解决跨域问题，有jsonp，后台设置运行跨域，iframe等方法；但是副作用最少，无需后台配合的就是自己写代理服务器。

    代理服务器

    服务器代理解决跨域问题思路：

    1. 出现跨域问题一般是请求不同域下的资源，请求相同域中的资源不会出现跨域问题。
    2. 自己编写一个服务器，将要发请求的页面放在该服务器下，再通过自己的服务器请求真实接口，将返回的数据回传给页面就可以解决跨域问题。

    代理服务器的作用：你请求有跨域问题，我请求不会，我帮你请求再把数据返回给你。

    举个例子：

    环境：node v10.16.0，yarn 1.15.2

    目录结构：

    - demo.html
- proxy.js

    1. 在项目根目录打开cmd，运行命令：

      yarn init
yarn add express
yarn add request

    2. 新建demo.html文件，代码如下：

      <!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试跨域请求</title>
</head>

<body>
<script>
    var xhr = new XMLHttpRequest(); //创建请求实例
    // 监听请求变化的函数  
    xhr.onreadystatechange = function (response) {
        if (xhr.readyState === 4 && xhr.status === 200) { //表示所有内容接受完毕，并且服务器返回的状态是请求成功
            console.log(JSON.parse(xhr.responseText));
        }
    }
    xhr.open("GET", "http://localhost:2020/api"); //配置请求
    xhr.send(); //构建请求体，发送请求体
</script>
</body>

</html>

    3. 新建proxy.js文件，代码如下：

      var express = require('express'); //导入express模块
var request = require('request'); //导入request模块

var app = new express(); //创建express实例
app.use(express.static('./')); //监听文件夹，获取静态资源
app.listen(2020); //监听2020端口

//监听api接口
app.get('/api', function (req, res) {
    // 请求真实接口
    request('https://api.binstd.com/shouji/query', function(error,response,body){
        res.header('Content-Type', 'application/json;charset=utf-8');
        res.send(body); //返回数据
    })
})
    4. 启动服务器，在cmd输入node proxy.js。
    5. 打开浏览器，输入网址：http://localhost:2020/demo.html，查看控制台，现在就不会有跨域问题产生。

    什么是三次握手？

    客户端与服务器建立TCP/IP连接的准备阶段进行的三次交互被称为三次握手。

    http协议是基于TCP/IP协议建立的数据传输协议，http定义的是数据收发双发的格式，TCP/IP协议定义的是数据接收时连接怎么建立。

    过程：

    1. 客户端向服务器发送请求；
    2. 服务器接收请求，向客户端发送回应；
    3. 客户端接收回应；

    为什么要进行三次握手？

    为了建立一个可靠的连接，确保客户端和服务器都具备收发能力。

    分析：

    假设只进行步骤1，客户端向服务器发送请求，客户端无法知道服务器真的能接到消息；

    假设进行了步骤1，2，客户端知道服务器具备收数据的功能，服务器也知道客户端具备发数据的功能，但是服务器还不能确定客户端是否能收到数据；

    所以要执行步骤3，这就是为什么一定要三次握手。

    什么是四次挥手？

    四次挥手是TCP/IP连接断开时候客户端和服务器进行的四次交互过程。

    过程：

    1. 客户端发送中断请求，不再发送数据；
    2. 服务器接收中断请求，数据没发送完成，还可以发送数据；
    3. 服务器发送关闭连接请求 ，不可发送数据；
    4. 客户端确定关闭连接。
    发完了，知道发完了，收完了，知道收完了

    为什么要进行四次挥手？

    为了确保在断开连接之前客户端和服务器的交互数据已经收发完毕。

    分析：

    1. 客户端告诉服务器我要断开连接，不再发送数据；
    2. 服务器知道了客户端要断开请求，但是还有数据要发个客户端，告诉客户端先等我的数据发完再断开连接；
    3. 过了一会服务器数据发送完毕，服务器告诉客户端数据发完了，可以关闭连接了（此时服务端不再接收客户端消息）;
    4. 客户端收到通知，关闭连接，不再接受服务端消息。完成整个断开连接过程。
    httpajaxajax跨域状态码网络
    wcly
    153 声望2 粉丝

    用已知解决未知

    « 上一篇
    JavaScript核心之事件循环
    下一篇 »
    node多版本管理工具——nvm

    引用和评论

    推荐阅读
    头像
    react-native之异常监控平台sentry接入指南

    wcly赞 1阅读 4.2k评论 1

    头像
    TLSv1.3 Support：主流 Web 客户端和服务端对 TLSv1.3 的支持情况

    sysin阅读 2.8k

    头像
    免费的SSL证书在哪里申请？——七大免费申请平台

    才高八斗的扁豆赞 1阅读 378

    头像
    如何设置Fiddler来拦截Java代码发送的HTTP请求，进行各种问题排查

    注销阅读 2.7k

    头像
    ABAP应用服务器的HTTP响应状态码(Status Code)

    注销阅读 1.6k

    头像
    使用Java程序通过http post访问ABAP Netweaver服务器

    注销阅读 1.4k

    头像
    @tanstack/react-query 实践

    assassin_cike阅读 835

    0 条评论
    得票最新