第1章--Web系统组成与工作原理剖析课件

第1章 Web系统构成与工作原理系统构成与工作原理1.1 Web系统的发展历程1.2 Web系统构成与工作原理1.3 主流的Web应用程序平台1.1 Web系统的发展历程软件体系结构发展：主机/哑终端的集中计算模式1.1 Web系统的发展历程C/S结构：客户机和服务器结构如QQ、迅雷、魔兽争霸等需要下载安装客户端软件的系统优点：由于客户端实现与服务器的直接相连，没有中间环节，因此响应速度快。客户端为本地应用程序，运行效率高操作界面漂亮、形式多样，可以充分满足客户自身的个性化要求。C/S结构的管理信息系统具有较强的事务处理能力，能实现复杂的业务流程。缺点：需要专门的客户端安装程序，分布功能弱，针对点多面广且不具备网络条件的用户群体，不能够实现快速部署安装和配置。兼容性差，一般不能跨平台，对于不同的开发工具，具有较大的局限性。若采用不同工具，需要重新改写程序。开发成本较高，需要具有一定专业水准的技术人员才能完成。1.1 Web系统的发展历程B/S架构：不需要安装客户端软件，它运行在客户端的浏览器之上，系统升级或维护时只需更新服务器端软件即可优点：基于浏览器，具有统一的平台和UI体验。具有分布性特点，可以随时随地进行查询、浏览等业务处理。业务扩展简单方便，通过增加网页即可增加服务器功能。维护简单方便，只需要改变网页，即可实现所有用户的同步更新开发简单，共享性强 传统B/S的缺点：个性化特点明显降低，无法实现具有个性化的功能要求。操作是以鼠标为最基本的操作方式，无法满足快速操作的要求。页面动态刷新，响应速度明显降低。功能弱化，难以实现传统模式下的特殊功能要求。1.1 Web系统的发展历程RIA：ActiveX 插件AppletAdobe Flash/FlexJavaFXSilverLightHTML5示例：1.1 Web系统的发展历程混合型架构：1.1 Web系统的发展历程混合型架构：1.1 Web系统的发展历程混合型架构：1.1 Web系统的发展历程1989年，欧洲粒子物理实验室（CERN）的Tim Berners-Lee构思了Web（万维网）。他提出了HTTP协议和HTML语言，编写了世界上第一个Web服务器HTTPD和第一个浏览器，并全部放在互联网上免费传播1994年，欧洲粒子物理实验室（CERN）和麻省理工学院（MIT）签订协议成立World Wide Web Consortium（即W3C，网址是），由Tim Berners-Lee任主席。1.1 Web系统的发展历程Web推动了因特网的普及，加快了世界信息化的进程。Web简化了网络软件的开发，引起了软件业的革命。Web 1.0传统的主要为单向向用户传递信息的Web应用Web 2.0 核心:互动、分享与关系（不是一个技术标准）博客、百科、社交网站、P2P、IMWeb 3.0无处不联网：移动互联网网络计算：SaaS软件即服务，云计算语义网1.1 Web系统的发展历程Web前端开发技术的变更 Web1.0网页三剑客FlashDreamweaverFireworks Web2.0html5css3JavaScriptAjaxMVVM1.1 Web系统的发展历程1.2 Web系统构成与工作原理Web系统的构成Web服务器Web浏览器超文本传输协议HTTP(HyperText Transfer Protocol)超文本标记语言HTML(HyperText Markup Language)Web服务器Web浏览器HTTP请求HTTP响应因特网服务器链接到URL的超链HTTP 使用此 TCP 连接浏览器 程序服务器 程序HTTP客户北京邮电大学建立 TCP 连接释放 TCP 连接HTTP 响应报文 响应文档HTTP 请求报文 请求文档1.2 Web系统构成与工作原理用户点击鼠标后所发生的事件用户点击鼠标后所发生的事件 (1)浏览器分析超链指向页面的 URL。(2)浏览器向 DNS 请求解析 的 IP 地址。(3)域名系统 DNS 解析出北京邮电大学服务器的 IP 地址。(4)浏览器与服务器建立 TCP 连接(5)浏览器发出取文件命令：GET index.html。(6)服务器给出响应，把文件 index.html 发给浏览器。(7)TCP 连接释放。(8)浏览器显示“北京邮电大学主页”文件 index.html 中的所有文本。1.2 Web系统构成与工作原理怎样标志分布在整个因特网上的万维网文档？使用统一资源定位符 URL(Uniform Resource Locator)来标志万维网上的各种文档。使每一个文档在整个因特网的范围内具有唯一的标识符 URL。:/:/ftp 文件传送协议 FTPhttp 超文本传送协议 HTTP1.2 Web系统构成与工作原理n使用 HTTP 的 URL 的一般形式n :/:/HTTP 的默认端口号是 80，通常可省略 :/:/若再省略文件的项，则 URL 就指到因特网上的某个主页(home page)。1.2 Web系统构成与工作原理HTTP协议 RFC2616，HTTP1.1HTTP 是一个应用层协议，它使用 TCP 连接进行可靠的传送。HTTP 有两类报文：请求报文从客户向服务器发送请求报文。其组成包括:请求行(Request-Line)，可选的头域 (Header Field)，及实体(Entity-Body)。响应报文从服务器到客户的回答。组成包括状态行(Status-Line)，可选的头域(Header Field)，及实体(Entity-Body)由于 HTTP 是面向正文的(text-oriented)，因此在报文中的每一个字段都是一些 ASCII 码串，因而每个字段的长度都是不确定的。1.2 Web系统构成与工作原理HTTP协议HTTP协议是无状态同一个客户端的这次请求和上次请求是没有对应关系，对 服务器来说，它并不知道这两个请求来自同一个客户端。为了解决这个问题，Web程序引入了Cookie机制来维护状态.无状态不代表HTTP不能保持TCP连接，从HTTP/1.1起，默认都开启了Keep-Alive，保持连接特性，即当一个网页打开完成后，客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭，如果客户端再次访问这个服务器上的网页，会继续使用这一条已经建立的连接。打开一个网页一般需要浏览器发送很多次Request浏览器分析Response中的 HTML，发现其中引用了很多其他文件，比如图片，CSS文件，JS文件。浏览器会自动再次发送Request去获取图片，CSS文件，或者JS文件。等所有的文件都下载成功后。网页就被显示出来了。1.2 Web系统构成与工作原理HTTP请求消息结构：Full-Request=Request-Line*(General-Header|Request-Header|Entity-Header)CRLFEntity-Body请求行结构：Request-Line=Method SP/SP表示空格Request-URI SP HTTP-Version CRLF例如：1.2 Web系统构成与工作原理 这个消息共有9行(每行以一个回车符和一个换行符结束)，最后一行后面还有额外的一个回车符和换行符。当然，一个请求消息可以不止这么多行，也可以仅仅只有一行。请求消息的第一行称为请求行(request line)，后续各行都称为报头行(header)。1.2 Web系统构成与工作原理报头1、Connection：close是在告知服务器本浏览器不想使用永久连接方式（HTTP/1.0使用非永久连接，HTTP/1.1默认使用永久连接）。2、User-agent：Mozilla/5.0指定用户浏览器的类型。3、Accept-Encoding：gzip,compress指出发送此请求的浏览器支持哪些压缩编码方式。4、Accept-languag：en指出客户浏览器支持的语言是英语（english），1.2 Web系统构成与工作原理 请求行有3个元素:请求方法、URI、HTTP版本，最后以CRLF结尾。1、请求方法：指出客户请求服务器执行的一般操作。HTTP/1.1中定义了八种请求方法，其中GET、POST、HEAD是常用请求方法。GET：请求获取Request-URI所标识的资源，“查操作”POST：在Request-URI所标识的资源后附加新的数据，“改操作”HEAD：请求获取由Request-URI所标识的资源的响应消息报头PUT：请求服务器存储一个资源，并用Request-URI作为其标识，“增操作”DELETE：请求服务器删除Request-URI所标识的资源“删操作”TRACE：请求服务器回送收到的请求信息，主要用于测试或诊断CONNECT：保留将来使用OPTIONS：请求查询服务器的性能，或者查询与资源相关的选项和需求2、URI:统一资源标识，简单地讲被请求资源所处的地址，如：/3、HTTP版本：HTTP/1.1，高版本的服务器接受低版本客户的请求，并向客户发送同样版本的应答；高版本的客户接受低版本服务器的应答。1.2 Web系统构成与工作原理1、Date：Sun27Sep201513:56:39GMT指出服务器创建并发送本响应消息的日期和时间。2、Server：指出本消息是由Apache服务器产生的，服务器版本为3、ContentType：text/html指出包含在实体中的对象是HTML文本。1.2 Web系统构成与工作原理HTTP响应消息结构：Full-Response=Status-Line*(General-Header|Response-Header|Entity-Header)CRLFEntity-Body响应消息由状态行(status line)、报头和实体主体三部分组成。Status-Line=HTTP-Version SP Status-Code SP Reason-Phrase CRLF例如：HTTP/1.1 200 OK 状态行由协议版本、状态码、原因短语3个元素组成1.2 Web系统构成与工作原理状态代码有三位数字组成，第一个数字定义了响应的类别1xx：指示信息-表示请求已接收，继续处理2xx：成功-表示请求已被成功接收、理解、接受3xx：重定向-要完成请求必须进行更进一步的操作4xx：客户端错误-请求有语法错误或请求无法实现5xx：服务器端错误-服务器未能实现合法的请求常见状态代码、状态描述、说明：200 OK/客户端请求成功400 Bad Request/客户端请求有语法错误，不能被服务器所理解401 Unauthorized/请求未经授权403 Forbidden/服务器收到请求，但是拒绝提供服务404 Not Found/请求资源不存在，eg：输入了错误的URL500 Internal Server Error/服务器发生不可预期的错误503 Server Unavailable/服务器当前不能处理客户端的请求1.2 Web系统构成与工作原理HTTP消息报头 HTTP消息报头包括普通报头、请求报头、响应报头、实体报头。每一个报头域都是由名字+“：”+空格+值 组成，消息报头域的名字是大小写无关的1、普通报头Date普通报头域表示消息产生的日期和时间Connection普通报头域允许发送指定连接的选项。例如指定连接是连续，或者指定“close”选项，通知服务器，在响应完成后，关闭连接Cache-Control 用于指定缓存指令，请求时的缓存指令包括：no-cache（用于指示请求或响应消息不能缓存）、no-store、max-age、max-stale、min-fresh、only-if-cached;响应时的缓存指令包括：public、private、no-cache、no-store、notransform、must-revalidate、proxy-revalidate、max-age、smaxage.1.2 Web系统构成与工作原理Cache-Control1.2 Web系统构成与工作原理Cache-Control1.浏览器客户端想请求一个文档，首先检查本地缓存，发现存在这个文档的缓存，获取缓存中文档的最后修改时间，如果不知道是否新鲜，则通过：If-Modified-Since，发送Request给Web服务器。2.Web服务器收到Request，将服务器的文档修改时间（Last-Modified）:跟request header 中的，If-Modified-Since相比较，如果时间是一样的，说明缓存还是最新的，Web服务器将发送304 Not Modified给浏览器客户端，告诉客户端直接使用缓存里的版本。1.2 Web系统构成与工作原理Cache-ControlPublic 指示响应可被任何缓存区缓存。Private 指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的 部分响应消息，此响应消息对于其他用户的请求无效。no-cache 指示请求或响应消息不能缓存。no-store强制缓存在任何情况下都不要保留任何副本。max-age表示在这个时间范围内缓存是新鲜的无需更新。类似Expires时间，不过这个时间是相对的，而不是绝对的。也就是某次请求成功后多少秒内缓存是新鲜的。max-stale：允许缓存者，发送一个过期不超过指定秒数的响应。min-fresh：告知缓存者，如果当前时间加上min-fresh的值，超了该缓存的过期时间，则要给我一个新的.。1.2 Web系统构成与工作原理2、请求报头：允许客户端向服务器端传递请求的附加信息以及客户端自身的信息 Host请求报头域主要用于指定被请求资源的Internet主机和端口号（必须）Accept请求报头域用于指定客户端接受哪些类型的信息。Accept-Charset请求报头域用于指定客户端接受的字符集。Accept-Encoding请求报头域类似于Accept，但是它是用于指定可接受的内容编码。Accept-Language请求报头域类似于Accept，但是它是用于指定一种自然语言。Authorization请求报头域主要用于证明客户端有权查看某个资源。User-Agent浏览器的名称和版本referer表示从哪儿连结到目前的网页，采用的格式是URL。1.2 Web系统构成与工作原理2、请求报头：允许客户端向服务器端传递请求的附加信息以及客户端自身的信息 If-Modified-Since：把浏览器端缓存页面的最后修改时间发送到服务器去，服务器会把这个时间与服务器上实际文件的最后修改时间进行对比。如果时间一致，那么返回304，客户端就直接使用本地缓存文件。如果时间不一致，就会返回200和新的文件内容。客户端接到之后，会丢弃旧文件，把新文件缓存起来，并显示在浏览器中.Cookie:将cookie的值发送给HTTP 服务器 1.2 Web系统构成与工作原理3、响应报头：允许服务器传递不能放在状态行中的附加响应信息，以及关于服务器的信息和对Request-URI所标识的资源进行下一步访问的信息。Set-Cookie:把cookie 发送到客户端浏览器，每一个写入cookie都会生成一个Set-Cookie.1.2 Web系统构成与工作原理3、响应报头：允许服务器传递不能放在状态行中的附加响应信息，以及关于服务器的信息和对Request-URI所标识的资源进行下一步访问的信息。Location响应报头域用于重定向接受者到一个新的位置。Server响应报头域包含了服务器用来处理请求的软件信息。与User-Agent请求报头域是相对应的。WWW-Authenticate响应报头域必须被包含在401（未授权的）响应消息中，客户端收到401响应消息时候，并发送Authorization报头域请求服务器对其进行验证时，服务端响应报头就包含该报头域。1.2 Web系统构成与工作原理4、实体报头：请求和响应消息都可以传送一个实体。一个实体由实体报头域和实体正文组成，但并不是说实体报头域和实体正文要在一起发送，可以只发送实体报头域。实体报头定义了关于实体正文（eg：有无实体正文）和请求所标识的资源的元信息。Content-Encoding实体报头域被用作媒体类型的修饰符，它的值指示了已经被应用到实体正文的附加内容的编码。Content-Language实体报头域描述了资源所用的自然语言。Content-Length实体报头域用于指明实体正文的长度。Content-Type实体报头域用语指明发送给接收者的实体正文的媒体类型。Last-Modified实体报头域用于指示资源的最后修改日期和时间。Expires实体报头域给出响应过期的日期和时间。1.2 Web系统构成与工作原理超文本标记语言 HTML(HyperText Markup Language)使得万维网页面的设计者可以很方便地用一个超链从本页面的某处链接到因特网上的任何一个万维网页面，并且能够在自己的计算机屏幕上将这些页面显示出来。HTML 定义了许多用于排版的命令（即标签）。HTML 把各种标签嵌入到万维网的页面中。这样就构成了所谓的 HTML 文档。HTML 文档是一种可以用任何文本编辑器创建的 ASCII 码文件。1.2 Web系统构成与工作原理超文本标记语言 HTML(HyperText Markup Language)使得万维网页面的设计者可以很方便地用一个超链从本页面的某处链接到因特网上的任何一个万维网页面，并且能够在自己的计算机屏幕上将这些页面显示出来。HTML 定义了许多用于排版的命令（即标签）。HTML 把各种标签嵌入到万维网的页面中。这样就构成了所谓的 HTML 文档。HTML 文档是一种可以用任何文本编辑器创建的 ASCII 码文件。HTML HTML 文档中标签的用法文档中标签的用法 我的主页 我的网络编程示例网页 我的学号：*我的姓名：*我的第二个页面 a 我同学*的主页文档类型声明HTML HTML 文档中标签的用法文档中标签的用法 我的主页 我的网络编程示例网页 我的学号：*我的姓名：*我的第二个页面 a 我同学*的主页HTML 文档开始HTML HTML 文档中标签的用法文档中标签的用法 首部开始 我的主页 我的网络编程示例网页 我的学号：*我的姓名：*我的第二个页面 a 我同学*的主页HTML HTML 文档中标签的用法文档中标签的用法 标题 我的主页 我的网络编程示例网页 我的学号：*我的姓名：*我的第二个页面 a 我同学*的主页HTML HTML 文档中标签的用法文档中标签的用法 首部结束 我的主页 我的网络编程示例网页 我的学号：*我的姓名：*我的第二个页面 a 我同学*的主页HTML HTML 文档中标签的用法文档中标签的用法 主体开始 我的主页 我的网络编程示例网页 我的学号：*我的姓名：*我的第二个页面 a 我同学*的主页HTML HTML 文档中标签的用法文档中标签的用法 1 级标题 我的主页 我的网络编程示例网页 我的学号：*我的姓名：*我的第二个页面 a 我同学*的主页HTML HTML 文档中标签的用法文档中标签的用法 第一个段落 我的主页 我的网络编程示例网页 我的学号：*我的姓名：*我的第二个页面 a 我同学*的主页HTML HTML 文档中标签的用法文档中标签的用法 第二个段落 我的主页 我的网络编程示例网页 我的学号：*我的姓名：*我的第二个页面 a 我同学*的主页HTML HTML 文档中标签的用法文档中标签的用法 一个本地链接 我的主页 我的网络编程示例网页 我的学号：*我的姓名：*我的第二个页面 a 我同学*的主页HTML HTML 文档中标签的用法文档中标签的用法 一个远程链接 我的主页 我的网络编程示例网页 我的学号：*我的姓名：*我的第二个页面 a 我同学*的主页HTML HTML 文档中标签的用法文档中标签的用法 主体结束 我的主页 我的网络编程示例网页 我的学号：*我的姓名：*我的第二个页面 a 我同学*的主页HTML HTML 文档中标签的用法文档中标签的用法 HTML 文档结束 我的主页 我的网络编程示例网页 我的学号：*我的姓名：*我的第二个页面 a 我同学*的主页WebWeb浏览器浏览器Web浏览器产品Internet Explorer（微软）Firefox(Mozilla)Safari(Apple)Chrome(Geogle)Opera(Opera)QQ浏览器、360浏览器、UC浏览器Web浏览器内核Trident 也叫IE内核，使用该内核的浏览器包括IE以及众多国产浏览器Gecko 也叫Firefox内核，使用该内核的浏览器是FirefoxWebkit 使用该内核的浏览器有Safari、360、搜狗、andriodBlink 使用该内核的浏览器有ChromeWebWeb服务器服务器Web服务器产品ApacheIISNginxGWS轻量级web服务器：light d等JavaWeb服务器：Tomcat、Resin、Weblogic、Jboss、GlassFish、IBM Websphere等1.3 1.3 主流的主流的WebWeb应用程序平台应用程序平台动态网站服务器平台的最少组合包括：操作系统+Web服务器+应用服务器+数据库，操作系统可以使用UNIX、Linux、Windows等，根据不同的像ASP、JSP和PHP等脚本语言选择对应的应用服务器。常见的Web应用程序开发平台有：ASP.NET：操作系统使用Windows、web服务器为IIS，数据库常用SQL Server，服务器编程语言为ASP、C#JavaEE：运用在JVM上，跨平台，服务器Tomcat、Weblogic，开发语言为jsp、java、ssh（struct、spring、hibernate）XAMP：Linux或Windows、服务器为Apache、Nginx，开发语言为PHP，数据库常为MysqlPython Web：新兴的快速开发平台，跨平台、Python语言、Django、Flask、web.py等框架1.3 1.3 主流的主流的WebWeb应用程序平台应用程序平台搭建IIS 环境卸载或更改程序打开或关闭Windows功能1.3 1.3 主流的主流的WebWeb应用程序平台应用程序平台搭建IIS 环境1.3 1.3 主流的主流的WebWeb应用程序平台应用程序平台搭建IIS 环境1.3 1.3 主流的主流的WebWeb应用程序平台应用程序平台搭建IIS 环境1.3 1.3 主流的主流的WebWeb应用程序平台应用程序平台搭建XAMPP环境1.3 1.3 主流的主流的WebWeb应用程序平台应用程序平台搭建XAMPP环境本章作业（不用交）本章作业（不用交）自己动手搭建一个Web服务器，研究一下Web服务器的常用配置IIS、Apache、Nginx均可