快捷搜索:  as  test  1111  test aNd 8=8  test++aNd+8=8  as++aNd+8=8  as aNd 8=8

万博手机手机登录app_酒文化网进入



传统 Web 利用法度榜样可以异常好的支持浏览器的书签收藏以及提高退却撤退按钮。而在基于 Ajax 的 Web 利用中,页面的内容刷新每每是经由过程异步哀求的要领动态局部刷新,而不会从新哀求一个页面,因而页面对应的 URL 并不会变更,提高退却撤退按钮也不会起任何感化。这样就导致在这类 Ajax 利用中无法经由过程书签来记录特定的视图。本文将首先先容通用的基于超链接锚点的可书签化的 Ajax 利用的编程模式,然后以该编程模式的阐发与设计为根基并结合实例来阐明若何利用 Dojo 供给的 Dojo.back 技巧来实现万博手机手机登录app可书签化的 Ajax 利用。着末还会先容下 Dojo1.4 中供给的新的 Dojo.hash 技巧对可书签化 Ajax 利用的支持。经由过程涉猎本文读者能够懂得基于超链接锚点的编程模式若何来设计可书签化的 Ajax 利用,并能经由过程 Dojo 供给的 Dojo.back 技巧或者是 Dojo.hash 技巧来实现可书签化的 Ajax 利用。

可书签化的 Ajax 利用的寻衅

Ajax 技巧给 Web 用户带来全新的应用体验同时,也给 Web 开拓职员带来了各类各样的寻衅。对付浏览器书签收藏以及提高退却撤退按钮的支持,就是其一。

对付传统的 Web 利用而言,对付支持浏览器的书签收藏以及署名退却撤退按钮是很自然的工作,开拓职员并不必要做额外的事情。每个 Web 页面都有一个独一的 URL,书签收藏的 URL 便对应响应的页面,而用户在不合页面之间浏览时便形成一个历史记录行列步队,行列步队中每一项对应一个页面 (URL), 浏览器经由过程记录这个历史行列步队来供给提高退却撤退按钮功能。

但在基于 Ajax 的 Web 利用中 , 环境却有所不一样。很多时刻页面视图的转换是经由过程异步哀求动态地局部刷新页面实现的,并没有从新哀求一个新页面,因而页面视图对应的 URL 也不会变更,也不会形成上面环境所说的历史记录。现在的浏览器照样以传统的 Web 利用的要领来支持书签收藏及提高退却撤退按钮。对付新兴的 Ajax Web 利用,浏览器在这方面的支持并不好。这就导致了浏览器的书签收藏,提高退却撤退按钮功能对付 Ajax Web 利用掉去了意义。

图 1. 传统 Web 利用与 Ajax Web 利用的差异

那是不是我们在现有的浏览器中只能放弃书签收藏以及提高退却撤退功能呢?显然这样是很难让人吸收的,让原先是给用户带来应用体验提升的 Ajax 技巧掉去一项很好的用户体验。幸好我们还有法子。接下来将先容一种基于超链接锚点的技巧来实现 Ajax Web 利用的浏览器书签收藏及提高退却撤退按钮支持。为简单起见,我们把支持浏览器书签收藏及提高退却撤退功能的 Ajax 利用称作可书签化的 Ajax 利用。

基于超链接锚点的可书签化的 Ajax 利用编程模式

超链接锚点原先是用作传统 Web 页面中同一页面内部内容的定位的。其体现形式就是 URL 中 # 字符后面的字符串。如 http://hos万博手机手机登录apptname/mypage.html#content1。如下两个 URL 对应的就是同一个页面中的不合内容部分:

URL1 http://hostname/mypage.html#content1

URL2 http://hostname/mypage.html#content2

从 URL1 跳转到 URL2,着实都是哀求的办事器中同一个页面,# 后面的字符串只对浏览器真个解释起感化。使用这个特点,我们可以实现基于超链接锚的可书签化的 Ajax 利用。对付 Ajax 利用中必要书签化的不合视图,经由过程付与不合的锚点来标识,这样即包管了页面不发生跳转,也实现了不合页面视图的 URL 差异,也就在浏览器中形成了一个历史记录 (IE 对付同一页面的不合锚点会觉得是同一页面,而办理这个问题的法子就是应用 iframe 技巧),浏览器的书签收藏与提高退却撤退按钮功能便能起感化了。

设计可书签化的 Ajax 利用时,一样平常要遵照以下模式 :

确定必要书签化的视图

确定视图对应的状态以及 URL

实现一个根据状态参数定位页面视图的措施

下面我们就结合实例来具体阐明可书签化的 Ajax 利用法度榜样的开拓模式。首先,必要确定 Ajax 利用中哪些视图必要支持书签收藏功能。我们以 IBM Lotus Quickr 产品中的场所治理模块的用户界面为例来阐明。下图是场所治理模块的用户界面。

图 2. 场所治理模块用户界面中支持书签收藏功能的视图

从图中可以看出,利用的界面最顶层由几个标签页组成,它们在图例的左上角以红圈标记。标签页分手是 : 场所、模版、策略、统计信息以及搜索。这些标签页都必要支持书签收藏功能。而在每个标签页中,都可能对应有一个数据表格视图,标签页左上角的菜单(红圈标记)对应了展现在右边数据表格中的不合数据源。着末,表格中的页面大年夜小和当前页面序数(图中表格的高低分页栏中红圈标明的区域)也都节制着数据表格视图的显示。我们盼望用户能根据收藏的书签地址能直接造访到特定命据源的数据表格,并正确定位到表格当前页面序数及页面大年夜小。

确定了必要支持书签收藏的视图之后,再来看定位一个视图必要的状态参数,并定义 URL。根据前面的描述,要定位必要的视图,则必要以下状态参数:

标签页,tab

表格数据源,filter

表格页面大年夜小 , pageSize

表格当前页面序数,pageNo

当状态参数相符以下前提时,便可定位图 2 中指定的视图。

标签页为“场所”,数据源菜单为“所有场所”,页面大年夜小为“10”以及当前页面序数为“1”。把该状态经由过程一个 JSON 工具描述,如下:

清单 1 JSON 款式描述的视图状态

{

tab      :”places”,

filter    :”all_places”,

pagesize   :10,

pageno    :1

}

以上状态参数,依据必然规则转换成超链接锚点的形式。如下:

tab=places&filter=all_places&pagesize=10&pageno=1

这样,把以上的字符串作为超链接锚点加到 URL 上便可以指定我们必要的特定视图了。着末,也便是最关键的,必要实现一个 JavaScript 措施来根据前面指定的状态参数来衬着用户界面。照样以上面的场景为例,该 JavaScript 措施如下 :

清单 2 根据状态参数衬着用户界面

locatePageView : function(/*object*/ viewParams){

var tab;

if(viewParams && viewParams.tab){

tab = viewParams.tab;

}

else{

// 假如 viewParms.tab 不存在,给 tab 付与一个默认值

tab = ”places”;

}

// 根据当前 tab 值衬着标签页

RenderingTab(tab);

var filter;

if(viewParams && viewParams. filter){

filter = viewParams.filter;

}

else{

// 假如 viewParms.filter 不存在,给 filter 付与一个默认值

filter = ”all_places”;

}

// 根据当前 filter 值衬着数据源菜单

RenderingFilter(filter);

var pageSize;

var pageNo;

if(viewParams && viewParams.pageSize){

pageSize = viewParams.pageSize;

}

else{

// 假如 viewParms.pageSize 不存在,给 pageSize 付与一个默认值

pageSize = 10;

}

if(viewParams && viewParams.pageNo){

pageNo = viewParams.pageNo;

}

else{

// 假如 viewParms. pageNo 不存在,给 pageNo 付与一个默认值

pageNo = 1;

}

// 根据当前 pageSize 值和 pageNo 值衬着数据表格

RenderingTable(pageSize,pageNo);

}

完成了以上步骤,便完成了实现可书签化 Ajax 利用的大年夜部分事情。接下来,必要做的只是在视图转换时把对应的状态经由过程超链接锚点体现出来,把视图状态的转换记录到浏览器的历史记录行列步队中以及捕获浏览器的提高退却撤退按钮被按下时触发的事故。着实,剩下的这些事情在 Dojo 对象包中的 Dojo.back 或者是 Dojo.hash API 中都已经很好的封装了。只要根据前面的模式来设计 Ajax 利用,并根据 Dojo.b万博手机手机登录appack 或者 Dojo.hash API 的规范来编程,便可异常轻易的实现可书签化的 Ajax 利用。

应用 Dojo.back 技巧

Dojo.back 供给了一套 API,用来记录 Ajax 页面视图的状态,更新浏览器历史记录信息,同时,用户可以使用响应接口定万博手机手机登录app制页面的动态刷新措施,当浏览器的退却撤退、提高按钮被点击时,这些措施将会被履行。下面我们就结合前面的例子来先容若何利用 Dojo.back。

筹备事情 :

在应万博手机手机登录app用 Dojo.back 之前,我们必要将 Dojo.back 相关的文件加载到内存中。并在 HTML DOM 结点附着在页面之前,调用 Dojo.back.init()。我们可以在 body 标签开始处插入一段 JavaScript 脚本,如下所示:

清单 3 Dojo.back 初始代码

留意:dojo.back.init() 必须在 DOM 结点附着在页面之前调用,否则 Dojo.back 的应用将会呈现非常。

定义状态类:

Dojo.back API 中经由过程一个 JSON 工具来描述 Ajax 利用页面视图的状态。该 JSON 工具一样平常包孕以下属性:

back(), backButton(),handle(back)

这几个措施的感化是一样的,当用户点击浏览器的退却撤退按钮时,这些措施会被调用。在实际利用中,用户选择此中一个措施就可以。

forward(), forwardButton() ,handle(forward)

当用户点击浏览器的提高按钮时,这些措施会被调用。与上述的退却撤退措施类似,在实际利用中,用户选择此中一个措施就可以。

changeUrl

这个属性的值会被看作当前页面视图的书签,用来独一标识当前页面视图。

假如这个属性值被设成 true,Dojo.back 会为用户自动天生一个独一值,将该值设置为书签,用来标识当前页面视图;假如这个属性被设定为其他值(不包括 undefined,null,0 和空字符串),那么 Dojo.back 会将这个值作为当前页面视图的书签。

根据以上描述,可以经由过程一个类来定义 Ajax 利用页面视图状态。

清单 4 ApplicationState 类定义

dojo.declare("util.ApplicationState", null, {

changeUrl: "",

constructor: function(/* Object to store the url key/value pairs*/params){

this.params = params;

this.changeUrl = this._constructUrl(this.params);

},

/**

* Handler when press back/forward to current state.

*

* @param {Object} type

*/

handle: function(type){

// 根据当前的 params, 调用清单 2 中的 locatePageView 措施定位页面视图

},

/**

* Construct the hash URL by params

*

* @param {Object} params

*/

_constructUrl: function(params){

return dojo.objectToQuery(params);

}

});

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

您可能还会对下面的文章感兴趣: