DOJO学习笔记(30)--使用 Dojo 工具包和 JSON-RPC 构建企业 SOA Ajax 客户端(1)
- 格式:pdf
- 大小:113.70 KB
- 文档页数:3
Dojo中文使用手册本手册针对0.9、1.0及1.x版本。
目录快速安装Hello World-第一个程序程序调试第一部分:使用Dojo-Dojo和Dijit例子第一个例子:为什么一些人不填写传真表单?第二个例子:总是点击两次第三个例子:和技术人员交谈第二部分Dijit-Dojo的小部件库概述共用特征表单、验证和个性化的文本输入框表单小部件复选框、单选框、切换(?)组合框(ComboBox)下拉过滤选择框(FilteringSelect)数字选择框(NumberSpinner)滑尺(Slider)文本输入域(Textarea)文本框类(验证、货币、数字、日期、时间)布局(只讲一个tabContainer)命令控制按钮、组合按钮和下拉按钮菜单工具菜单用户使用帮助提示和反馈进度条提示对话框和工具对话框页框(TitlePane)高级功能(只讲一个Tree)树(Tree)第三部分:使用Dojo和Dijit与javascript协作通用性初始对象模块建立和设计小部件自已设计小部件类事件系统异步交互XMLHttpRequest(XHR)拖拽使用Dojo.Data接口使用dojo.query选择DOM节点回退按钮其它功能多个版本共处于一个页面第四部分:调试第五部分:Dojox扩展包cometd(客户端)dojox图表dojox集合dojox加密dojox数据dojox网格(翻译)dojox离线(翻译)快速安装Dojo 提供了三种安装方式:1.使用美国在线(AOL)的内容分发网络(CDN)上的dojo.2.在本地使用dojo的一个稳定版本.3.从dojo网站的SVN服务器上获取的最新代码.使用内容分发网络(CDN)上的Dojo这种方法非常的快捷!你能够通过添加一个<script> 到美国在线(AOL)的内容分发网络(CDN)上,而无需占用你服务器上的任何空间和资源.所有在这本手册里出现的Dijit范例均通过此方法获取Dojo的js文件.你可以直接拷贝粘贴第1,2部分的任何例子到你自己的服务器上就可以正常的运行了!在第3部分的例子中,因为很多是一些代码片段,所以我们将提醒您如何做一些更改以便使这些例子正常运行. 您可以使用: <script type="text/javascript"src="/dojo/1.0.0/dojo/dojo.xd.js"></script> 来引用Dojo的js 文件请参考: Dojo And AOL获取最新的引用链接.使用本地的Dojo如果您是Dojo的传统用户,你可以以以往的方式下载,安装,并且使用Dojo.1.从/downloads下载最新的Dojo2.解压缩文件到本地服务器上. 假设您将文件安装到/js目录下,其目录结构应该如下(注:dojo1.2.3版本与本目录不相同,只有dojo、dijit、dojox三个子目录)。
JSON-RPC协议分析、扩展及其应用李德贤,李嵩山,李志勇云南大学信息学院计算机系,昆明 (650091)E-mail:xuerldx@,ssli@,zyli@摘要:随着web和中间件技术的飞速发展,二者的结合也日趋紧密,从某种程度上说,web就是中间件。
Internet已成为web应用的默认平台,而中间件已成为Web应用中必不可少的组件,但是建立复杂性不断增加的应用程序的需求一直以来都超出传统网络应用所能表现复杂性方面的能力。
因而实现一种既有C/S架构的强大的客户端处理功能,又有B/S架构的易部署性和强大的服务端处理能力的平台就很有必要了。
本文从中间件的概念入手,介绍了特定的使用新型数据交换格式JSON的远程过程调用中间件JSON-RPC,着重分析了其原理、实现以及在构件化开发过程中的作用。
其次,还对其实现过程中的同步和异步通信作了一定的阐述。
最后,根据具体的应用对其实现作了一定的改进,使其更加健壮。
关键词:中间件,JSON,JSON-RPC,同步、异步调用,构件中图分类号:TP391随着web和中间件技术的飞速发展,二者的结合也日趋紧密。
Internet已成为web应用的默认开发平台,而中间件已成为Web应用必不可少的组件。
1.中间件技术简介中间件技术是伴随网络而发展起来的一种面向对象的技术。
网络出现后,产生了Client/Server的计算服务模式,多个客户端可以共享数据库服务器等等。
随着网络的更进一步发展,许多软件需要在不同厂家的网络产品、硬件平台、网络协议异构环境下运行,应用的规模也从局域网发展到广域网。
在这种情况下,Client/Server模式的局限性也就暴露出来了,于是现代意义上的中间件也就应运而生。
1.1 中间件技术相关概念对于不同的应用环境,对于中间件是由哪些组件组成的理解也不一样,因而就没有一个通用的中间件的定义。
中间件是一个转换器,把一端的资源转换为另一端所能接受的形式供给对方处理。
DOJO基础文章分类:Web前端Dojo是一个用javascript语言实现的开源DHTML工具包(/,我这里下载的为dojo-release-1.5.0)。
Dojo 提供了一套完整的开发解决方案,包括核心的 JavaScript 库、简单易用的小部件(Widget)等。
Dojo框架由四个部分组成:Dojo基本库、Dojo核心库、Dijit(小部件框架和内建的小部件集)和扩展库Dojox。
基本库包含最基本的功能,核心库是基本库的扩展,Dijit是用户界面库,而扩展库则是各式各样的扩展组件。
Dojo 的最初目标是解决开发 DHTML 应用程序遇到的一些长期存在的历史问题,现在,Dojo 已经成为了开发 RIA 应用程序的利器。
Dojo 是一个分层的体系架构,最上面的一层是 Dojo 的 Widget 系统,Widget 指的是用户界面中的一个元素,比如按钮、进度条和树等,最下面的一层是包系统。
Dojo API 的结构与 Java 很类似,它把所有的 API 分成不同的包(package),当您要使用某个 API 时,只需导入这个 API 所在的包。
1.Dojo基础dojo/目录下包含dojo.js,必须在使用工具包的任何内容之前调用这个脚本元素。
dojo.js是模块dojo的模块主脚本。
当dojo.js被运行后,全局dojo(一个对象)被创建出来,具有如下功能。
环境属性:指明运行时环境的一组变量(比如浏览器的版本及其能力)。
语言扩展:填补JavaScript中漏掉的少数元素异步编程:用来进行事件编程和异步回调功能DOM编程:使编写DOM更加容易XHR编程:通过XHR对象访问服务器面向对象编程:用以创建强大而灵活的类层次结构所需要的功能Dojo加载器:用以载入JavaScript和Dojo模块的功能dojo/根目录下面包含的几个dojo中不会自动载入的模块,因此必须显式的通过dojo.require函数载入它们。
Dojo 学习笔记(1. 模块与包)Intro:Dojo 是一个非常强大的面向对象的JavaScript 的工具箱, 建议读者能够去补充一下JavaScript 下如何使用O O进行编程的, 这对于你以后阅读Dojo Source 有很大的用处.请大家下载dojo 0.3.1, 以下的说明均针对此版本翻译自/WikiHome/DojoDotBook/BookUsingDojoGetting Started1: 把Dojo 加入到我们的Web程序中1. 标志<script type="text/javascript">djConfig = { isDebug: false };</script>djConfig 是Dojo 里的一个全局对象, 其作用就是为Dojo 提供各种选项, isDebug 是最常用的属性之一,设置为True 以便能够在页面上直接看到调试输出, 当然其中还有些属性与调试有关, 这里就不罗索了2. 引用dojo 的启动代码<script type="text/javascript" src="/yourpath/dojo.js" />这样你就引用了dojo 的代码, 并可以直接使用其中部分常用的对象, 下载下来的dojo.js 是压缩(remove comments and space) 后的代码, 要阅读的话, 建议阅读dojo.js.uncompressed.js, dojo.js大概有127K, 而未压缩前有211K, ok, 为什么会这么大呢, 原来其已经把部分常用的模块整合进dojo.js 里 ,因此显得大了一点, build.txt 里就说明了默认的dojo.js 包含了哪些模块3. 声明你所要用到的包<script type="text/javascript">dojo.require("dojo.math");dojo.require("dojo.io.*");dojo.require("dojo.widget.*");</script>你就把这些代码当成是java 的import 语句或 C #中的using 语句一样, 如果你不require 的话, 而模块本身又没有整合在dojo.js 中, 是会出现脚本错误的喔2. 针对不同需求提供的预整合包Dojo 本身是由许多模块所组合而成的, 但是由于用户需求的多样性, dojo 针对不同的需求而提供了不同的版本, 用户在下载dojo 的时候就看见可以选择很多的版本, 比如Ajax 版和Widget 版, 每个版本最重要的区别就在于dojo.js 文件, 但是除此之外, 每一个版本都是全功能的, dojo.js 根据版本的不同而整合进了不同的模块3. 直接获取Dojo 的最新源代码首先你必须安装Subversion, 当Subversion 在你的电脑上能够正常工作后, 你就可以通过如下命令下载dojo 的源代码:svn co /dojo/trunk/这会在你的当前目录下创建一个trunk 的目录; 如果你希望直接Get 到当前目录, 用这个命令:svn co /dojo/trunk/ .或者你希望Get 到当前目录下的MyDir 目录, 用这个命令:svn co /dojo/trunk/ MyDir模块与包模块Dojo 的代码被划分为逻辑单元称之为模块, 这有点类似于Java 中的package, 除了dojo 的模块能够包含类( 类似于java 中的classes) 和简单函数比如: 模块"dojo.html" 包含了一系列的函数, 比如dojo.html.getContentBox(), 模块"dojo.dnd" 包含了一系列的HtmlDragObject 的类注意名称约定, 函数的首字母为小写字母, 类的首字母为大写模块也可以称之为"命名空间"包在多数情况下, dojo 的模块只需要定义在一个文件就可以了, 但有时, 一个模块可能划分到多个文件,比如: 模块dojo.html, 本来是定义在一个文件中, 可是由于功能的增强, 文件逐渐变大, 我们不得不将其拆分为多个文件, 这主要是为性能考虑, 以便浏览器可以只下载其需要用到的代码, 不幸的是其实现细节对于dojo 的用户看起来不那么透明, 你必须知道你想要用到的功能到底是包含在哪个文件,然后才能require 并使用它这样的每一个文件都称之为一个包dojo.require("dojo.html.extras")将引用文件src/html/extras.js, 这将定义模块dojo.html 的若干( 并非所有) 函数据我所知, 尽管单个文件可以定义包里的多个类, 单个脚本文件不能定义多个模块( 在Java 可以等效于在一个文件中定义 2 个类), 并且, 包的名称和模块的名称可以不同, 比如: 包dojo.widget.Button 定义了dojo.widget.html.Button基本上你应该这样认为, 包和模块尽管密切相关, 但是是两个完全不同的实体为什么会有模块和包这样的概念?为什么会有模块和包这样的概念? 为了满足你的应用程序只需要加载其所用到的东西的需求, 充分利用模块化设计的优点, dojo 维护了最小的足印以便仍能提供你所需要的功能, 为什么要你的用户浪费时间去下载用不到的JavaScript, 当一个包就是一个js 文件时, 一个模块本质上就是一个命名空间, 比如:dojo.style 或dojo.html.extras多数简单情况下, 一个包包含了一个模块, 但更常见的是, 一个模块可能被拆分为几个包文件利用包和模块, 将能确保你能够交付最相关的功能代码, 最小程度的减少代码的膨胀和消除由此带来的不好的用户体验, 这就是模块设计的主要目标, 通过模块化, 你能够引入自定义模块( 你自己拥有的JavaScript 工具), 并且维护模块对于核心代码库基本不会产生什么影响另外, Dojo 的模块系统也提供了内建的机制来使用代码提供命名空间, 比如, 通过模块dojo.event 定义的Dojo 的事件系统怎样引用设置引用语句你怎样才能知道该引用哪个包到dojo.require()?1. 模块首先, 确定你要使用什么模块, 这个例子我们假定你要使用dojo.lfx.html2. 包搜索代码后你发现dojo.lfx.html 定义在 2 个文件:src/lfx/html.jssrc/lfx/extras.js根据你要用到的功能, 你可以dojo.require("dojo.lfx.html");或dojo.require("dojo.lfx.html");dojo.require("dojo.lfx.extras");通配符新用户可能会对dojo.lfx.* 这样就可以替代上面 2 句而感到诧异, 实际上,__package__.js 中已经定义了通配符可以代替的语句, 并且这样可以让dojo 根据当时的环境而决定加载具体的模块/////////////////////////////////////////////////////////////////////////////////////////Dojo 学习笔记(2. djConfig 解说)djConfig 是dojo 内置的一个全局设置对象,其作用是可以通过其控制dojo 的行为首先我们需要在引用dojo.js 前声明djConfig 对象,以便在加载dojo.js 的时候才能够取得所设置的值,虽然在0.3 版本以后dojo 支持在加载后设置,但是强烈建议你把声明djConfig 的代码作为第一段script一个完整的djConfig 对象定义如下(值均为dojo 的默认值)<script type="text/javascript">var djConfig = {isDebug: false,debugContainerId: "",bindEncoding: "",allowQueryConfig: false,baseScriptUri: "",parseWidgets: truesearchIds: [],baseRelativePath: "",libraryScriptUri: "",iePreventClobber: false,ieClobberMinimal: true,preventBackButtonFix: true,};</script>isDebug 是一个很有用的属性,顾名思义,如果设置为真,则所有dojo.Debug 的输出有效,开发时应该设置为true ,发布时应该设置为falsedebugContainerId 同样也是与调试有关的,如果不指定的话,调试信息将会直接利用document.write 输出,这样可能会破坏页面的整体布局,所以你可以指定任何一个可以作为容器的html 元素的id 作为调试信息输出容器allowQueryConfig ,这个属性指明dojo 是否允许从页面url 的参数中读取djConfig 中的相关属性,当值为true 时,dojo 会优先从url 参数中读取djConfig 的其他属性,比如: http://server/dojoDemo.htm?djConfig.debugContainerId=divDebugbaseScriptUri ,一般不需要设置,dojo 会自动根据你引用dojo.js 的路径设置这个值,比如,<script type="text/javascript" src="../dojo/dojo.js"></script> ,自动获取的值便是../dojo/ps: 如果你有多个工程需要同时引用dojo.js 的话,建议也把dojo 当作一个独立的工程,引用的时候采用绝对路径就可以了parseWidgets ,这个是可以控制dojo 是否自动解析具有dojoType 的html 元素为对应的widget ,如果你没有使用任何Widget ,建议设置为false 以加快dojo 的加载速度searchIds ,这是一个字符串数组,定义了所有需要解析为widget 的html 元素的ID,如果ID 不在其中的html元素是不会被解析的,当数组为空数组时,则所有具有dojoType 的元素都会被解析还有一个bindEncoding ,是用来设置默认的bind 请求的编码方式至于其它的属性,不是用处不大,就是不知道有什么作用在实际开发中,可以把djConfig 的定义放在一个js 文件里,并将其作为第一个引用的js 文件,这样应该是最方便的。
Dojo框架简单应用Dojo框架是一个具有许多功能的丰富库,包括:处理html、字符串、样式、D OM、正则表达式和若干其他实用工具的通用库;包括字典、ArraryLists、队列、S ortedList、设置和堆栈的数据结构;用于添加动画效果、验证、拖放和若干其他功能的可视化Web实用工具;数学和加密库、存储组件和XML解析等类库。
其中对于创建美观的HTML页面,Dojo框架为开发Web胖客户端程序提供了一套完整的Widget和一些特效操作。
Dojo提供了可以用于构建页面的一组丰富的标记。
Dojo的众多优点之一是允许使用标准的HTML标记。
Dojo框架UI组件的特点是通过给html标签增加tag的方式进行扩展,而不是通过写JS来生成。
这样,H TML开发人员就可以方便地使用Dojo。
Dojo 0.9框架具有标记有下面几个:1.文本框的扩展首先看下对文本框这个表单元素的扩展。
在Dojo框架中,文本框的使用方式在上述代码中,使用Dojo框架标记扩展了文本框的功能。
其中,把trim设为“true”使得dijit.form.Textbox在数据前后去除空格,当文本框失去焦点,dojo自动的修改内容,并放回文本框中。
去除空格对数据库操作常常非常有用,因为首尾的空格经常导致查询失效。
ucfirst和lowercase属性非常的相近。
分别是让输入的字母大写和输入小写,当文本框失去焦点,ucfirst只改变小写的字母,所有大小的字母都保持不变。
同样lowercase只改变大小字母。
2.内嵌编辑框当不在编辑状态的时候,这个部件表现的像一个<div> 标签,当被包含的文字被单击的时候,部件就进入了编辑状态。
在这个状态下,之前显示的文字被隐藏,另外一个编辑部件在同一位置显示出来。
该部件所具有的其他属性标记,如表9-3所示:表9-3 内嵌编辑框属性该编辑框的使用示例如下所示:me)在单击后可以被修改。
可编辑部件可以是实现了接口(setTextValue(String value);String value = getTe xtValue();void focus();)的任何部件。
dojo(六):声明式语法和dojoparser1、简介使⽤Dojo有两种主要的⽅式,分别是编程式和声明式。
编程式使⽤实例化对象,并且所有的代码都编码在JavaScript中;声明式使⽤dojo/parser读取DOM,并解析出被特殊属性(后⾯我们会知道这个属性是data-dojo-type)装饰的节点和扩展控件⾏为的特定的<scrpt>标签。
这两种⽅式都有⾃⼰的优缺点,你可能同时使⽤这两种⽅式。
本⽂主要讲解声明式语法,使⽤声明式语法,你需要考虑到下⾯⼏点:声明式语法⾮常简单,并且不需要更深的JavaScript只是。
JavaScript可以实现的,声明式语法⼏乎都能实现,但是声明式语法有它的限制。
由于声明式语法的本质(类似html标签),他的性能不如编程式好。
因为需要使⽤dojo/parser解析DOM,并查找需要处理的节点。
2、实例化对象声明式语法最常⽤的⽅式是实例化组件。
实现⽅式是:添加特殊的属性(data-dojo-type)到html标签中,并使⽤dojo/parser读取⽂档和实例化组件。
看个例⼦:[html]1. <button type="button" id="myButton" data-dojo-type="dijit/form/Button">2. <span>Click Me!</span>3. </button>上⾯的例⼦中我们使⽤data-dojo-type指定了⼀个MID(模块ID,这⾥是Dojo Button),它会指⽰dojo/parser在该节点在DOM中的位置处实例化⼀个dijit/form/Button对象。
可以注意到我们添加了⼀个id属性,它在我们需要获取这个组件的引⽤时有⽤。
Dijit的基本组件在实例化时,会查找存放他们的节点,如果有id属性,就会使⽤该id值在dijit/registry中注册,以便将来可以通过该id来引⽤组件。
什么是dojo<script type="text/javascript">djConfig = { isDebug:</script><script type="text/javascript" src="/yourpath/dojo.js" /><script type="text/javascript">dojo.require("dojo.math");dojo.require("dojo.io.*");dojo.require("dojo.widget.*");</script>svn co /dojo/trunk/svn co /dojo/trunk/ .svn co /dojo/trunk/ MyDirdojo.require("dojo.html.extras")dojo.require("dojo.lfx.html");dojo.require("dojo.lfx.html"); dojo.require("dojo.lfx.extras");<script type="text/javascript"> varisDebug:debugContainerId: "",allowQueryConfig:baseScriptUri: "",parseWidgets:searchIds: [],baseRelativePath: "", libraryScriptUri: "",iePreventClobber:ieClobberMinimal:preventBackButtonFix: };</script>dojo.event.kwConnect({srcObj: dojo.byId("inputTest"),srcFunc: "onclick",adviceObj: obj,adviceFunc: "doOnclick2",type: "before", //默认为"after",可选: "before", "around",注意:type是用来决定adviceFu nc的行为的,如果为"around",则aroundFunc将失效aroundObj: null,aroundFunc: null, //如果指定了aroundFunc,则其将对adviceFunc进行拦截,但是当type为"around"时,则aroundFunc将不会执行once: false, //默认为false,允许重复绑定delay: 3000, //延时3秒后执行adviceFuncrate: 0, //这个从源代码没有看懂起什么作用adviceMsg: false //这个从源代码没有看懂起什么作用});dojo.event.kwDisconnect用来解除使用kwConnect指定的绑定模块:dojo.event.topicTopic机制与Advice机制都能够实现事件的绑定,但是显然,Topic更适合处理多重绑定。
实战Dojo工具包一个品质远远超出“原型建造”的Ajax库原文链接:/articles/dojo-in-practice/DojoToolkitInPractice.pdf 源代码下载:/articles/dojo-in-practice/dojo-itinerary.tgz译文链接:/upload/DojoInPractice.rar作者:Dion Almaer()译者:李锟()版本号:1.0版权声明:本文是有版权的著作,原文的版权属于原作者所有,译文的版权属于译者所有。
译者在得到了原作者的许可后翻译了这篇文章。
译文允许在不做任何改动(包括原文/译文链接、作者/译者信息、版权声明、文章的全部内容)的情况下自由转载。
内容目录1 简介 (3)2 Dojo工具包:JavaScript开发的水槽(Kitchen Sink) (3)3 设置和配置Dojo (4)3.1 选择正确的Dojo创建 (4)3.2 动态加载package (5)3.3 定制的创建 (5)4 应用:旅行路线编辑器 (6)5 DOM和HTML效果 (6)5.1 处理DOM (7)5.2 Dojo的HTML效果 (8)6 使用dojo.io.bind()的Ajax远程调用 (8)6.1.1 淡出和移除 (9)6.1.2 使用XMLHttpRequest来告诉服务器发生了什么 (9)7 拖放操作 (10)7.1.1 连接所有的天 (11)7.1.2 连接单个的天 (11)7.1.3 onLoad (11)8 结论 (12)9 作者简历 (12)1 简介当你开始建造一个Ajax应用时,你很快就会遇到一些情形,让你感觉自己好像是在重新发明轮子。
大量的开发者一想到Ajax,就会直接扑向XMLHttpRequest对象,但这仅仅只是一个开始,而且是Ajax开发中很容易的部分。
当你在建造JavaScript富客户端应用时,你会遇到大量令人烦恼的事情。
使用 Dojo 工具包和 JSON-RPC 构建企业 SOA Ajax 客户端(一)
了解如何使用 Dojo 工具包为 Java™ Platform Extended Edition (Java EE) 应用程序构建企业 SOA 客户端,以及如何使用 JavaScript Object Notation–RPC (JSON-RPC) 来调用服务器端 Java 对象。
引言
异步 JavaScript 和 XML (Ajax) 是使用本机浏览器技术构建富 Web 应用程序的新方法。
对于编写需要某些类型的“活动”用户界面的复杂应用程序的开发人员,JavaScript 在这方面已经做得很好。
不过,JavaScript 难于编码、调试、移植和维护。
使用 Ajax 工具包有助于最大程度地减少使用 JavaScript 和Ajax 带来的许多常见问题。
优秀的 Ajax 工具包提供了一组可重用的小部件、用于扩展和创建小部件的框架、事件系统、JavaScript 实用工具和增强的异步服务器调用支持。
在本文中,我们将讨论如何使用 Dojo 工具包为 Java EE 应用程序构建企业 SOA 客户端。
我们还将使用 JSON (JavaScript Object Notation)–RPC 来调用服务器端 Java 对象。
在本文中,我们还将向您提供以下内容的简要说明:Ajax、Dojo、JSON 和JSON-RPC,以及一些设计 Ajax 应用程序的设计原则和您可以下载并亲自尝试运行的简短示例。
回页首 Ajax 概述有许多关于 Ajax 的论文、文章和书籍。
我不打算对 Ajax 进行深入介绍。
有关详细信息,请查阅参考资料。
Ajax 可作为使用本机浏览器组件构建网站的体系结构样式。
Ajax 的关键部分有:
•JavaScript,它可以编排页面元素,从而获得最佳 Ajax 用户体验。
•Cascading Style Sheets (CSS),它可以定义页面元素的可视样式。
•文档对象模型(Document Object Model,DOM),它将网页结构作为一组可以使用 JavaScript 操作的可编程对象提供。
•XMLHttpRequest,它支持以后台活动的形式从 Web 资源检索数据。
XMLHttpRequest 对象是关键部分。
XMLHttpRequest 对象
XMLHttpRequest 对象是 Ajax 用于进行异步请求的机制。
图 1 说明了该流程:图 1. XMLHttpRequest 对象进行异步请求的流程图
XMLHttpRequest 对象是浏览器中提供的 JavaScript 对象。
(Microsoft™ 和Mozilla 浏览器各有自已的版本)。
该流程如下所示:
1.页面调用某个 JavaScript。
2.JavaScript 函数创建 XMLHttpRequest 对象。
这包括设置要调用的 URL 和 HTTP 请求参数。
3.JavaScript 函数注册回调处理程序。
HTTP 响应调用此回调处理程序。
4.JavaScript 函数调用 XMLHttpRequest 对象上的 send 方法,该方法接着将 HTTP 请求发送到服务器。
5.XMLHttpRequest 对象立即将控制返回到 JavaScript 方法。
此时,用户可以继续使用该页面。
6.稍后,HTTP 服务器通过调用回调处理程序返回 HTTP 响应。
7.回调处理程序可以访问 HTML DOM 对象。
它可以动态更新页面元素,而无需中断用户(除非您碰巧更新用户正在使用的 DOM 对象)。
通过异步更新页面的 DOM,还可以在本地进行异步请求。
回页首 Dojo 工具包概述 Dojo 使您能够方便地构建动态站点。
它提供一个丰富的小部件库,您可以使用它组成页面。
您可以使用基于 Dojo 方面的事件系统将事件附加到组件,以创建丰富的交互体验。
此外,您可以使用几个 Dojo 库进行异步服务器请求、添加动画效果和浏览存储实用工具等等。
Dojo 小部件
Dojo 提供了您可以用于构建页面的一组丰富的小部件。
您可以使用多个方法创建 Dojo 小部件。
Dojo 的众多优点之一是它允许您使用标准的 HTML 标记。
然后,可以将这些标记用于小部件。
这样,HTML 开发人员就可以方便地使用 Dojo,如清单 1 所示:
清单 1. 在 HTML 标记中使用 Dojo
<div dojoType="FloatingPane" class="stockPane" title="Stock Form"
id="pane" constrainToContainer="true" displayMaximizeAction="true">
<h2>Stock Service</h2> Enter symbol: <input
dojoType="ValidationTextBox" required="true" id="stockInput"> <p />
<button dojoType="Button2" widgetId="stockButton"> Get Stock Data
</button> <div id="resultArea" /> </div>
您可以使用 div 标记来定义小部件的位置,而在页面加载或对事件进行响应时Dojo 可以在这些地方放置小部件。
您还可以使用更具体的标记,如
<dojo:widget>,并向其中添加 Dojo 小部件属性。
在清单 1 中,我们将dojoType 属性添加到 button 标记。
在设置了标记之后,您需要在一些JavaScript 内部加载小部件,如清单 2 所示。
您可以将标记嵌入到页面内部,但是我们建议将其放置在单独的 JS 文件中。
在本文的稍后部分中,我们将阐明一些 MVC 设计原则。
清单 2. 在 HTML 标记中使用 Dojo
//require statements dojo.require("dojo.widget.*" );
dojo.require("dojo.event.*"); dojo.require("dojo.widget.Button2"); dojo.require("dojo.widget.FloatingPane" ); //all dojo.require above this line dojo.hostenv.writeIncludes(); dojo.require();
您可以在 JavaScript 中创建、访问、修改和删除小部件,从而实现动态行为。
在我们的示例中,您将看到在 JavaScript 中访问小部件的示例。
Dojo 事件系统
Dojo 事件系统使用面向方面的技术将事件附加到小部件。
这可以将小部件与实际的事件处理分离。
Dojo 不是将硬代码 JavaScript 事件添加到 html 标记上,而是提供允许您将事件附加到小部件的 API,如清单 3 所示。
清单 3. 使用 Dojo 将事件处理程序附加到小部件
function submitStock() { ... } function init() { var stockButton = dojo.widget.byId('stockButton'); dojo.event.connect(stockButton,
'onClick', 'submitStock'); } dojo.addOnLoad(init);
通过使用 connect 方法,您可将 JavaScript 方法连接到小部件。
您还可以在div 节点上附加 dojoAttachEvent,如下所示。
某些 HTML 标记没有定义事件,所以这是一个方便的扩展。
清单 4. 使用 Dojo 将事件附加到 HTML 标记
<div dojoAttachPoint="divNode" dojoAttachEvent="onClick; onMouseOver: onFoo;">
Dojo 事件系统还允许多个高级功能,如:
•声明在现有的事件处理程序之前或之后插入事件处理程序的建议。
•允许小。