前端泥瓦匠

Appearance

Return to top
On this page

http

前端和后端如何通讯

前端：客户端 后端：服务端

职业规划建议

培养自己的人脉圈，以及建立自己的影响力

  • 状态自己的总和能力
  • 经常参加一些活动
  • 开放分享（做讲师分享自己的智慧、写组件的个人博客做技术分享）

当我们在浏览器地址中输入 URL 地址，到最后看到页面，中间经历了哪些事情？ 假设我们访问的是 https://www.baidu.com 这个地址，按下 enter 建后，我们可以看到百度首页

  • 百度页面并没有在我们自己的客服端本地，我们是输入地址后，才请求过来的
  • 输入不同的域名可以看到不同的页面
  • 有的网页是 https，有的是 http（也有的是 ftp)
  • 需要客户端联网才能完成这些事情

DNS 服务器 域名解析服务

1.www.baidu.com  220.163.18.24 域名和服务器关联在一起，是通过 DNS 解析完成，所谓的 DNS 解析就是在 dns 服务上生成一条解析记录，标注了域名和对应的外网 ip 地址

都经历了哪些事情？

  • 首先根据客户端输入的域名，到 DNS 服务器上进行反解析（通过域名找到对应服务器的外网 ip)
  • 通过找到外网的 ip，找到对应的服务器
  • 通过地址栏中输入的端口号（没输入是因为不同协议有自己默认的端口号）找到服务器上发布的对应项目
  • 服务器获取请求资源的地址，例如 /stu/index.html，把资源文件中的原代码找到
    • response 响应阶段
  • 服务器端会把找的原代码返回给客户端（通过 http 等传输协议返回）
  • 客户端接收到原代码后，会交给浏览器的内核（渲染引擎）进行渲染，最后由浏览器绘制出对应的页面
    • 服务器自主渲染

客户端和服务端交互（通讯）模型

第一部分 传输协议

URL、URI、URN

  • URI : 统一资源标识符
  • URL: 统一资源路径地址
  • URN：统一资源名称
  • URI=URL+URN

一个完整的 url 包含很多部分

https://www.yuque.com/as-giant/dz5g6s/eh4kdu/edit?name=wang&age=2

第一部分：传输协议

传输协议是用来完成客户端和服务端的数据（内存）传输的，类似于快递小哥、负责把客户和商家的物品来回床底

  • 客户端不仅可以向服务器发送请求，而且还可以吧一些内容传递给服务器
  • 服务器端也可以把内容返回给客户端
    • 客户端和服务端传输的内容总称：http 报文，这些报文信息都是基于传输协议完成传输的，客户端传递给服务器叫做请求 (Request), 服务器返回给客户端叫做响应 (Response) , request+response 两个阶段统称为一个 HTTP 事务（事务：一个完整的事情）

HTTP 事务：

  • 当客户端想服务器端发送请求，此时客户端和服务器端会简历一个传输通道（链接通道），传输协议就是基于这个通道吧信息进行传输的
  • 当服务器端接受到请求信息，把内容返回给客户端后，传输通道会自动销毁关闭

传输协议分类

  • http: 超文本传输协议（客户端和服务器端传输的内容除了文本以外），还可以传输图片，音视频等文件流【二进制编码 /base64], 以及传输 xml 格式的数据等，是目前市场上应用最广泛的传输协议
  • https:http ssl, 它比 http 更加安全，要往数据内容的传输通道是经过 ssl 加密的（它需要在服务器端惊醒特殊的处理），所以涉及资金类的网站一般都是 https 协议的
  • ftp: 资源文件传输协议，一般用客户端把资源文件（不是代码）上传到服务端，或者从服务器端下载一些资源文件（ftp 传输的内容会 http 这类传输协议传输的内容多）

http 报文

1、起始行

  • 请求起始行
  • 响应起始行

2、首部（头）

  • 请求头：内置请求头、自定义请求头
  • 响应式：内置响应头、自定义响应头
  • 通用头：请求和响应都有的

3、主体

  • 请求主体
  • 响应主体

请求 xxx 都是客户端设置的信息，服务器获取这些信息 响应 xxx 都是服务器端设置的信息，客户端用来接受这些信息

第二部分 域名

设置域名其实就给不好记忆的服务器外网 ip 设置了一个好记忆的名字 顶级域名（一级域名）:qq.com 二级域名：www.qq.com、v.qq.com、sports.qq.com 三级域名：kbs.sports.qq.com

第三部分 端口号

在服务器发布项目的时候，我们可以通过端口号区分当前服务器上不同的项目 一台服务器的端口号取值范围：0~65535 之间，如果电脑上安装了很多程序，有一些端口号是被占用了

HTTP: 默认端口号 80 HTTP: 默认端口号 443 FTP: 默认端口号 21

对于上述三个端口号其实是很重要的，如果被其它程序占用的，我们则不能使用了，所以服务器上一般是禁止安装其它程序的

第四部分 请求资源文件的路径名称

/stu/index.html 在服务器中发布项目的时候，我们一般都会配置一些默认文档：用户即使不输入请求文件的名称，服务器也会找到默认文档（一般默认文档都是 index/default...) 我们通常为了做 seo 优化，会把一些动态页面的地址 (xxx.php、xxx.aspx、xxx.asp、xxx.jsp...) 进行伪 URL 重写（需要服务器处理的） https://item.jd.com/432527.html 不可能是有一个商品，自己就单独写一个详情页面，肯定是同一个详情页做的不同处理

第一种方案

由后台语言很久详情页模板动态生成具体的详情页面

第二种方案

当前页面就是一个页面，例如：detail.html/detail.php..., 我们做详情页面的时候，开发是按照 detail.html?id=432527 来开发的，但是这种页面不方便做 seo 优化，此时我们把真实的地址进行重写，重写为了让我们看到的是 4325427.html

第五部分 问号传承

?name=zf&age=9 把一些通过 xxx=xxx 的方式，放在一个 url 的末尾，通过问号传递

【作用】

  1. 在 ajax 请求中，我们可以通过问号传递参数的方式，客户端吧一些信息传递给服务器，服务器更具传递信息的不一样，返回不同的数据
javascript
// $.ajax(url,{});
// $.get(url,function(){});
// 对于ajax请求的特殊写法，原理还是基于ajax方法实现 $.post $.script

$.ajax({
    url:'getPersonInfo?id=12'
    ...
})

// 当前案例，我们传递给服务器的编号是多少，服务器端就会把对应编号人员信息给返回
1
2
3
4
5
6
7
8
9
10
  1. 消除 ajax 请求中 get 方式缓存
javascript
$.ajax({
	url:'xxx?_=0.123456'
	method:'get'
})
// 我们会在请求url的末尾最佳一个随机数_=随机数，保证每一次请求的url都是不一样的，以此来消除get请求一流的缓存问题
1
2
3
4
5
  1. 通过 url 传递传输的方式，可以实现页面之间信息的通讯，例如：我们有两个页面 A/B,A 是列表页面、B 是详情页，点击 A 中的某一条信息，进入到唯一的详情页 B，如果展示不同的信息，这种操作就可以基于 URL 问号传递参数来实现了

例如：

http://sports.qq.com/kbsweb/game.htm?mid=10000:1471087
http://sports.qq.com/kbsweb/game.htm?mid=10000:1471086
1
2

在进入 game.htm 页面的时候，我们可以获取 URL 传递的参数值，更具传递参数值的不一样从服务器端获取不同的数据展示

在列表页面进行页面跳转的时候，我们需要记住的是跳转的同事传递不同的参数值

html
<a href='game.html?mid=xxx'>
1

第六部分 HASH 值

URL 末尾传递的井号什么，就是 HASH 值（哈希值）

【作用】 1、页面中锚点定位

2、前端路由 (SPA 单页面开发）

Copyright © 2018-2024 Mason

沪ICP备20006251号-1