复旦大学高级web技术课件1web核心标准与架构

deeperAdvancedwebtechnologyWeb高级开发与应用技术web核心标准与架构WebTechnologyFudancourse,byDaikaiyu什么是Web？Web是分布在全世界的基于HTTP通信协议的服务器(Web服务器)中所有互相连接的超文本集(Web文档)，它采用客户/服务器模式并使用超文本技术链接Internet上的信息和资源。服务器端存放用HTML编写的网页以及其他资源，客户机通过浏览器(IE，Netscapeetc.)可以访问全球范围内各个主机上的这些信息资源。基本特征使用HTML技术来创建客户端界面使用HTTP协议来传输内容基于B/S模式URI标识资源WebTechnologyFudancourse,byDaikaiyuInternet起源于美国的ARPANet(1969年问世),1984年ARPANET分解成两个网络。一个网络仍称为ARPANET，是民用科研网。另一个网络是军用计算机网络MILNET。汤姆.李提出了超文本(HyperText)的概念并创造出超文本标记语言(HyperTextMarkupLanguage，简称HTML),同时开发出传输这种语言的协议HTTP美国加洲的大学生马克.安德森推出浏览器程序MosaicWorldWideWeb(简称，或简称Web)构成了世界上最大的电子信息仓库,有人称其为“万维网”Internet与Web的发展历程Web的主要目的是旨在成为一种共享的信息空间（asharedinformationspace），人们和机器都可以通过它来进行沟通。-Berners-LeeWebTechnologyFudancourse,byDaikaiyuWeb和Internet的区别Internet是众多相互联结的计算机和其他设备的集合Web是建立在Internet上的文档、软件以及一些协议的集合在一个抽象的意义上，Web是一个文档的巨大集合，这些文档之间通过链接相连，可以通过Web浏览器进行访问Internet和Web是两个完全不同的概念。Internet是Web的基础平台，Web是Internet平台上的一种应用层服务VintCerf1973发明InternetBerners-Lee1989发明webWebTechnologyFudancourse,byDaikaiyuWeb是一种分布式超媒体系统-超文本/超媒体/链接Web是图形化的和易于导航的-只需从一个链接跳到另一个链接就可在各页各站点间进行浏览Web与平台无关-从Windows、UNIX、Macintosh等都可以访问WebWeb是分布式的-物理上不一定在一个站点的信息在逻辑上一体化，从用户来看这些信息是一体的Web是动态的-信息的提供者可以经常的对站上的信息进行更新Web是交互的-用户通过填写FORM可以向服务器提交请求，服务器可以根据用户的请求返回相应信息Web的特点WebTechnologyFudancourse,byDaikaiyuWeb带来的革命-提供了全球的链接-为商业竞争创造了全新的竞争领域-用户可以掌握一切，扩大了客源。（客户自助服务）-提供了一种更新、更好的方式来完成已有的服务-基于Web的信息交换改善了商业伙伴之间的合作，优化物流、简化书面工作、减少供应链开销-使用内部互联网(Intranet)来共享信息，优化内部流程，在竞争中争取主动WebTechnologyFudancourse,byDaikaiyuWeb的发展过程◈WebServer◈HTTP协议◈HTML文档◈ApplicationServers◈BusinessLogic◈GenerateHTML◈Transactions◈Distributedprocess◈WAP,WML◈WebServices◈GenerateXML◈SOAP,WSDL,UDDI◈TransactionsinitiatedbyprogramDocumentWebApplicationWebServiceWeb下一个发展方向是什么？WebTechnologyFudancourse,byDaikaiyu什么是Web-basedApplication?基于Web的应用程序-以浏览器(比如IE)作为用户界面的窗口-以可交互的网页形式提供用户界面-网页由HTML语言写成-提供与普通windowsapplication类似的功能-使用browser-server架构-browser与server之间通讯基于http协议谷歌CEO埃里克·施密特（EricSchmidt）:浏览器将成未来应用软件发展的基石-----谷歌I/O2009WebTechnologyFudancourse,byDaikaiyuWeb应用程序如何工作处理静态Web页-静态页是在发送到浏览器时不进行修改的页WebTechnologyFudancourse,byDaikaiyuWeb应用程序如何工作处理动态Web页WebTechnologyFudancourse,byDaikaiyuWeb应用程序如何工作访问数据库WebTechnologyFudancourse,byDaikaiyu浏览器演变-1995至1998年，IEvs.Netscape-2005年到2007,IEvs.Firefox-2012,Chrome份额超过IEWeb即计算机，浏览器即桌面OntheChoiceofBrowserandNumericalIntelligenceWebTechnologyFudancourse,byDaikaiyuHTMLHTML5-2008年W3C制定出第一个HTML5草案，W3cWorkingDraft:广义上是包含了相应的javascript和CSS3的标准集-取代1999年所定订的HTML4.01和XHTML1.0标准，以期减少浏览器对于需要插件的丰富性网络应用服务的需求，并且提供更多能有效增强网络应用的标准集。-强化了Web网页的表现性能，提供了绘制、视频和音频工具,追加了本地数据库等Web应用的功能-促进了web上的和便携式设备的跨浏览器应用的开发。HTML5是驱动移动云计算服务方面的发展的技术之一-浏览器支持程度评测网站：HTML5新增标签：增强语义article：文章aside：内容旁边的侧边栏内容audio：音频canvas：2D绘图command：命令按钮datalist：下拉选择框details：对象的细节dialog：对话框embed：外部插件或对象figure：一组媒体对象以及标签文字footer：页脚header：页首hgroup：文档某一部分的信息keygen：表单生成的Keymark：标注的文字meter：预先定义的范围内的度量nav：导航条output：输出progress：进度条rp：标识rubby内容rt：rubby内容的解释ruby：rubby内容section：定义一个部分source：媒体的资源time：日期时间video：视频WebTechnologyFudancourse,byDaikaiyuHTMLHTML5特征后台异步化、线程化操作的WebWorker，使用postMessage和onmessage等方法，在本地应用和服务器之间建立持续连接的WebSocket接口对使用CSS3来管理GUI的支持，这意味着HTML5可以是面向内容的使用window.localStorage支持客户端的本地存储(大小限制5MB,HTTPCookie大小4KB)使用WebSQLDatabases支持SQL规范的本地数据库画布Canvas(支持JS在之上绘图)和音视频支持（audio\video），可在无需安装第三方插件的情况下添加图形和视频WebTechnologyFudancourse,byDaikaiyuHTMLHTML5特征GeolocationAPI规范，支持共享地理位置；通过使用智能手机定位功能来纳入移动云服务和应用增强型的表单，其降低了下载JavaScript代码的这种必要性，允许在移动设备和云服务之间进行更多高效的通信。作为HTML5中的canvas标签的一个特殊的上下文（experimental-webgl）实现在浏览器中的WebGL通过ApplicationCache接口使离线存储成为可能，离线存储使得你的web应用可以在用户离线的状况下进行访问使用Notificationsapi桌面提醒接口支持Web通知；提供了与本地文件交互的标准方法：FileAPI规范；支持拖曳（Drag&Drop）WebTechnologyFudancourse,byDaikaiyuHTMLHTML5示例Canvas:Websocket:协议Web服务器和客户端浏览器之间通过HTTP协议进行通信HTTP代表HyperTextTransportProtocol（超文本传输协议）HTTP的两个重要功能-传输文件-实现动态交互应用WebTechnologyFudancourse,byDaikaiyuHTTP是一种以TCP/IP通信协议为基础的应用协议HTTP协议采用“客户/服务器”（C/S）机制，也称之为“浏览器/服务器”（B/S）机制无状态协议：与客户端之前请求的信息不做记忆浏览器Web服务器HTTP协议TCP/IPWebServerHTTP物理层网络接口层互联网层传输层应用层物理层网络接口层互联网层传输层应用层HTTPTCPIPWebTechnologyFudancourse,byDaikaiyuHTTP请求HTTP请求由三个部分构成，分别是：-请求方法URI协议/版本-请求头（RequestHeader）-请求正文POST/sample.jspHTTP/1.1Accept:image/gif,image/jpeg,*/*Accept-Language:zh-cnConnection:Keep-AliveHost:localhostUser-Agent:Mozilla/4.0(compatible;MSIE5.01;WindowsNT5.0)Accept-Encoding:gzip,deflateuserName=kaiyu&password=1234WebTechnologyFudancourse,byDaikaiyuHTTP响应和HTTP请求相似，也由三个部分构成：-协议状态代码描述-响应头（ResponseHeader）-响应正文HTTP/1.1200OKServer:ApacheTomcat/5.0.12Date:Mon,6Oct200313:13:33GMTContent-Type:text/htmlLast-Modified:Mon,6Oct200313:23:42GMTContent-Length:112htmlheadtitleHTTP响应示例/title/headbodyHelloHTTP!/body/htmlDemooffirebug,chromeWebTechnologyFudancourse,byDaikaiyuWeb应用演变静态文本信息浏览和发布静态多媒体信息浏览和发布动态、交互式信息浏览和查询基于web技术的应用程序-电子商务-电子政务-基于web技术的工作环境……21世纪要么电子商务，要么无商可务—比尔.盖茨WebTechnologyFudancourse,byDaikaiyu分布式计算的发展Web