物联网工程综合实践第五讲Web20开发技术-1.ppt

物联网工程综合实践第五讲：Web2.0开发技术-1,物联网工程综合实践课程建设小组北京大学二零一一年,内容目录,Javascript技术Ajax技术WebServices技术RIA技术MashupHTML5,Javascript技术,JavaScript介绍,JavaScript是一种脚本语言，常被用于客户端Web开发，给HTML网页添加动态功能，比如响应用户的各种操作。JavaScript是一种动态、弱类型、基于原型的语言，内置支持类别；,JavaScript介绍,JavaScript实现包含三个部分ECMAScript；文档对象模型；浏览器对象模型。,如何把JavaScript放入HTML,把一段JavaScript插入HTML页面，使用标签（同时使用type属性来定义脚本语言）和表明JavaScript从何处开始，到何处结束。document.write字段是标准的JavaScript命令，用来向页面写入输出。把document.write命令输入到与之间后，浏览器就会把它当作一条JavaScript命令来执行。这样浏览器就会向页面写入HelloWorld!。,JavaScript消息框,JavaScript中有三种消息框：警告框;alert(文本)确认框;confirm(文本)提示框prompt(文本,默认值),JavaScript函数,创建函数的语法：function函数名(var1,var2,.,varX)代码var1,var2等指的是传入函数的变量或值;和定义了函数的开始和结束。,JavaScript变量的生存期,本地变量:在函数内声明d的变量，只能在该函数中访问该变量。当退出该函数后，这个变量会被撤销。函数之外声明的变量:函数之外声明的变量，页面上的所有函数都可以访问该变量。生存期从声明它们之后开始，在页面关闭时结束。,内容目录,Javascript技术Ajax技术WebServices技术RIA技术MashupHTML5,Ajax,Ajax是一组技术的集合，包括JavaScript、XML以及浏览器和服务器间的通信通道；内容表示使用XHTML和CSS技术；动态内容显示和内容交互使用DOM；数据交互使用XML和XSLT；异步数据查询使用XMLHttpRequest；使用JavaScript将以上绑定在一起,Ajax核心技术,传统Web应用程序都使用请求/响应模型从服务器上获得完整的HTML页面。常常是点击一个Submit按钮，等待服务器响应，再点击另一个按钮，然后再等待，这样一个反复的过程；Ajax的XMLHttpRequest对象，可以建立和发送请求，并响应服务器；,XMLHttpRequest对象,XMLHttpRequest对象的属性：readyState：HTTP请求的状态；responseText：服务器从客户端接收到的响应内容（不包括头部）；responseXML：对请求的响应，Document对象的形式；status：服务器返回客户端的HTTP状态响应代码；statusText：服务器返回的请求响应属性；onreadystatechange是redyState属性值改变引起的事件句柄函数,XMLHttpRequest对象,XMLHttpRequest对象的方法：open()：建立到服务器的新请求；send()：向服务器发送请求；abort()：退出当前请求；readyState：提供当前HTML的就绪状态；responseText：服务器返回的请求响应文本。,内容目录,Javascript技术Ajax技术WebServices技术RIA技术MashupHTML5,WebServices技术,WebService是一种松散耦合的、面向服务的架构服务接口定义（通常由WSDL来表达）作为服务提供者和客户端所期望的结果之间的契约；服务提供者和客户端能够做到松耦合，需要双方采用：共同的通信格式（也就是消息的样式）共同的协议（也就是消息如何到达）最常见的组合是通过HTTP（协议）的SOAP（格式）,WebServices技术,WebService最基本的组成部分：服务的提供者（ServiceProvider）通过WSDL（WebServiceDefinitionLanguage）发布它所提供的服务；服务的请求者（ServiceRequester）采用基于标准的XML格式的协议与服务提供者进行通信的，这种最常用的协议就是SOAP（SimpleObjectAccessProtocol）。,WebServices技术规范,用于Web服务的安全性协议是从Web服务安全性(WS-Security)规范，为安全通信定义了基于令牌的体系结构。包括六个主要的组成规范：Web服务策略(WS-Policy)，定义关于服务交互方式的策略规则。Web服务信任(WS-Trust)，定义安全交换的信任模型。Web服务隐私(WS-Privacy)，定义了如何维护信息的隐私。Web服务安全会话(WS-SecureConversation)，定义如何使用在Web服务策略、Web服务信任和Web服务隐私中定义的规则，以在用于交换数据的服务之间建立安全会话。Web服务联盟(WS-Federation)，定义了分布式标识的规则以及如何对其进行管理。Web服务授权(WS-Authorization)，定义了如何处理对访问和交换数据的授权。,WebServices技术规范,Web服务的业务流程执行语言（BusinessProcessExecutionLanguageforWebServices，BPEL4WS），它定义了一起进行分布式事务处理的工作流操作、Web服务事务(WS-Transaction)、Web服务协调(WS-Coordination)。Web服务分布式管理(WebServicesDistributedManagement)，用于对所有的服务和面向服务的体系结构进行软件管理。最后，还有一些用于用户界面（Web服务交互应用程序(WS-InteractiveApplications)）和Web服务的远程访问（Web服务远程门户(WS-RemotePortals)）的规范。,内容目录,Javascript技术Ajax技术WebServices技术RIA技术MashupHTML5,RIA技术,RIA是富互联网应用程序的简称；传统Web程序是基于页面的，表示层建立于HTML页面之上，而HTML是适合于文本的，而RIA（RichInternetApplication，富互联网应用系统）技术提供可运行已编译客户端应用程序的运行环境，采用HTTP传递数据，客户端应用程序使用异步C/S架构连接现有后端应用服务器。,RIA技术,目前，构建RIA应用的技术方案包括：1)基于HTML的方案，如Ajax技术；2)基于浏览器插件的方案，如AdobeFlash以及基于FlashPlayer平台运行的技术；3)基于微软WindowsPresentationFoundation、Silverlight技术,内容目录,Javascript技术Ajax技术WebServices技术RIA技术MashupHTML5,Mashup,Mashup在我国一般翻译为混搭，或者汇聚，是一种新型的基于Web的资源集成应用程序；Wikipedia中对Mashup的定义是：Mashup是指整个网络上两个或两个以上外部资料来源或功能，以创造新服务的网页或者应用,Mashup组成,Mashup应用包括三个组成部分：API/内容提供者；API/内容提供者负责提供Mashup集成的信息内容Mashup服务器；Mashup服务器负责把所获得的或者自有的资源和服务封装成标准组件并管理这些组件，响应Mashup应用程序对于资源、服务的开放调用Mashup应用者选择感兴趣的资源，通过客户端呈现出来,Mashup资源获取技术,Mashup资源获取技术包括：1.WebFeed方式；2.公共接口API方式；3.REST协议方式；4.屏幕抓取方式,Mashup表示层组件技术,目前流行的Mashup表示层对象组件技术主要包括两类：Portlet和Widget。1.Portlet技术Portlet是面向WebPortal应用的可插拔用户界面组件。Portal是一种服务器端定义、表示层集成的技术。2.Widget技术Widget技术是完成特定功能的Web应用片段，可以嵌入到网页中和其他Widget一起构成新网页的应用形式。,内容目录,Javascript技术Ajax技术WebServices技术RIA技术MashupHTML5,HTML5,HTML诞生于1991年，已发布的HTML版本号包括2、3.2、4.0和4.01。目前HTML5版本处于草案规范的阶段。,HTML5新特性,HTML5标记中添加了多种新的元素以扩展HTML5的标记的功能，如针对发布目的而创建的元素，以及为非文本元素（多媒体）而创建的元素：用于包含渲染文本或形状的canvas元素用于提供多媒体媒介回放的video和audio元素对本地离线存储的更好的支持新的特殊内容元素，比如article、footer、header、nav、section新的表单控件，比如calendar、date、time、email、url、search,HTML5新特性,WebSocket是HTML5规格中的一个非常重要的新特性，它的存在可以允许服务器与客户端、浏览器之间实现双向连接，这个连接是实时的，可以实现数据的及时推送，并且该连接持续开放直到明确关闭它为止。,内容目录,Javascript技术Ajax技术WebServices技术RIA技术MashupGoogleWebToolKitHTML5GoogleAPI开发技术,HTML5,ML5引入了大量的新的JavascriptAPI。可以利用这些内容与对应的HTML元素相关联，它们包括：二维绘图API，可以用在一个新的画布（Canvas）元素上以便呈现图像、游戏图形或者其他运行中的可视图形。一个允许web应用程序将自身注册为某个协议或MIME类型的API。一个引入新的缓存机制以支持脱机web应用程序的API。一个能够播放视频和音频的API，可以使用新的video和audio元素。一个历史纪录API，它可以公开正在浏览的历史纪录，允许页面在加上它之后更好的在AJAX应用程序中实现对后退按钮的支持。跨文档的消息传递，它提供了一种方式，使得文档可以互相通信而不用考虑它们的源域，在某种程度上，这样的设计是为了防止跨站点的脚本攻击。一个支持拖放操作的API，用它可以与draggable特性相关联。一个支持