讲座 - Web 基础
讲座 - Web 基础
Web 具有按需操作的特性,需要有服务器(server)提供内容,需要客户(client)进行请求. Web 客户通常指浏览器(browser),比如 Microsoft Edge 或者 Google Chrome.
网页是一种文件,客户通知服务器,请求文件. 服务器在接到请求之后做出相应,浏览器按照一定规则组织好显示在屏幕上.
Web 通信
交互过程中如何保证信息被正确处理?我们需要约定,这里就是“协议(protocol)”,指的是交换信息的格式和顺序、事件发生时的操作.
准确定位请求,需要网址(URL,uniform resource locator). URL 一般能分成三个部分:协议://主机名[:端口号]/路径[?查询].
现在讲一讲 Web 的核心协议,HTTP(Hyper-Text Transfer Protocol,超文本传输协议),它定义请求的方式和响应的方式.
HTTP request
请求方法,常见的有:
- GET:获取资源
- POST:提交数据
- PUT:更新 / 替换服务器资源
- DELETE:删除服务器资源
理论上很多方法可以混用,但是这并不好.
请求如何携带信息,比如说用户名和密码?有常用的三种方法:
路径传参:
http://www.site.com/info/aaa/head.png
查询字符串传参:
http://www.site.com/info?username=aaa&require=head
请求体传参:
http://www.site.com/info
[拓展]用户身份验证:可能的使用场景是个性化推送之类. 最简单的想法是使用验证码,但是这样太麻烦;一种常用验证方法是使用 Cookies,Cookie 保存在客户端,之后的请求中自动携带 Cookie 信息.
但是 Cookie 带来安全问题:一是存在第三方 Cookie,它可能多个平台同时采集用户行为,进行广告个性化推送之类;二是 Cookie 如果泄露,问题就会很严重.
HTTP response
服务器收到请求返回响应. 相应用状态码表示结果,下面是几个常见的状态码:
- 200 OK:请求成功
- 400 Bad Request:请求错误
- 403 Forbidden:没有权限
- 404 Not Found:请求资源未找到
- 500 Internal Server Error:服务器内部错误
容易发现“4”开头的都是客户端问题,“5”开头的都是服务器问题.
HTTP 调试
浏览器一般帮助我们处理了请求使用哪一种方法,但是我们如果想要手动发送请求,就要使用一些工具,比如 Postman / Apifox.
[拓展]HTTPS,它是 HTTP Secure,超文本传输安全协议. HTTP 的不安全之处在于信息明文传递、无法证明信息完整、无法验证身份.
改进之处是在 HTTP 上面加入 SSL / TLS.
Web 页面
HTML
Hyper-Text Markup Language,超文本标记语言. 其中定义了很多标签,标签表示网页内容的类型以及格式,标签内含有具体内容.
常用的 HTML 标签:略去吧,这些用用就会了.
在一个 HTML 文档中,首先要声明:<!DOCTYPE html>
,然后是根标签<html></html>
.
HTML 标签具有属性:
- class:类名
- id:唯一标识符
- style:样式
- ……
需要专门介绍的是<div>
标签,本身没有语义,仅仅作为一个容器.
CSS
样式表文件. 在 HTML 中用<link rel='stylesheet' href='xxx.css'>
引用这个 CSS 文件,使得它在整个文件中都被引用.
CSS 是 Cascading Style Sheet,层叠样式表,实际上大家有兴趣可以引用两个相互矛盾的 CSS 来看看效果是什么.
JavaScript
这是一种脚本语言,可以不用编译,直接嵌入 HTML,能操纵 HTML 文件中的元素,而且写法和 c++ 很像.
有意思的是 Java 和 JavaScript 什么关系都没有,甚至不是一个公司开发的.
注意的是,最好在<head>
里面引入 CSS,而在<body>
中引入 JS,以实现提高加载速度的目的.
上面三者被称为前端三件套.
Web 开发工具
可以在浏览器中使用 F12+Fn 进入开发者模式,用 Ctrl+S 保存网页文件.
Web 应用基础
对于静态网页,网页的内容全部都是固定的,服务器不需要进行逻辑处理.
但是静态网页并不能满足所有的需求,这时候我们就需要考虑动态网页. 在动态网页中,服务器可能有一个模板文件,收到请求后读取特定的文件,然后进行填充.
但是服务器不一定能做完所有事,我们可以将“填充”的任务交给客户端完成. 这时候就是一种前后端分离.
一个简单的例子是在 B 站上搜索某个关键词:
- 客户向前端服务器请求
- 前端服务器返回模板
- 网页上 JS 脚本向后端服务器请求数据
- 客户端收到响应进行填充
这里面传输数据的格式由开发者决定,称为 API.
这与动态网页也不相同,它提升了用户体验——在动态网页情况下,返回的是一整个网页,而前后端分离时,用户会看到一个网页框架,然后内容逐渐显示出来.
[拓展]前后端分离的安全问题:攻击者可以修改 JS 中的 API,使得请求本身是错误的.
建议的之后学习路径:
- 数据库 & SQL
- 前端
- 后端