`
foxty
  • 浏览: 137039 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

[原创]Ajax和LazyLoad的冲突

阅读更多
  如果你的项目中同时使用了ajax和orm工具,那你就应该注意这篇文章,或许你也碰到过这个问题。

  乍一看标题,或许很多人都很迷糊,ajax和orm的lazyload有什么关系,那里来的冲突?是啊,乍一看,一个是前端,一个是后端,基本没有关系的,怎么就有了冲突。如果你使用了remote call调用服务器端方法,并且得到返回的po的时候,就很有可能出现这种问题。

  先看看lazyload的含义,lazyload是为了防止n+1问题同时节省资源的一种做法,比如,我有一张用户表(user),一张订单表(order),一张货物表(item), user和order是1:N的关系,order和item假设1:1的关系。当我们使用orm工具的时候,一般可能会这么定义, user对象中存在一个由order对象组成的Set或List,而order和item之间还各存在一个Item和Orer对象。正常情况下,取得一个user对象的时候,如果不需要相关的order信息,只要不去显示访问order列表的get方法,orm工具是不会去加载和当前user对象关联的order列表的。当我们要这些order信息的时候,仅仅访问其get(Java) 方法或者其属性(.Net),orm工具会自动的帮我们加载这些对象。

  但是不幸的是,如果你通过ajax的remotecall来得到一个User对象,那么你的lazyload就会失控了。我们知道现在的 ajax框架都是支持remotecall的(据我所知),它的一个好处就是客户端js可以直接访问服务器端方法,并且ajax框架能够以一种协议将服务器端返回的po对象转换成js对象。那么在回到刚才所提到的User对象,当通过remotecall得到一个User对象的时候,ajax框架会遍历User对象的get方法或者属性同时生成一个纯js的object,,在遍历的过程中,它会把加载该user的ordet列表,order关联Item,Item也被加载了。Lazyload就会在你意向不到的情况下失效了。

  如果你对象中存在树的结构,那么这里就会无限制的一直加载下去,直到把整棵树全部加载完毕,而且可能你还根本不知道会有这个问题。正是今天碰到这个奇怪并隐讳的问题,花费了我几个小时的时间,才真正的找出根本原因。

  建议大家在使用ajax的同时尽量少使用这种方式,尽量使用更新局部页面的办法,而不是通过remotecall获得po,动态生成dom。有一个解决的办法就是,把需要lazyload的属性以及访问方法都设置成private,另外通过其他方法来调用。这样就能避免转换对象的时候导致你的lazyload失效。
分享到:
评论
8 楼 robbin 2006-09-26  
zkj_beyond 写道
http://getahead.ltd.uk/dwr/server/hibernate
dwr是这样搞的。

DTO
如果不用open session in view,根本没有这个疑问的。

我很怀疑  ajax和服务器端OO编程思想 本质上有冲突。


Web Remoting本来就是不OO的,是过程化调用。
7 楼 zkj_beyond 2006-09-26  
http://getahead.ltd.uk/dwr/server/hibernate
dwr是这样搞的。

DTO
如果不用open session in view,根本没有这个疑问的。

我很怀疑  ajax和服务器端OO编程思想 本质上有冲突。
6 楼 foxty 2006-09-26  
其实我发这个帖子的原意并不是很关心有什么解决办法。

我更想知道的是为什么你会提出这个解决办法?怎么去实现?

这样讨论才有价值,而且也是我的目的。
5 楼 hexiaodong 2006-09-26  
用ajax获取对象图,我的建议是一定要在服务器端做对象图的裁剪。可以通过一个配置文件来决定如何裁剪一个对象图。
4 楼 foxty 2006-09-26  
Nicholas_Ding 写道
这个问题很容易解决,服务器端做一个JSON的Serializer和Deserializer就可以了。


不好意思,听说过JSON但一直没有用过,能举个简单的例子么?

我先猜测一下,如果不对请指正:
  是自己实现Serializer,Deserializer吗?如何来判断某个属性是否需要Serialize?如果一个对象中关联了多个对象,那么客户端可能会有多种情况:可能会都不laod,可能会只load A或者load B或者AB都load,那又如何来判断究竟是那种情况?
3 楼 Nicholas_Ding 2006-09-26  
这个问题很容易解决,服务器端做一个JSON的Serializer和Deserializer就可以了。
2 楼 foxty 2006-09-26  
好快的回复。呵呵~

如果是单独一个po转换成DTO我到觉得没什么,但是如果客户端得到的是一个对象集合,那不是还需要遍历这个集合去进行转换?反而会感觉不爽。
1 楼 robbin 2006-09-26  
Remoting的时候必须在服务器端提供一个相应的Service层,把PO对象图转换为扁平的DTO。

相关推荐

    lazyload-2.x.zip

    在当今网页开发中,为了提高页面加载速度和用户体验,"懒加载"(Lazy Load)技术变得越来越重要。jQuery LazyLoad插件是一个广泛使用的解决方案,它允许图片、iframe等元素在进入浏览器视口时才开始加载,从而显著...

    jQuery_lazyload

    jQuery_lazyload设计得相当灵活,可以与大部分其他jQuery插件和前端框架(如Bootstrap)良好协作。 7. **优化技巧**: - 结合CSS媒体查询,针对不同设备和屏幕尺寸设置不同的延迟加载策略。 - 使用WebP或SVG等...

    JQuery Lazyload加载图片实例

    **jQuery Lazyload 图片加载技术详解** 在网页设计中,图片是重要的元素之一,但大量图片的预加载可能会拖慢页面的加载速度,影响用户体验。为了解决这一问题,jQuery 提供了一个插件——jQuery Lazyload,它允许...

    jquery.lazyload.js

    5. **易于集成和定制**:作为基于jQuery的插件,jQuery.Lazyload.js拥有丰富的API和配置选项,开发者可以根据需求进行定制,实现不同的加载效果,如预加载、动画效果等。 在实际应用中,jQuery.Lazyload.js的使用...

    lazyload.js演示页面

    标签“lazyload”和“延迟加载”进一步确认了这个压缩包内容的核心是关于延迟加载技术的实践。在网页开发中,延迟加载是一种节省带宽、提高页面响应速度的重要手段,尤其对于移动设备来说,可以有效减少数据消耗。 ...

    jQuery.lazyload-1.7.2

    2. **异步加载**:如果页面中同时使用了其他异步加载资源(如AJAX),确保正确配置插件以避免冲突。 3. **初始化**:在文档加载完成后,需要调用`.lazyload()`方法来启动插件。如果你的图片是在动态插入的,可能...

    lazyload使用案例及DEMO

    2. **JavaScript配置**:引入`lazyload.js`和`jquery.js`,确保jQuery库已经加载。然后,通过调用`lazyload`函数来初始化插件: ```javascript $(function() { $("img.lazyload").lazyload(); }); ``` 这行...

    图片延迟加载 lazyload

    4. **自定义事件和扩展**:jQuery.lazyload 允许开发者自定义加载事件和扩展功能,如在图片加载完成后执行某些操作,或者与其他库和框架集成。 5. **优化提示**:为了确保所有浏览器都能正确工作,建议为低版本...

    jquery lazyload延时加载

    1. **引入 jQuery 和 LazyLoad**:首先确保页面中已经引入了 jQuery 库,然后引入 LazyLoad 的 JavaScript 文件,如 `jquery.lazyload.js`。 2. **设置 HTML 结构**:给需要延时加载的图片添加特定的类名(如 `lazy...

    懒加载lazyload

    `tuupola-jquery_lazyload` 这个压缩包可能包含了这两个库的源代码以及相关的示例(demo),帮助开发者理解和使用这个插件。 要使用 `jquery.lazyload.js`,首先确保在页面中引入了 jQuery 和插件本身。通常,我们...

    magento lazyload插件

    它的主要功能是实现图片的延迟加载(Lazy Load),以此提升网站的加载速度和用户体验。在网页浏览时,传统方式下所有图片会一次性全部加载,这可能导致页面加载时间过长,特别是对于拥有大量图片的电商网站来说,这...

    JQuery LazyLoad 图片懒加载实例

    **jQuery LazyLoad 图片懒加载实例** 在网页设计中,图片加载是影响页面性能的关键因素。当页面包含大量图片时,一次性加载所有图片可能会导致页面加载速度变慢,用户体验下降。为了解决这一问题,我们可以使用`...

    动态加载的图片LazyLoad

    1. **更新JQuery和JQuery.LazyLoad**:确保使用的是最新稳定版本,以获得更好的浏览器兼容性和修复已知问题。 2. **调试和检查代码**:使用浏览器的开发者工具检查JavaScript错误,定位可能导致问题的代码段。 3. **...

    jQuery.lazyload.js

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多...

    lazyload延迟加载

    Lazyload是通过延迟加载来实现按需加载,达到节省资源,加快浏览速度的目的。 网上也有不少类似的效果,这个Lazyload主要特点是: 支持使用window(窗口)或元素作为容器对象; 对静态(位置大小不变)元素做了大量...

    lazyload.js实现图片异步延迟加载

    `lazyload.js`还提供了`load`和`error`事件,可以监听图片加载成功和失败: ```javascript lazyLoadInstance.on('load', function(event) { console.log('Image loaded:', event.target); }); lazyLoadInstance....

    图片延迟加载,lazyload.js使用实例

    总之,`lazyload.js`是一个实用的图片延迟加载解决方案,通过简单地配置和使用,可以有效地提升网页性能,减少用户等待时间,同时还能降低服务器带宽消耗。在实际开发中,结合最佳实践和合理的配置,可以最大化地...

    lazyload-JavaScript

    在网页开发中,图片懒加载(Lazy Load)是一种优化用户体验和提高页面加载速度的技术。"lazyload"是指在JavaScript中实现的延迟加载策略,它只在用户滚动到视口附近的图片时才加载图片,而不是在页面初次渲染时一次...

Global site tag (gtag.js) - Google Analytics