从你的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就叫作网址, 也叫作URL.

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. 浏览器中输入网址: 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的错误, 提示是服务器内部错误.
• 你的电话线被拔出: 至关于客户端没有网络, 浏览器会提示无网络
• 总机电话线被拔出: 你的电话号码是正确的, 至关于DNS可以正确解析你的网址并访问服务器, 但服务器的程序没有启动所以没法处理你的程序, 浏览器在链接一段时间后发现一直没有响应报出链接超时.

2. 响应数据

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

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开发不只须要掌握多种技术, 还须要了解各类业务场景的处理办法. 这对新同窗来讲是一个挑战, 但愿各位新同窗可以坚持学习, 遇到问题能够留言.