网络编程技术：第1章 Web系统组成与工作原理

第1章Web系统构成与工作原理1.1Web系统的发展历程1.2Web系统构成与工作原理1.3主流的Web应用程序平台1.1Web系统的发展历程软件体系结构发展：主机/哑终端的集中计算模式1.1Web系统的发展历程C/S结构：客户机和服务器结构如QQ、迅雷、魔兽争霸等需要下载安装客户端软件的系统优点：由于客户端实现与服务器的直接相连，没有中间环节，因此响应速度快。客户端为本地应用程序，运行效率高操作界面漂亮、形式多样，可以充分满足客户自身的个性化要求。C/S结构的管理信息系统具有较强的事务处理能力，能实现复杂的业务流程。缺点：需要专门的客户端安装程序，分布功能弱，针对点多面广且不具备网络条件的用户群体，不能够实现快速部署安装和配置。兼容性差，一般不能跨平台，对于不同的开发工具，具有较大的局限性。若采用不同工具，需要重新改写程序。开发成本较高，需要具有一定专业水准的技术人员才能完成。1.1Web系统的发展历程B/S架构：不需要安装客户端软件，它运行在客户端的浏览器之上，系统升级或维护时只需更新服务器端软件即可优点：基于浏览器，具有统一的平台和UI体验。具有分布性特点，可以随时随地进行查询、浏览等业务处理。业务扩展简单方便，通过增加网页即可增加服务器功能。维护简单方便，只需要改变网页，即可实现所有用户的同步更新开发简单，共享性强传统B/S的缺点：个性化特点明显降低，无法实现具有个性化的功能要求。操作是以鼠标为最基本的操作方式，无法满足快速操作的要求。页面动态刷新，响应速度明显降低。功能弱化，难以实现传统模式下的特殊功能要求。1.1Web系统的发展历程RIA：ActiveX插件AppletAdobeFlash/FlexJavaFXSilverLightHTML5……示例：/doc/example.html1.1Web系统的发展历程混合型架构：1.1Web系统的发展历程混合型架构：1.1Web系统的发展历程混合型架构：1.1Web系统的发展历程1989年，欧洲粒子物理实验室（CERN）的TimBerners-Lee构思了Web（万维网）。他提出了HTTP协议和HTML语言，编写了世界上第一个Web服务器HTTPD和第一个浏览器，并全部放在互联网上免费传播1994年，欧洲粒子物理实验室（CERN）和麻省理工学院（MIT）签订协议成立WorldWideWebConsortium（即W3C，网址是），由TimBerners-Lee任主席。1.1Web系统的发展历程Web推动了因特网的普及，加快了世界信息化的进程。Web简化了网络软件的开发，引起了软件业的革命。Web1.0传统的主要为单向向用户传递信息的Web应用Web2.0核心:互动、分享与关系（不是一个技术标准）博客、百科、社交网站、P2P、IMWeb3.0无处不联网：移动互联网网络计算：SaaS软件即服务，云计算语义网1.1Web系统的发展历程Web前端开发技术的变更Web1.0网页三剑客FlashDreamweaverFireworksWeb2.0html5css3JavaScriptAjaxMVVM……1.1Web系统的发展历程1.2Web系统构成与工作原理Web系统的构成Web服务器Web浏览器超文本传输协议HTTP(HyperTextTransferProtocol)超文本标记语言HTML(HyperTextMarkupLanguage)

Web服务器Web浏览器HTTP请求HTTP响应因特网服务器链接到URL的超链HTTP使用此TCP连接浏览器程序服务器程序HTTP客户北京邮电大学建立TCP连接释放TCP连接HTTP响应报文响应文档HTTP请求报文请求文档1.2Web系统构成与工作原理用户点击鼠标后所发生的事件(1)浏览器分析超链指向页面的URL。(2)浏览器向DNS请求解析

的IP地址。(3)域名系统DNS解析出北京邮电大学服务器的IP地址。(4)浏览器与服务器建立TCP连接(5)浏览器发出取文件命令：

GETindex.html。(6)服务器给出响应，把文件index.html发给浏览器。(7)TCP连接释放。(8)浏览器显示“北京邮电大学主页”文件index.html中的所有文本。1.2Web系统构成与工作原理怎样标志分布在整个因特网上的万维网文档？

使用统一资源定位符

URL(UniformResourceLocator)来标志万维网上的各种文档。使每一个文档在整个因特网的范围内具有唯一的标识符URL。

<协议>://<主机>:<端口>/<路径>ftp——文件传送协议FTPhttp——超文本传送协议HTTP1.2Web系统构成与工作原理使用HTTP的URL的一般形式

http://<主机>:<端口>/<路径>

HTTP的默认端口号是80，通常可省略

http://<主机>:<端口>/<路径>

若再省略文件的<路径>项，则URL就指到因特网上的某个主页(homepage)。1.2Web系统构成与工作原理HTTP协议

RFC2616，HTTP1.1HTTP是一个应用层协议，它使用TCP连接进行可靠的传送。

HTTP有两类报文：请求报文——从客户向服务器发送请求报文。其组成包括:请求行(Request-Line)，可选的头域

(HeaderField)，及实体(Entity-Body)。响应报文——从服务器到客户的回答。组成包括状态行(Status-Line)，可选的头域

(HeaderField)，及实体(Entity-Body)由于HTTP是面向正文的(text-oriented)，因此在报文中的每一个字段都是一些ASCII码串，因而每个字段的长度都是不确定的。1.2Web系统构成与工作原理HTTP协议HTTP协议是无状态同一个客户端的这次请求和上次请求是没有对应关系，对http服务器来说，它并不知道这两个请求来自同一个客户端。为了解决这个问题，Web程序引入了Cookie机制来维护状态.无状态不代表HTTP不能保持TCP连接，从HTTP/1.1起，默认都开启了Keep-Alive，保持连接特性，即当一个网页打开完成后，客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭，如果客户端再次访问这个服务器上的网页，会继续使用这一条已经建立的连接。打开一个网页一般需要浏览器发送很多次Request浏览器分析Response中的HTML，发现其中引用了很多其他文件，比如图片，CSS文件，JS文件。浏览器会自动再次发送Request去获取图片，CSS文件，或者JS文件。等所有的文件都下载成功后。网页就被显示出来了。1.2Web系统构成与工作原理HTTP请求消息结构： Full-Request=Request-Line *(General-Header |Request-Header |Entity-Header)

CRLF [Entity-Body]请求行结构：

Request-Line=MethodSP//SP表示空格

Request-URISP

HTTP-VersionCRLF例如：GETHTTP/1.11.2Web系统构成与工作原理

这个消息共有9行(每行以一个回车符和一个换行符结束)，最后一行后面还有额外的一个回车符和换行符。当然，一个请求消息可以不止这么多行，也可以仅仅只有一行。请求消息的第一行称为请求行(requestline)，后续各行都称为报头行(header)。1.2Web系统构成与工作原理报头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.2Web系统构成与工作原理请求行有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.2Web系统构成与工作原理1、Date：Sun

27

Sep

2015

13:56:39

GMT指出服务器创建并发送本响应消息的日期和时间。2、Server：Apache/2.2.29

(Unix)指出本消息是由Apache服务器产生的，服务器版本为2.2.293、Content—Type：text/html指出包含在实体中的对象是HTML文本。1.2Web系统构成与工作原理HTTP响应消息结构： Full-Response=Status-Line *(General-Header |Response-Header |Entity-Header)

CRLF [Entity-Body]响应消息由状态行(statusline)、报头和实体主体三部分组成。Status-Line=HTTP-VersionSP

Status-CodeSP

Reason-Phrase

CRLF例如：

HTTP/1.1200OK状态行由协议版本、状态码、原因短语3个元素组成1.2Web系统构成与工作原理状态代码有三位数字组成，第一个数字定义了响应的类别1xx：指示信息--表示请求已接收，继续处理

2xx：成功--表示请求已被成功接收、理解、接受

3xx：重定向--要完成请求必须进行更进一步的操作

4xx：客户端错误--请求有语法错误或请求无法实现

5xx：服务器端错误--服务器未能实现合法的请求常见状态代码、状态描述、说明：

200OK//客户端请求成功

400BadRequest//客户端请求有语法错误，不能被服务器所理解

401Unauthorized//请求未经授权

403Forbidden//服务器收到请求，但是拒绝提供服务

404NotFound//请求资源不存在，eg：输入了错误的URL

500InternalServerError//服务器发生不可预期的错误

503ServerUnavailable//服务器当前不能处理客户端的请求1.2Web系统构成与工作原理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.2Web系统构成与工作原理Cache-Control1.2Web系统构成与工作原理Cache-Control1.浏览器客户端想请求一个文档，

首先检查本地缓存，发现存在这个文档的缓存，

获取缓存中文档的最后修改时间，如果不知道是否新鲜，则通过：If-Modified-Since，发送Request给Web服务器。2.Web服务器收到Request，将服务器的文档修改时间（Last-Modified）:跟requestheader中的，If-Modified-Since相比较，如果时间是一样的，说明缓存还是最新的，Web服务器将发送304NotModified给浏览器客户端，告诉客户端直接使用缓存里的版本。1.2Web系统构成与工作原理Cache-ControlPublic指示响应可被任何缓存区缓存。

Private指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效。no-cache

指示请求或响应消息不能缓存。no-store强制缓存在任何情况下都不要保留任何副本。max-age表示在这个时间范围内缓存是新鲜的无需更新。类似Expires时间，不过这个时间是相对的，而不是绝对的。也就是某次请求成功后多少秒内缓存是新鲜的。max-stale：允许缓存者，发送一个过期不超过指定秒数的响应。min-fresh：告知缓存者，如果当前时间加上min-fresh的值，超了该缓存的过期时间，则要给我一个新的.。1.2Web系统构成与工作原理2、请求报头：允许客户端向服务器端传递请求的附加信息以及客户端自身的信息

Host请求报头域主要用于指定被请求资源的Internet主机和端口号（必须）

Accept请求报头域用于指定客户端接受哪些类型的信息。

Accept-Charset请求报头域用于指定客户端接受的字符集。

Accept-Encoding请求报头域类似于Accept，但是它是用于指定可接受的内容编码。Accept-Language请求报头域类似于Accept，但是它是用于指定一种自然语言。Authorization请求报头域主要用于证明客户端有权查看某个资源。User-Agent浏览器的名称和版本referer表示从哪儿连结到目前的网页，采用的格式是URL。

1.2Web系统构成与工作原理2、请求报头：允许客户端向服务器端传递请求的附加信息以及客户端自身的信息

If-Modified-Since：把浏览器端缓存页面的最后修改时间发送到服务器去，服务器会把这个时间与服务器上实际文件的最后修改时间进行对比。如果时间一致，那么返回304，客户端就直接使用本地缓存文件。如果时间不一致，就会返回200和新的文件内容。客户端接到之后，会丢弃旧文件，把新文件缓存起来，并显示在浏览器中.Cookie:

将cookie的值发送给HTTP服务器

1.2Web系统构成与工作原理3、响应报头：允许服务器传递不能放在状态行中的附加响应信息，以及关于服务器的信息和对Request-URI所标识的资源进行下一步访问的信息。

Set-Cookie:把cookie发送到客户端浏览器，每一个写入cookie都会生成一个Set-Cookie.1.2Web系统构成与工作原理3、响应报头：允许服务器传递不能放在状态行中的附加响应信息，以及关于服务器的信息和对Request-URI所标识的资源进行下一步访问的信息。

Location响应报头域用于重定向接受者到一个新的位置。

Server响应报头域包含了服务器用来处理请求的软件信息。与User-Agent请求报头域是相对应的。

WWW-Authenticate响应报头域必须被包含在401（未授权的）响应消息中，客户端收到401响应消息时候，并发送Authorization报头域请求服务器对其进行验证时，服务端响应报头就包含该报头域。1.2Web系统构成与工作原理4、实体报头：请求和响应消息都可以传送一个实体。一个实体由实体报头域和实体正文组成，但并不是说实体报头域和实体正文要在一起发送，可以只发送实体报头域。实体报头定义了关于实体正文（eg：有无实体正文）和请求所标识的资源的元信息。

Content-Encoding实体报头域被用作媒体类型的修饰符，它的值指示了已经被应用到实体正文的附加内容的编码。

Content-Language实体报头域描述了资源所用的自然语言。Content-Length实体报头域用于指明实体正文的长度。Content-Type实体报头域用语指明发送给接收者的实体正文的媒体类型。Last-Modified实体报头域用于指示资源的最后修改日期和时间。

Expires实体报头域给出响应过期的日期和时间。

1.2Web系统构成与工作原理超文本标记语言HTML(HyperTextMarkupLanguage)使得万维网页面的设计者可以很方便地用一个超链从本页面的某处链接到因特网上的任何一个万维网页面，并且能够在自己的计算机屏幕上将这些页面显示出来。

HTML定义了许多用于排版的命令（即标签）。HTML把各种标签嵌入到万维网的页面中。这样就构成了所谓的HTML文档。HTML文档是一种可以用任何文本编辑器创建的ASCII码文件。

1.2Web系统构成与工作原理超文本标记语言HTML(HyperTextMarkupLanguage)使得万维网页面的设计者可以很方便地用一个超链从本页面的某处链接到因特网上的任何一个万维网页面，并且能够在自己的计算机屏幕上将这些页面显示出来。

HTML定义了许多用于排版的命令（即标签）。HTML把各种标签嵌入到万维网的页面中。这样就构成了所谓的HTML文档。HTML文档是一种可以用任何文本编辑器创建的ASCII码文件。

HTML文档中标签的用法<!DOCTYPEhtml><html><head>

<metacharset="UTF-8">

<title>我的主页</title></head><body>

<h1>我的网络编程示例网页</h1>

<p>我的学号：******</p>

<p>我的姓名：******</p>

<p><ahref="second.html">我的第二个页面</a></p>

<p><ahref="http://**.**.**.**">我同学***的主页</a></p></body></html>文档类型声明HTML文档中标签的用法<!DOCTYPEhtml><html><head>

<metacharset="UTF-8">

<title>我的主页</title></head><body>

<h1>我的网络编程示例网页</h1>

<p>我的学号：******</p>

<p>我的姓名：******</p>

<p><ahref="second.html">我的第二个页面</a></p>

<p><ahref="http://**.**.**.**">我同学***的主页</a></p></body></html>HTML文档开始HTML文档中标签的用法首部开始<!DOCTYPEhtml><html><head>

<metacharset="UTF-8">

<title>我的主页</title></head><body>

<h1>我的网络编程示例网页</h1>

<p>我的学号：******</p>

<p>我的姓名：******</p>

<p><ahref="second.html">我的第二个页面</a></p>

<p><ahref="http://**.**.**.**">我同学***的主页</a></p></body></html>HTML文档中标签的用法标题<!DOCTYPEhtml><html><head>

<metacharset="UTF-8">

<title>我的主页</title></head><body>

<h1>我的网络编程示例网页</h1>

<p>我的学号：******</p>

<p>我的姓名：******</p>

<p><ahref="second.html">我的第二个页面</a></p>

<p><ahref="http://**.**.**.**">我同学***的主页</a></p></body></html>HTML文档中标签的用法首部结束<!DOCTYPEhtml><html><head>

<metacharset="UTF-8">

<title>我的主页</title></head><body>

<h1>我的网络编程示例网页</h1>

<p>我的学号：******</p>

<p>我的姓名：******</p>

<p><ahref="second.html">我的第二个页面</a></p>

<p><ahref="http://**.**.**.**">我同学***的主页</a></p></body></html>HTML文档中标签的用法主体开始<!DOCTYPEhtml><html><head>

<metacharset="UTF-8">

<title>我的主页</title></head><body>

<h1>我的网络编程示例网页</h1>

<p>我的学号：******</p>

<p>我的姓名：******</p>

<p><ahref="second.html">我的第二个页面</a></p>

<p><ahref="http://**.**.**.**">我同学***的主页</a></p></body></html>HTML文档中标签的用法1

级标题<!DOCTYPEhtml><html><head>

<metacharset="UTF-8">

<title>我的主页</title></head><body>

<h1>我的网络编程示例网页</h1>

<p>我的学号：******</p>

<p>我的姓名：******</p>

<p><ahref="second.html">我的第二个页面</a></p>

<p><ahref="http://**.**.**.**">我同学***的主页</a></p></body></html>HTML文档中标签的用法第一个段落<!DOCTYPEhtml><html><head>

<metacharset="UTF-8">

<title>我的主页</title></head><body>

<h1>我的网络编程示例网页</h1>

<p>我的学号：******</p>

<p>我的姓名：******</p>

<p><ahref="second.html">我的第二个页面</a></p>

<p><ahref="http://**.**.**.**">我同学***的主页</a></p></body></html>HTML文档中标签的用法第二个段落<!DOCTYPEhtml><html><head>

<metacharset="UTF-8">

<title>我的主页</title></head><body>

<h1>我的网络编程示例网页</h1>

<p>我的学号：******</p>

<p>我的姓名：******</p>

<p><ahref="second.html">我的第二个页面</a></p>

<p><ahref="http://**.**.**.**">我同学***的主页</a></p></body></html>HTML文档中标签的用法一个本地链接<!DOCTYPEhtml><html><head>

<metacharset="UTF-8">

<title>我的主页</title></head><body>

<h1>我的网络编程示例网页</h1>

<p>我的学号：******</p>

<p>我的姓名：******</p>

<p><ahref="second.html">我的第二个页面</a></p>

<p><ahref="http://**.**.**.**">我同学***的主页</a></p></body></html>HTML文档中标签的用法一个远程链接<!DOCTYPEhtml><html><head>

<metacharset="UTF-8">

<title>我的主页</title></head><body>

<h1>我的网络编程示例网页</h1>

<p>我的学号：******</p>

<p>我的姓名：******</p>

<p><ahref="second.html">我的第二个页面</a></p>

<p><ahref="http://**.**.**.**">我同学***的主页</a></p></body></html>HTML文档中标签的用法主体结束<!DOCTYPEhtml><html><head>

<metacharset="UTF-8">

<title>我的主页</title></head><body>

<h1>我的网络编程示例网页</h1>

<p>我的学号：******</p>

<p>我的姓名：******</p>

<p><ahref="second.html">我的第二个页面</a></p>

<p><ahref="http://**.**.**.**">我同学***的主页</a></p></body></html>HTML文档中标签的用法HTML文档结束<!DOCTYPEhtml><html>