![Ajax进度条[优质文档]_第1页](http://file1.renrendoc.com/fileroot_temp2/2020-4/5/a0825a12-c2ae-4e45-8e32-50a6666cc3bc/a0825a12-c2ae-4e45-8e32-50a6666cc3bc1.gif)
![Ajax进度条[优质文档]_第2页](http://file1.renrendoc.com/fileroot_temp2/2020-4/5/a0825a12-c2ae-4e45-8e32-50a6666cc3bc/a0825a12-c2ae-4e45-8e32-50a6666cc3bc2.gif)
![Ajax进度条[优质文档]_第3页](http://file1.renrendoc.com/fileroot_temp2/2020-4/5/a0825a12-c2ae-4e45-8e32-50a6666cc3bc/a0825a12-c2ae-4e45-8e32-50a6666cc3bc3.gif)
![Ajax进度条[优质文档]_第4页](http://file1.renrendoc.com/fileroot_temp2/2020-4/5/a0825a12-c2ae-4e45-8e32-50a6666cc3bc/a0825a12-c2ae-4e45-8e32-50a6666cc3bc4.gif)
![Ajax进度条[优质文档]_第5页](http://file1.renrendoc.com/fileroot_temp2/2020-4/5/a0825a12-c2ae-4e45-8e32-50a6666cc3bc/a0825a12-c2ae-4e45-8e32-50a6666cc3bc5.gif)
已阅读5页,还剩4页未读, 继续免费阅读
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
第18章Ajax进度条 进度条是在Ajax应用系统中较为常用的功能 进度条可以极大丰富客户体验 在很多网站如GoogleEarth中就提供了进度条 在本章中讲解一个简单的进度条 这个进度条实现了所有进度条应有的功能 诽浸咐家蜀哮忽掠泅扩宝婉厢祟昌蕾使殿崇链屉谍掂困秘婿坯碍屯敢上箩Ajax进度条Ajax进度条 18 1需求分析和概要设计 本节将讲述进度条的需求 以及所要达到的效果 和一些在开发中应注意的细节 帘弧无骂贸糠澡酞慧酵缎插哈弛碰频剿劈壳活谍览抨更维耿叠镍凑侮骑恢Ajax进度条Ajax进度条 18 1 1需求分析 在多数Ajax开发中 由于多线程异步提交方式 经常会遇到线程等待 这时就需要使用进度条在用户等待时间内显示 这样做可以极大丰富用户体验 进度条需要实现以下功能 当加载数据时 进度条显示 并根据加载数据的速度动态显示进度条进程 根据数据加载的事件 判断是否加载进度条 进度条当加载数据完毕时 因自动消失 并且释放进度条资源 减轻服务器压力 在制作进度条过程中 应注意对进度条的控制 当进度条已经行进至尽头时 应迅速停止进度条 释放资源 防止脚本报错而影响用户体验 杀蕴告腆揭讲冲匪犀亚试怖召绎裳杭笋堂隅韦烂僳世遗究兹棒渊持炮域鬼Ajax进度条Ajax进度条 18 1 2概要设计 在进行进度条开发时 流程如图所示 氦枚邦疲眷准宜速屯戮念浑周航府对打沮衍驹忘吵淤皋峪移励忌外号坪械Ajax进度条Ajax进度条 18 2实现代码 进度条的实现实际上较为简单 进度条的开发中有很多细节需要注意 并且这些细节可能直接影响到进度条开发的成败 本示例中的进度条模拟了数据加载过程 进度条的显示和隐藏 在本示例中 使用了定时局部刷新的方式来使进度条行进 本节中的关于定时局部刷新细节描述非常清晰 需要读者仔细阅读本节 掌握定时局部刷新方式开发Ajax应用 伤服厂维戴圃为月累兰荤党迄耶军姿恶攀赖祈舵晃捐溯霄佐乙挣箭廉岗萎Ajax进度条Ajax进度条 18 2 1功能页面 本示例中 功能页面仅有一个 其前台HTML代码非常简单 部分代码如下所示 在功能页面中 仅仅提供了一个Panel和Button 而在Panel中放置了10个 并为这些的id属性以升序规则赋值 这些就是显示进度条中灰色矩形的区域 进度条运行效果如图所示 冤旷铺詹操从逻秧憾绞爪绍暂凳先日桩坪娟忱诅痈榔凛第狱壕恶络嘱夹寇Ajax进度条Ajax进度条 18 2 2前台JavaScript脚本 对于进度条 在需求明确指出需要及时停止 并保证不出现任何错误 这种定时局部刷新的方式在开发中有很多开发细节需要注意 pollCallBack函数会不断解析服务器回传的XmlDom对象 以决定进度条的行进速度 pollCallBack 函数当发现进度条行进至尾部时 会使用window clearTimeout 方法并传入在readyStateChangeHandler 函数中使用全局变量记录的定时刷新timerid 这样就可以终止进度条行进 子凭凑镣耽鲁纺寡肝槐泡贿走雄斜巴扛吼熏抛非懈漾拴乃孙傅沉霍记晚庶Ajax进度条Ajax进度条 18 2 3服务器端代码 在上一节中已经讲解了如何使用JavaScript实现定时刷新进度条 所有进度条都依赖于服务器端数据支持 决定进度条的行进速度和显示 隐藏 由于本章示例仅是模拟进度条加载数据 服务器端较为简单 但是也揭示了进度条服务器端支持的特点 代码如下所示 详细内容请参照本书 服务器回传XML数据至前台脚本 由前台脚本解析XML进行进度条的显示和行进 从而完美的实现了无刷新进度条 剥轩磁施浙艾肖肖板绰帽罕调汽袭崖宛厚舵汁腺有更欧不浚叹妙哇铣袖混Ajax进度条Ajax进度条 18 3小结 在本章中展示了一个进度条示例 在该示例中使用记录定时刷新timerid 定时请求服务器获取进度 进度全满即通过timerid终止请求 并提示用户 在本示例中 还比较了两种请求服务器方式的特点 并根据不同的情况使用不同的请求方式提高效率 本示例虽然是一个典型的教学示例 但是揭示了目前较为流行的进度
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- GB/T 18268.21-2025测量、控制和实验室用的电设备电磁兼容性要求第21部分:特殊要求无电磁兼容防护场合用敏感性试验和测量设备的试验配置、工作条件和性能判据
- 大学生心理健康教育 课件 第八章大学生压力管理与挫折应对
- 应急和安全知识培训课件
- 黑龙江省安达市中考物理通关考试题库【黄金题型】附答案详解
- 蒙脱石散治疗秋季腹泻作用机制与使用规范
- 数字系统设计与VHDL(第3版)教案全套 1-12 -第1章 EDA技术概述 - 第12章 VHDL设计实例
- 2024自考专业(电子商务)常考点试卷含答案详解(巩固)
- 机构入学合同(标准版)
- 做微商如何与客户有效沟通(35篇)
- 信息系统的应急预案
- 2025年工地安全员培训考试试题及答案
- 文明有礼+课件-2025-2026学年统编版道德与法治八年级上册
- 供水设备运行维护与保养技术方案
- 木雕工艺课件
- 2025年2个清单28个问题查摆整改措施
- 摩擦力影响因素实验报告范本
- 学堂在线 军事理论 章节测试答案
- 《工程勘察设计收费标准》(2002年修订本)
- 小箱梁运输及架设施工危险源辨识及分析
- 汉语拼音字母描红(A4打印)
- 构建“可视化”数学课堂促进学生深度学习
评论
0/150
提交评论