服务器浏览器相关知识
CS,BS架构
标签（空格分隔）： 网络开发
无论是C/S,还是B/S都需要联网,所以不需要互联网的单机软件不在讨论范围内
C/S架构
是Client/Server这两个单词的首字母,指的是客户端,服务器架构的意思,很多常见的软件都是这种架构呢
解释
对于C/S架构,最为常见的例子就是网络游戏,比如LOL,WOW如果不联网无法使用,你在软件内所做的所有操作通过互联网能够传递到其他的的玩家身上优点:
性能较高:可以将一部分的计算工作放在客户端上,这样服务器只需要处理数据即可
界面酷炫:客户端可以使用更多系统提供的效果,做出更为炫目的效果
- 缺点:
更新软件:如果推出了新版本,不更新客户端无法登陆使用(一部分)
不同设备访问:如果使用其他的电脑,没有安装客户端的话就无法登陆软件(比如收发邮件)
B/S架构
是Browser/Server的这两个单词的首字母,指的是浏览器,服务器,是WEB兴起之后的一种架构
解释
现在所有的网站都是B/S架构,较为常见的例子有百度,知乎,网易云音乐Web等等,所有只需要通过浏览器即可使用.优点
更新简洁:如果需要更新内容了,对开发人员而言需要更改服务器的内容,但是对用户而言只需要刷新浏览器即可
多设备同步:所有数据都在网上,只要能够使用浏览器即可登录使用
- 缺点:
性能较低:相比于客户端应用性能较低,但是随着硬件性能的提升,这个差距在缩小
浏览器兼容:处理低版本的浏览器显示问题一直是前端开发人员头痛的问题之一,移动设备兼容性较好,ie6已经越来越少人用了
拓展阅读:Internet Explorer6知乎精华
web开发概述
标签（空格分隔）： 网络开发
web开发涵盖了很多方面的技术,为了弄明白这些技术之间的关系,我们通过一幅图来进行讲解
浏览器(前端工程师)
当我们使用浏览器访问网页时.无论是访问本地或网络上的网页,最终浏览器接收到的都是HTML,CSS,JavaScript,紧接着浏览器将这些内容渲染(显示)成图形界面给用户.这些界面的设计者,就是我们的前端工程师
HTML
百度百科:超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
超文本标记语言? 有了网络以后我们想传播的不仅仅只有文字,可能还有图片,音频,视频或者更多好玩的东西,那么如何来表达这些内容呢?
1 中文:这是一张图片
2 英文:this is a picture
3 阿拉伯语:هذه هي الصورة
….等等
很明显,这对于母语中文,略懂英文的我们而言,这不是一个很好的示例,别忘了世界上有很多不同的语言,如果不同国家都用本国的语言来交流很明显不是一个好的方法
HTML(超文本标记语言) 超文本标记语言的作用就是提供了一种标准格式,当大家都遵守这种格式时,彼此之间就能够进行交流,下图就是一些简单的HTML代码,使用标签的方式将需要表述的内容包裹起来,经由浏览器解析展现给用户. 更为详细的教程可以查阅 w3cSchool_HTML教程
HTML5 HTML的出现就是让广大开发者,对于网页代码中标签名,标签属性等等内容的一个通用标准,而HTML5就是其中比较新的一个标准而已,所以从狭义来说:HTML5就是多了几个新的标签而已,这些标签的强大之处在于:让原本需要开发人员写一堆代码才能实现的功能,现在直接就可以使用(注:移动设备对于HTML5的支持更为友善)
CSS
如果说HTML是网页的骨架,那么CSS的出现就是让这身骨架拥有了衣服,变得更为精美.更为详细的写法教程可以查阅w3cSchool_CSS教程
纯HTML 在没有CSS的时代,单纯的时候标签进行数据的传递,这个时候的页面非常适合搞学术的人群因为他真的很难看
CSS 当我们为其添加了CSS效果以后,就会出现惊人的变化(页面不好看轻拍 o(╯□╰)o)
CSS3 如果说CSS是普通的衣服,那么CSS3就是充值了VIP以后可以穿的衣服,更为酷炫,可以让页面中的元素拥有更多的变化
JavaScript
当页面拥有了骨骼HTML,衣服CSS之后,能够动起来,我们又有了JavaScript. 更为详细的写法教程可以查阅w3cSchool_JavaScript教程
JavaScript 通过使用JavaScript让我们的页面能够真正的跟用户交互起来,比如:用户鼠标移动时出现花朵,用户注册时输入用户名检查是否重名并且给予相应的提醒等等.通过这些方式让我们的页面更为人性化.不过JavaScript的作用不仅于此,也能够用来开发服务端,比如node.js这里先不做拓展.
服务器(服务端开发,后台开发)
当我们通过连接网络的设备,访问网络上的数据时,就牵扯到了客户端跟服务端的交互.举个例子就是:
A找B 你那边有没有XXX
B找了找,有哦!发给你 A接收到了B发过来的东西 至于他们之间 请求以及接收的内容到底是什么,就要看到底是通过什么方式去找什么服务器获取了
服务器类型
虽然之前我们学习的都是HTML相关的内容,但是我们能够从网络上获取的内容绝对不止网页,比如下载视频,听歌,玩游戏,在线聊天
服务器分类
按类型分:
文件服务器、数据库服务器、邮件服务器、Web 服务器等；
按软件分:
Apache服务器、Nginx 服务器、IIS服务器、Tomcat服务器、Node服务器等。
按操作系统分:
Linux服务器、Windows服务器等；
服务器软件
提供了某种服务的计算器,我们称之为服务器,那么这些赋予计算器各种服务功能的软件主要有哪一些呢?
常见的服务器软件有：
文件服务器：Server-U、FileZilla、VsFTP等；
数据库服务器：Oracle、MySQL、PostgreSQL、MSSQL等；
邮件服务器：Postfix、Sendmail等；
HTTP 服务器：Apache、Nginx、IIS、Tomcat、NodeJS等； 这里我们主要介绍HTTP服务器
HTTP协议:
当我们在浏览器中输入了www.baidu.com类似这样的地址,点击确认时.只要我们的设备在网络上,就能够返回对应的百度首页回来.
- 浏览器发出请求->互联网上的服务器
- 服务器获取请求->请求的浏览器
参照之前的HTML标准格式,浏览器找服务器要数据这个操作也需要彼此之间有一定的共识,而这种共识就叫做HTTP协议
HTTP服务器
直译过来就是网站服务器,主要为用户提供各种文档资源(文本,图片,音频等)一般安装有,IIS,apache等软件
服务端开发 身为21世纪的网站,早就不局限于请求,响应这种最基础的方式了. 试想一下:
- 你每次访问百度首页看到的内容是否一样
- 你登陆了淘宝没登录淘宝看到的页面是否一样,为什么会产生这种变化呢?
这是因为当我们的请求到达服务器时,会根据我们请求的内容进行一些逻辑处理,返回不同的页面给用户,这部分的开发叫做服务端开发,可以开发的语言有:PHP,Asp,Jsp,Ruby,Erland等等
数据库(DBA数据库管理员)
试想一下,如果一个网站的注册用户有1千万个那么应该使用什么格式,什么方式来保存这些数据呢?
保存的格式: 这个很简单:比如 用户名,密码,性别,出生,爱好,头像 等等 这样的数据排列方式,每一个用户就是一行
常规保存方式:
.txt文件:因为内容是文本,所以直接使用文本文件保存肯定可以,但是当一个文本文件很大很大时,打开是异常缓慢的
.excel文件:可以用来进行数据的统计,分析等操作,但是当很多个人需要访问同一个.excel文件时,性能也很差
当然也可能想到一些其他的保存方式,但如果出现被删除,被胡乱修改所带来的后果都是灾难性的
数据库:
按照数据结构来组织,存储和管理数据的仓库,软件开发行业一般指的是数据库软件,常见的有:Oracle、MySQL、MSSQL等
特点:
数据共享:多用户同时访问数据的稳定性
故障恢复:数据库软件提供了一套的方法,可以用来发现错误并且修复错误
减少数据冗余:由于大家都可以使用同一套数据,没有必要重复创建了
DBA数据库管理员:
从事管理和维护数据库管理系统(DBMS)的相关工作人员的统称，他的工作目的是:保证数据库的稳定性,安全性,完整性和高性能.
网络传输协议
常见网络传输协议
协议可以理解为一套规范,当使用的双反都遵守这套规范时,才能够实现沟通.比如对于嘿嘿的理解不同,带来的沟通障碍.网络协议就有更多规则,需要先干什么,再干什么
常见协议
HTTP,HTTPS超文本传输协议
FTP文件传输协议
SMTP邮件传输协议
HTTP协议
网站是基于HTTP协议的,比如我们在开发网站中经常使用的css,js,图片等等都是基于该协议进行传输的
组成部分
从客户端(能够发送HTTP)发出的:请求Request
从服务器返回的:响应Response
http开发
监测工具
使用监测工具我们可以查看这些HTTP请求,以及编辑请求内容,重新发送等
浏览器
Chrome,Firefox开发工具
抓包工具
Fiddler,Charles
请求/请求报文
请求有客户端发出,主要有三个组成部分:请求行,请求头,请求主体
请求方法:GET
请求URL
HTTP协议版本
请求头
这里设置的主要是一些信息,包含客户端,服务器User-Agent：浏览器的具体类型 如：User-Agent：Mozilla/5.0 (Windows NT 6.1; rv:17.0) Gecko/20100101 Firefox/17.0
Accept：浏览器支持哪些数据类型 如：Accept: text/html,application/xhtml+xml,application/xml;q=0.9;
Accept-Charset：浏览器采用的是哪种编码 如：Accept-Charset: ISO-8859-1
Accept-Encoding：浏览器支持解码的数据压缩格式 如：Accept-Encoding: gzip, deflate
Accept-Language：浏览器的语言环境 如：Accept-Language zh-cn,zh;q=0.8,en-us;q=0.5,en;q=0.3
Host：请求的主机名，允许多个域名同处一个IP地址，即虚拟主机。Host:www.baidu.com
Connection：表示是否需要持久连接。Keep-Alive/close，HTTP1.1默认是持久连接，它可以利用持久连接的优点，当页面包含多个元素时（例如Applet，图片），显著地减少下载所需要的时间。要实现这一点，Servlet需要在应答中发送一个Content-Length头，最简单的实现方法是：先把内容写入ByteArrayOutputStream，然后在正式写出内容之前计算它的大小。如：Connection: Keep-Alive
Content-Length：表示请求消息正文的长度。对于POST请求来说Content-Length必须出现。
Content-Type：WEB服务器告诉浏览器自己响应的对象的类型和字符集。例如：Content-Type: text/html; charset=’gb2312’
Content-Encoding：WEB服务器表明自己使用了什么压缩方法（gzip，deflate）压缩响应中的对象。例如：Content-Encoding：gzip
Content-Language：WEB服务器告诉浏览器自己响应的对象的语言。
Cookie：最常用的请求头，浏览器每次都会将cookie发送到服务器上，允许服务器在客户端存储少量数据。
Referer：包含一个URL，用户从该URL代表的页面出发访问当前请求的页面。服务器能知道你是从哪个页面过来的。Referer: http://www.baidu.com/
请求体
这里是提交给服务器的数据
需要注意的是,如果是往服务器提交数据,需要在请求头中设置Content-Type: application/x-www-form-urlencoded(在ajax中需要手动设置)
响应/响应报文
响应报文是服务器发回给客户端的.组成部分有状态行,响应头,响应主体
常见相应属性
Cache-Control
响应输出到客户端后，服务端通过该报文头属告诉客户端如何控制响应内容的缓存。
下面，的设置让客户端对响应内容缓存3600秒，也即在3600秒内，如果客户再次访问该资源，直接从客户端的缓存中返回内容给客户，不要再从服务端获取（当然，这个功能是靠客户端实现的，服务端只是通过这个属性提示客户端“应该这么做”，做不做，还是决定于客户端，如果是自己宣称支持HTTP的客户端，则就应该这样实现）。
1 | Cache-Control: max-age=3600 |
1 | ETag |
一个代表响应服务端资源（如页面）版本的报文头属性，如果某个服务端资源发生变化了，这个ETag就会相应发生变化。它是Cache-Control的有益补充，可以让客户端“更智能”地处理什么时候要从服务端取资源，什么时候可以直接从缓存中返回响应。
1 | ETag: "737060cd8c284d8af7ad3082f209582d" |
1 | Location |
我们在Asp.net中让页面Redirect到一个某个A页面中，其实是让客户端再发一个请求到A页面，这个需要Redirect到的A页面的URL，其实就是通过响应报文头的Location属性告知客户端的，如下的报文头属性，将使客户端redirect到iteye的首页中：
1 | Location: http://www.google.com.hk |
1 | Set-Cookie |
服务端可以设置客户端的Cookie，其原理就是通过这个响应报文头属性实现的。
1 |
|
HTTP响应体：如果请求的是HTML页面，那么返回的就是HTML代码。如果是JS就是JS代码。
HTTP响应头：而设置Cookie，缓存等信息就是在响应头属性设置的。
HTTP响应行：主要是设置响应状态等信息。
HTTP服务搭建
AMP
AMP:A:Apache,M:MySQL,P:PHP
Apache 世界排名第一的服务器软件,特点是简单,速度快,性能稳定
MySQL 得益于他体积小、速度快、使用成本低，而且是开源哦，所以很多网站都选用MySql作为他们的数据库.
PHP 展开后PHP: Hypertext Preprocessor，中文名：超文本预处理器,直接将代码嵌入HTML 文档中执行,简单易学,容易上手.
AMP集成环境
刚刚已经解释了这几个单词的意思,其中AMP是三个独立的软件,但是对于初学者而言分别安装以及配置需要掌握一定的软件知识,所以就有了很多AMP集成环境帮助我们简化安装
WAMP: 在windows平台下如果想要一步到位安装好这些软件,可以使用wamp,其中w的意思为windows指的是windows操作系统 软件的官网为:wamp官方网站
XAMPP: 不同于wamp针对于windows,XAMPP可以安装在Linux,Windows,MAC OS X,Solaris这些操作系统上面