虽然有越来越多的网站在应用AJAX技术进行开发,但是构建一个复杂的AJAX应用仍然是一个难题。造成这些困难的主要原因是什么呢?是与服务器的异步通信问题?还是GUI程序设计问题呢?通常这两项工作都是由桌面程序来完成的,那究竟为何开发一个可以实现同样功能的AJAX应用就这么困难呢?
AJAX 开发中的难题
让我们通过一个简单的例子来认识这个问题。假设你要建立一个树形结构的公告栏系统(BBS),它可以根据用户请求与服务器进行交互,动态加载每篇文章的信息,而不是一次性从服务器载入所有文章信息。每篇文章有四个相关属性:系统中可以作为唯一标识的ID、发贴人姓名、文章内容以及包含其所有子文章ID的数组信息。首先假定有一个名为getArticle()的函数可以加载一篇文章信息。该函数接收的参数是要加载文章的ID,通过它可从服务器获取文章信息。它返回的对象包含与文章相关的四条属性:id,name,content和children。例程如下:
function ( id ) {
var a = getArticle(id);
document.writeln(a.name + "
" + a.content);
}
然而你也许会注意到,重复用同一个文章ID调用此函数,需要与服务器之间进行反复且无益的通信。想要解决这个问题,可以考虑使用函数 getArticleWithCache(),它相当于一个带有缓存能力的getArticle()。在这个例子中,getArticle()返回的数据只是作为一个全局变量被保存下来:
var cache = {};
function getArticleWithCache ( id ) {
if ( !cache[id] ) {
cache[id] = getArticle(id);
}
return cache[id];
}
现在已将读入的文章缓存起来,让我们再来考虑一下函数backgroundLoad(),它应用我们上面提到的缓存机制加载所有文章信息。其用途是,当读者在阅读某篇文章时,从后台预加载它所有子文章。因为文章数据是树状结构的,所以很容易写一个递归的算法来遍历树并且加载所有的文章:
function backgroundLoad ( ids ) {
for ( var i=0; i < ids.length; i++ ) {
var a = getArticleWithCache(ids[i]);
backgroundLoad(a.children);
}
}
backgroundLoad ()函数接收一个ID数组作为参数,然后通过每个ID调用前面定义过的getArticldWithCache()方法,这样就把每个ID对应的文章缓存起来。之后再通过已加载文章的子文章ID数组递归调用backgroundLoad()方法,如此整个文章树就被缓存起来。
分享到:
相关推荐
JavaScript多线程编程简介.txt
《疯狂HTML 5/CSS3/JavaScript讲义...除此之外,本书还系统地介绍了JavaScript编程知识,包括JavaScript基本语法、DOM编程,以及HTML5新增的本地存储、离线应用、JavaScript多线程、客户端通信支持、WebSocket编程等。
《疯狂HTML 5/CSS 3/JavaScript...除此之外,本书还系统地介绍了javascript编程知识,包括javascript基本语法、dom编程,以及html 5新增的本地存储、离线应用、javascript多线程、客户端通信支持、websocket编程等。
本文内容包括:前提条件问题语句yeoldeXUL中的...在本文中,您将了解XUL的多线程功能,并创建一个应用程序,用来通过多线程检索数据。您将使用的是一个能访问Internet上的多个远端数据源的典型IO-绑定应用程序,您将
2021面试题、Java2021面试题、2022面试题、Java2022面试题、Java面试题、JVM面试题、多线程面试题、并发编程、设计模式面试题、Spring面试题、MyBatis面试题、ZooKeepe面试题r、Dubbo面试题、Elasticsearch面试题、...
2022java面试题、JVM面试题、多线程面试题、并发编程、Redis面试题、MySQL面试题、Java2022面试题、Netty面试题、Elasticsearch面试题、Tomcat面试题、Dubbo面试题、Kafka面试题、Linux面试题、2021面试题、java面试...
本书是一本介绍HTML 5、CSS 3和JavaScript开发的实用图书。全书可分 为4个部分。 ... 第二部分:详细地介绍了CSS 3的绝大部分常用选择器、属性,...应用、多线程、跨文档消息通信、WebSocket编程等知识,这些内容既覆盖了
那么如何让程序像人类一样可以多线程工作呢?以下为几种异步编程方式的总结,希望与君共勉。 回调函数 事件监听 发布订阅模式 Promise Generator (ES6) async (ES7) 异步编程传统的解决方案:回调函数和事件...
第18章 Web Worker多线程API 588 18.1 使用Worker创建多线程 589 18.2 与Worker线程进行数据交换 591 18.3 Worker线程嵌套 594 18.4 使用SharedWorker创建共享线程 597 18.5 Promise 603 18.6 本章小结 611 ...
李刚 疯狂HTML5CSS3JavaScript讲义的源代码 第一部分 第1章 HTML 5简介 ... 第二部分 第6章 级联样式单与CSS选择器 ... 第17章 使用Worker创建多线程 第18章 客户端通信 第四部分 第19章 HTML 5的疯狂俄罗斯方块
一、JavaScript异步编程的两个核心难点 异步I/O、事件驱动使得单线程的JavaScript得以在不阻塞UI的情况下执行网络、文件访问功能,且使之在后端实现了较高的性能。然而异步风格也引来了一些麻烦,其中比较核心的问题...
快手( AAuto Quicker ) 简介 AAuto是专用于桌面软件快速开发的新一代混合型编程语言, 兼具动态、静态语言优势,语法更可兼容大部分流行语言,学习成本低,开发速度快,并...提供可视化开发环境,轻松支持多线程开发。
开发环境:Chrome + Subline Text 开发语言:JavaScript 1.学习调度算法 2.通过实现电梯调度,体会操作系统调度过程 3.学习特定环境下多线程编程方法
除此之外,本书还系统地介绍了JavaScript编程知识,包括JavaScript基本语法、DOM编程,以及HTML 5新增的本地存储、离线应用、JavaScript多线程、客户端通信支持、WebSocket编程等。 本书的定位是一本前端开发的...
除此之外,本书还系统地介绍了JavaScript编程知识,包括JavaScript基本语法、DOM编程,以及HTML 5新增的本地存储、离线应用、JavaScript多线程、客户端通信支持、WebSocket编程等。 本书的定位是一本前端开发的...
在 HTML5 中引入的工作线程使得浏览器端的 Javascript 引擎可以并发地执行 Javascript 代码,从而实现了对浏览器端多线程编程的良好支持。 Javascript中的多线程 – WebWorker HTML5 中的 Web Worker 可以分为两种...
JavaScript的执行环境是单线程的,单线程的好处是执行环境简单,不用去考虑诸如资源同步,死锁等多线程阻塞式编程等所需要面对的恼人的问题。但带来的坏处是当一个任务执行时间较长时,后面的任务会等待很长时间。在...
探索以Actor模型的样式实现API的潜在好处,即使在单线程编程环境(如Javascript)中也是如此。 去做 演员系统ActorSystem createSystem() system.actorOf(IActorFactory) -> ActorRef 演员Actor actor....
第九章 Java的多线程机制; 第十章 JAVA网络程序设计; 第十一章 CGI技术; 第十二章 JSP技术概述; 第十三章 JSP运行和开发环境; 第十四章 JSP语法; 第十五章 JSP与JavaBean; 第十六章 JSP访问数据库;
Javascript语言将任务的执行模式分成两种:同步...你可能知道,Javascript语言的执行环境是"单线程"(singlethread)。所谓"单线程",就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再