从你的WEB世界路过之--0.初识

0) 前言

人可一日无饭, 不可一日无网. 互联网发展至今天, 基于网络的应用数不胜数... 衣食住行都可以通过互联网来实现. WEB开发指的就是开发这些基于互联网的系统. 任何一个行业都会源源不断的有新人进入. 特别是互联网行业. WEB开发算是一个技术工种, 对于新人来说, 各种名词, 思想, 框架会把人折磨的死去活来. 本系列文章旨在用最通俗的语言帮助新入行的同学从最0开始, 学会J2EE下的WEB开发. 为了让新同学能够用最快的时间学会WEB开发. 文章中只会提及必要的概念. 下面, 开始你的学习之旅吧~~

1) WEB基本概念

很早之前, 你用一些软件的时候需要下载并安装后才能使用, 如QQ, 迅雷等等. 有一天你换了一台电脑, 发现电脑上没有软件, 你不得不再次下载安装. 突然有一天你的操作系统很不幸挂了, 下载.....安装....., 漫长的等待. 后来你发现电脑上有个叫浏览器的东东, 打开它输入网址就可以访问一个网站, 操作系统都有默认的浏览器, 所以你只需要记住网址, 在任一一个电脑上都可以访问网站了, 比以前方便多了. 在后来, 越来越多的系统都是基于浏览器开发的. 于是软件衍生出两种模式: 安装在客户端和通过浏览器访问.

1.1 C/S&B/S

我们把需要下载安装在客户端的软件叫做C/S架构(Client/Server), 即客户端/服务器, 使用浏览器就可以访问的软件叫B/S(Browser/Server), 即浏览器/服务器. B/S架构的优势很明显: 

• 电脑上只需要有浏览器即可访问软件(操作系统默认都有浏览器), 不需要下载安装.
• 软件开发时不需要区分客户端操作系统, C/S软件需要区分windows, linux, mac..
• 系统升级时不需要在客户端更新后安装, 只需要在服务器升级即可

B/S架构的在开发时间和维护成本上有着很明显的优势, 但人无完人, 缺点同样很明显: 如果没有网络或网速极慢时B/S就无用武之地了. 由于B/S较C/S的优势较多并且网络环境也越来越好, 因此越来越多的系统都采用B/S结构. 我们说开发一个B/S结构的系统就叫做WEB开发. 学习WEB开发前一定要明白他的原理.

当我们使用一个B/S软件时, 首先打开浏览器, 输入网址. 几秒钟之后一个漂亮的页面就出现在我们的浏览器中了. 在这过程中发生了什么呢? 简单说就是浏览器根据网址找到服务器, 服务器把你想要的返回给浏览器. 但实际上比这个复杂的多. 先来介绍几个常用的概念: 

1.2 IP

现实生活中的每个建筑物都有自己的地址, 比如XX市XX路XX号, 通过地址就可以找到这个建筑. 在网络中的每台电脑也都有一个类似的地址, 通过该地址就能在网络中找到这台电脑, 这个地址叫做IP地址. IP格式: 112.34.56.33, 任何一台电脑连接网络后都有IP, 这个IP只有在局域网中才能被识别. 公司内部可以通过IP连接到你的电脑, 但是在美国就无法连接到了. 如果想在任何一个地方都可以通过IP连接你的电脑需要设置独立IP(需要额外的费用). 局域网IP相当于办公室的工位号, 只有公司内部才识别. 购物时只填写工位号快递是找不到你的, 你需要花钱为你的工位购买一个全球识别的地址(独立IP). 

1.3 服务器

一台放B/S程序的电脑, 如果你的服务器想被所有人访问, 需要设置独立IP.

1.4 域名

我们需要通过IP访问服务器, 但IP是一堆没有规律的数字, 不便于记忆. 于是有人想到了使用有含义的英文单词或字母对应服务器的IP, 你只需要记住英文即可访问相应的服务器. 相当于给服务器起个一个英文名字. 这个名字就叫做域名. 当你用浏览器访问服务器的时候就可以忘记IP, 只需要记住域名就可以了. 比如a.com就是一个域名

1.5 DNS

你给自己的服务器设置了IP并起了一个好听的域名. 但是其他人并不知道域名对应的是哪个IP, 这时就需要有一个地方专门配置域名和IP的对应关系. 当在浏览器中输入域名后, 会从这个地方找到域名对应的IP, 通过IP访问服务器. 这个配置域名和IP对应关系的地方就叫做DNS(Domain Name System): 域名系统. 

1.6 端口

通过域名或者IP可以找到对应的服务器, 但如果一个服务器上有好多B/S程序, 那这些程序怎么才能知道这次访问是由谁处理呢. 就像你去银行办理业务, 银行有好多窗口可以办理, 但是你进去之后站在大厅肯定没有人给你办理, 你需要走到某个窗口才可以. 服务器上也是这样的, 每个B/S程序都在某个窗口等待着, 你需要访问服务器的某个窗口才能有对应的程序处理. 每个窗口都有编号, 我们成这个窗口编号叫做端口. 只有通过域名和端口一起才能访问到服务器上应用程序. 格式为: "域名:端口", 例: "a.com:8080"代表访域名对应IP的服务器的8080端口, 如果8080端口有程序, 则会处理你的这次访问.

1.7 网址

当你访问某电商网站的时候, 先进入主页, 点击分类进入分类列表页面, 点击某个商品进入商品明细页面. 其中主页, 分类, 明细页面都是服务器上的程序返回给你的, 那么服务器怎么知道你想访问哪个页面呢, 这个时候就需要你在访问服务器时明确告知服务器你想要哪个页面. 你需要在域名的后面添加你想访问的页面名称. 例如服务器规定index代表主页, category代表分类, goods代表商品明细, 当你想访问服务器的分类页面时就需要使用"域名:端口/category"来访问, 通过域名能够找到对应的服务器, 通过端口找到对应处理的程序, 程序通过category就能知道你想要访问分类页并将分类页面返回给你, "a.com:8080/category"就叫做网址.

1.8 HTTP协议

当你去参加了一个国际会议, 来自全世界的人共同讨论一件事情, 每个国家的代表都用自己的语言讨论, 会场一定会乱套, 这时候就需要有一个统一的协议来规范参会的人员. 比如: 参加会议必须遵循这个协议说英文, 英文有自己的单词和语法, 大家都用英文交流就可以互相理解了. 在浏览器访问服务器的时候也必须遵循一个协议, 这个协议叫做HTTP(HyperText Transfer Protocol): 超文本传输协议. 上面讲到的网址规则就是HTTP协议的一部分, 在"a.com:8080/category"前面加上"http://"即可, "http://a.com:8080/category"就是一个HTTP协议的网址了, 服务器端也会按照HTTP协议接收并返回给你想要的结果. HTTP协议中80端口默认不显示, 即http://a.com/category代表访问服务器的80端口. 

1.9 Request&Response

理解了上面几个概念, 我们来看一下当你在浏览器中访问一个域名的时候究竟发生了什么:

其中,  你访问服务器的过程就做请求(Request), 服务器给你返回结果的过程叫做响应(Response). 整个交互过程如下: 

1. 浏览器中输入网址: http://a.com:8080/category, 点击访问按钮
2. 浏览器会通过DNS解析域名a.com对应的IP, 通过IP连接对应的服务器
3. 根据访问中的8080端口找到在端口监听的程序A进行处理
4. 程序根据/category找到对应的处理程序, 处理完成后返回给浏览器
5. 浏览器根据服务器返回的结果将返回内容进行展示
6. 本次请求完成

1.10 异常返回

上面介绍的是正常情况, 如果网络或者服务器出现问题时返回的并不是你想要的结果, 看下面的例子: 

你给你女朋友所在公司总机打电话, 拨通电话号码并且还需要输入分机号才行. 正常的情况下你就可以和女朋友通话了, 那如果你输错电话号码了呢(有可能打进别的公司了, 也有可能是空号), 或者你输错分机号了, 又或者是你女朋友刚接到一半有事挂断了. 这些情况都不是你想要的的, 属于异常情况, 对于一个请求来说, 也是会有各种异常情况的.

女朋友所在公司总机相当于服务器, 总机号码相当于域名, 运营商根据号码找到对应电话的过程相当于域名解析. 总机和分机号相当于网址. 电话号码规则(总机分机规则)相当与HTTP协议. , 拨出电话的过程相当于一次请求, 公司总机收到你打入的电话相当于服务器接收到了你的请求, 分机收到你打了电话相当于对应的程序正在处理你的请求. 女朋友接了你的电话相当于给你的响应.

下面我们分析一下几种可能出现的异常情况: 

• 总机号码是空号: 运营商会提示你空号, 相当于你输错域名, 该域名在DNS中没有对应的IP, 浏览器会提示你无法访问.
• 总机号码错误: 有可能电话挂到别的公司了, 相当于你输错域名, 但域名在DNS有对应的IP, 浏览器会访问该IP所在服务器. 于是你就进入到错误的网站中了 
• 分机号码错误: 公司总计会提示你找的人不存在, 相当于你访问了服务器中没有的程序, 服务器会返回一个状态码为404的错误. 提示你访问的程序不存在.
• 电话刚接通就挂断: 你的女朋友接通了电话并且你们吵架了, 于是她挂断了电话. 相当于服务器的程序处理你的请求时出现错误, 服务器会返回一个状态码为500的错误, 提示是服务器内部错误. 请注意: 500错误是程序员永久的噩梦. 
• 你的电话线被拔出: 相当于客户端没有网络, 浏览器会提示无网络
• 总机电话线被拔出: 你的电话号码是正确的, 相当于DNS能够正确解析你的网址并访问服务器, 但服务器的程序没有启动因此无法处理你的程序, 浏览器在连接一段时间后发现一直没有响应报出连接超时.

2) 响应数据

正常访问服务器时, 服务器端程序处理完成后会给浏览器一个响应(Response), 浏览器将响应的内容显示给用户. 那么, 服务器程序会返回什么内容呢, 浏览器又是怎么展示的呢.

2.1 HTML

可以开发B/S程序的语言很多, 各种浏览器也层出不穷, 势必要有一个统一的标准来规范各种B/S程序开发语言和浏览器, 使得服务器端返回的内容都是一致的, 各种浏览器都按照这种标准去解析. 这种统一的标准也是一种语言, 叫做HTML(Hyper Text Mark-up Language): 超文本标记语言. 服务器返回至浏览器的内容就是HTML, 浏览器对HTML进行解析展示给用户.

经常访问网页时你会发现, 当你在电商网站查询订单或购物车时展现形式为数据列表. 查看商品时展示图片和文字, 注册时展现输入框和按钮. 这些不同形式的展示内容都是服务器返回的, 换句话说展示的内容都是HTML, 浏览器根据HTML进行相应的展示:

HTML中定义了许多组件, 浏览器解析到相应标签时会按约定的格式进行展示, 例如: HTML中定义了<table>, 浏览器就会把里面的内容按照表格的形式进行展示, 无论多么复杂的网页, 都是由这些基本的HTML组件组合而成的, 简单介绍几个组件: 

标签	说明	备注
<table></table>	表格	浏览器会将里面的内容解析成表格进行展示
<a></a>	超链接	浏览器会解析成链接, 点击时跳转至对应网址.
<img />	图片	浏览器会将内容显示为图片.
<input />	输入框	浏览器会显示输入框, 用户可以在食客中输入内容

HTML在编程语言里相对较简单, 没有过多的逻辑性, 去菜鸟教程中把每个组件练习一遍就可以.

2.2 CSS

当你学会HTML后你就会发现, HTML只定义了组件的展示形式, 在浏览器中展示时并不那么的美丽大方, 而我们访问的网页都是很漂亮的, 这时我们需要一个装修队来帮我们把HTML处理的漂亮一些, 他就是CSS(Cascading Style Sheets): 层叠样式表.

CSS里面可以定义HTML每个组件的大小, 颜色, 位置, 边框, 背景, 内外间距等等, 你所看到的各种漂亮网页都是通过CSS来美化的, 下面以一个链接为例, 看一下默认的链接样式和经过CSS美化过的差别

<style>
a {
	background-color: #0088cc; /* 背景颜色 */
	color: #fff; /* 文字颜色 */
	padding: 10px 20px; /* 文字内边距 */
	text-decoration: none; /* 下划线样式: 无 */
	font-family: "microsoft yahei"; /* 字体:微软雅黑 */
}
</style>

 左侧为经过CSS美化的样式, 右侧为链接的默认样式. 谁更好看呢?

一个漂亮的网页需要视觉设计师, 前端工程师共同合作才能完成, 作为WEB开发人员的你只需要对CSS简单了解即可.

2.3 Javascript

很多网页中都有一些很炫酷的特效, 比如在电商的商品页面, 点击加入购物车按钮物品会飞入购物车中. 

我们分析一下如何实现的, HTML定义了网页中的各种元素, 包括加入购物车按钮, CSS为按钮设置了样式. 似乎都无法做出飞入效果. 是时候请他出场了, 他就是Javascript(简称JS): 一个和Java毫无关系的脚本语言. 你可以理解为他是在浏览器中执行的脚本.

Javascript能够做很多事:

• 监听HTML节点的各种事件, 比如: 某个按钮被点击, 鼠标移入到某个图片上, 浏览器窗口大小发生变化等等
• 对HTML节点进行增加,删除操作, 比如: 删除一个按钮, 添加一张图片, 改变按钮中的文字等等
• 给HTML节点添加样式, 比如: 给某个按钮添加一个背景色, 隐藏或显示某个按钮等等
• 使用动画效果改变HTML的位置, 大小等. 现在CSS3中可以不依赖于Javascript就可以实现动画.

按照下面的步骤就可以实现上述的飞入效果: 

1. 监听加入购物车按钮的点击事件
2. 在购物车按钮附近增加一个缩小的物品图片
3. 通过动画将图片位置从加入购物车按钮附近挪入右侧购物车
4. 隐藏图片

早期, Javascript是WEB开发人员必备的技能之一, 但随着前后端分离开发模式的推广, 作为WEB开发人员更多的关注后台的业务实现及接口的定义, 后续文章中会对前后端分离模式进行介绍. 敬请关注.

2.4 总结

如果要在网页中实现良好的交互体验, HTML, CSS, Javascript缺一不可. 

HTML相当于定义了一辆汽车的各个零部件, CSS控制每个零部件的形状及位置,  Javascript负责处理汽车的整个运行情况. 比如HTML定了汽车有6个轮胎, CSS设置汽车的颜色为绿色, Javascript监听当踩油门时控制发动机. 如果没有CSS, 所有汽车都将一模一样, 没有Javascript, 这辆汽车将只能看不能被驾驶. 但如果没有HTML, 整个汽车都将不存在.

3. 结语

本篇文章是系列教程的开篇, 介绍了WEB开发中的一些基本原理及概念, 仅仅是引导新同学入门, 后续文章会逐步的讲解, 让新同学能够在最快的时间学会基于SSM框架的WEB开发.  有兴趣的同学可以关注. 

---

WEB开发不仅需要掌握多种技术, 还需要了解各种业务场景的处理办法. 这对新同学来说是一个挑战, 希望各位新同学能够坚持学习, 遇到问题可以留言.