物联网工程综合实践Web开发技术

物联网工程综合实践

第五讲：Web2.0开发技术-1《物联网工程综合实践》课程建设小组北京大学

第1页内容目录Javascript技术Ajax技术WebServices技术RIA技术MashupHTML5第2页Javascript技术第3页JavaScript介绍JavaScript是一个脚本语言，常被用于客户端Web开发，给HTML网页添加动态功效，比如响应用户各种操作。JavaScript是一个动态、弱类型、基于原型语言，内置支持类别；第4页JavaScript介绍JavaScript实现包含三个部分ECMAScript；文档对象模型；浏览器对象模型。第5页怎样把JavaScript放入HTML把一段JavaScript插入HTML页面，使用<script>标签（同时使用type属性来定义脚本语言）<scripttype=“text/javascript”>和</script>表明JavaScript从何处开始，到何处结束。document.write

字段是标准JavaScript命令，用来向页面写入输出。把document.write命令输入到<scripttype="text/javascript">与</script>之间后，浏览器就会把它看成一条JavaScript命令来执行。这么浏览器就会向页面写入"HelloWorld!"。第6页JavaScript消息框

JavaScript中有三种消息框：警告框;alert("文本")确认框;confirm("文本")提醒框prompt("文本","默认值")第7页JavaScript函数创建函数语法：function函数名(var1,var2,...,varX) {

代码．．．

}var1,var2等指是传入函数变量或值;{和}定义了函数开始和结束。第8页JavaScript变量生存期当地变量:在函数内申明d变量，只能在该函数中访问该变量。当退出该函数后，这个变量会被撤消。函数之外申明变量:函数之外申明变量，页面上全部函数都能够访问该变量。生存期从申明它们之后开始，在页面关闭时结束。第9页内容目录Javascript技术Ajax技术WebServices技术RIA技术MashupHTML5第10页Ajax

Ajax是一组技术集合，包含JavaScript、XML以及浏览器和服务器间通信通道；内容表示使用XHTML和CSS技术；动态内容显示和内容交互使用DOM；数据交互使用XML和XSLT；异步数据查询使用XMLHttpRequest；使用JavaScript将以上绑定在一起第11页Ajax关键技术传统Web应用程序都使用请求/响应模型从服务器上取得完整HTML页面。经常是点击一个Submit按钮，等候服务器响应，再点击另一个按钮，然后再等候，这么一个重复过程；Ajax

XMLHttpRequest对象，能够建立和发送请求，并响应服务器；

第12页XMLHttpRequest对象XMLHttpRequest对象属性：readyState：HTTP请求状态；responseText：服务器从客户端接收到响应内容（不包含头部）；responseXML：对请求响应，Document对象形式；status：服务器返回客户端HTTP状态响应代码；statusText：服务器返回请求响应属性；onreadystatechange是redyState属性值改变引发事件句柄函数第13页XMLHttpRequest对象XMLHttpRequest对象方法：open()：建立到服务器新请求；send()：向服务器发送请求；abort()：退出当前请求；readyState：提供当前HTML就绪状态；responseText：服务器返回请求响应文本。第14页内容目录Javascript技术Ajax技术WebServices技术RIA技术MashupHTML5第15页WebServices技术WebService是一个涣散耦合、面向服务架构服务接口定义（通常由WSDL来表示）作为服务提供者和客户端所期望结果之间契约；服务提供者和客户端能够做到松耦合，需要双方采取：共同通信格式（也就是消息样式）共同协议（也就是消息怎样抵达）最常见组合是经过HTTP（协议）SOAP（格式）第16页WebServices技术WebService最基本组成部分：服务提供者（ServiceProvider）经过WSDL（WebServiceDefinitionLanguage）公布它所提供服务；服务请求者（ServiceRequester）采取基于标准XML格式协议与服务提供者进行通信，这种最惯用协议就是SOAP（SimpleObjectAccessProtocol）。第17页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)，定义了怎样处理对访问和交换数据授权。第18页WebServices技术规范Web服务业务流程执行语言（BusinessProcessExecutionLanguageforWebServices，BPEL4WS），它定义了一起进行分布式事务处理工作流操作、Web服务事务(WS-Transaction)、Web服务协调(WS-Coordination)。

Web服务分布式管理(WebServicesDistributedManagement)，用于对全部服务和面向服务体系结构进行软件管理。最终，还有一些用于用户界面（Web服务交互应用程序(WS-InteractiveApplications)）和Web服务远程访问（Web服务远程门户(WS-RemotePortals)）规范。第19页内容目录Javascript技术Ajax技术WebServices技术RIA技术MashupHTML5第20页RIA技术RIA是富互联网应用程序简称；传统Web程序是基于页面，表示层建立于HTML页面之上，而HTML是适合于文本，而RIA（RichInternetApplication，富互联网应用系统）技术提供可运行已编译客户端应用程序运行环境，采取HTTP传递数据，客户端应用程序使用异步C/S架构连接现有后端应用服务器。第21页RIA技术当前，构建RIA应用技术方案包含：1)基于HTML方案，如Ajax技术；2)基于浏览器插件方案，如AdobeFlash以及基于FlashPlayer平台运行技术；3)基于微软WindowsPresentationFoundation、Silverlight技术第22页内容目录Javascript技术Ajax技术WebServices技术RIA技术MashupHTML5第23页MashupMashup在我国普通翻译为混搭，或者汇聚，是一个新型基于Web资源集成应用程序；Wikipedia中对Mashup定义是：Mashup是指整个网络上两个或两个以上外部资料起源或功效，以创造新服务网页或者应用第24页Mashup组成Mashup应用包含三个组成部分：API/内容提供者；API/内容提供者负责提供Mashup集成信息内容Mashup服务器；Mashup服务器负责把所取得或者自有资源和服务封装成标准组件并管理这些组件，响应Mashup应用程序对于资源、服务开放调用Mashup应用者选择感兴趣资源，经过客户端展现出来第25页Mashup资源获取技术Mashup资源获取技术包含：1.WebFeed方式；2.公共接口API方式；3.REST协议方式；4.屏幕抓取方式第26页Mashup表示层组件技术

当前流行Mashup表示层对象组件技术主要包含两类：Portlet和Widget。1.Portlet技术Portlet是面向WebPortal应用可插拔用户界面组件。Portal是一个服务器端定义、表示层集成技术。2.Widget技术Widget技术是完成特定功效Web应用片段，能够嵌入到网页中和其它Widget一起组成新网页应用形式。第27页内容目录Javascript技术Ajax技术WebServices技术RIA技术MashupHTML5第28页HTML5HTML诞生于1991年，已公布HTML版本号包含2、3.2、4.0和4.01。当前HTML5版本处于草案规范阶段。第29页HTML5新特征HTML5标识中添加了各种新元素以扩展HTML5标识功效，，如针对公布目标而创建元素，以及为非文本元素（多媒体）而创建元素：用于包含渲染文本或形状canvas元素用于提供多媒体媒介回放video和audio元素对当地离线存放更加好支持新特殊内容元素，比如article、footer、header、nav、section新表单控件，比如calendar、date、time、email、url、search第30页HTML5新特征WebSocket是HTML5规格中一个非常主要新特征，它存在能够允许服务器与客户端、浏览器之间实现双向连接，这个连接是实时，能够实现数据及时推送，而且该连接连续开放直到明确关闭它为止。第31页内容目录Javascript技术Ajax技术WebServices技术RIA技术MashupGoogleWebToolKitHTML5GoogleAPI开发技术第32页HTML5ML5引入了大量新JavascriptAPI。能够利用这些内容与对应HTML元素相关联，它们包含：二维绘图API，能够用在一个新画布（Canvas）元素上方便展现图像、游戏图形或者其它运行中可视图形。一个允许web应用程序将本身注册为某个协议或MIME类型API。一个引入新缓存机制以支持脱机web应用程序API。一个能够播放视频和音频API，能够使用新video和audio元素。一个历史纪录API，它能够公开正在浏览历史纪录，允许页面在加上它之后更加好在AJAX应用程序中实现对后退按钮支持。跨文档消息传递，它提供了一个方式，使得文档能够相互通信而不用考虑它们源域，在某种程度上，这么设计是为了预防跨站点脚本攻击。一个支持拖放操作API，用它能够与