我想网 » Ajax

跨域资源共享的10种方式

seasun — Mon, 07 Feb 2011 14:18:08 +0000

在客户端编程语言中，如javascript和ActionScript，同源策略是一个很重要的安全理念，它在保证数据的安全性方面有着重要的意义。同源策略规定跨域之间的脚本是隔离的，一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。那么什么叫相同域，什么叫不同的域呢？

同源策略

在客户端编程语言中，如javascript和 ActionScript，同源策略是一个很重要的安全理念，它在保证数据的安全性方面有着重要的意义。同源策略规定跨域之间的脚本是隔离的，一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。那么什么叫相同域，什么叫不同的域呢？当两个域具有相同的协议(如http), 相同的端口(如80)，相同的host（如www.example.org)，那么我们就可以认为它们是相同的域。比如 http://www.example.org/index.html和http://www.example.org/sub/index.html是同域，而http://www.example.org, https://www.example.org, http://www.example.org:8080, http://sub.example.org中的任何两个都将构成跨域。同源策略还应该对一些特殊情况做处理，比如限制file协议下脚本的访问权限。本地的HTML文件在浏览器中是通过file协议打开的，如果脚本能通过file协议访问到硬盘上其它任意文件，就会出现安全隐患，目前IE8还有这样的隐患。

受到同源策略的影响，跨域资源共享就会受到制约。但是随着人们的实践和浏览器的进步，目前在跨域请求的技巧上，有很多宝贵经验的沉淀和积累。这里我把跨域资源共享分成两种，一种是单向的数据请求，还有一种是双向的消息通信。接下来我将罗列出常见的一些跨域方式，以下跨域实例的源代码可以从这里获得。

单向跨域

JSONP

JSONP (JSON with Padding)是一个简单高效的跨域方式，HTML中的script标签可以加载并执行其他域的javascript，于是我们可以通过script标记来动态加载其他域的资源。例如我要从域A的页面pageA加载域B的数据，那么在域B的页面pageB中我以JavaScript的形式声明pageA需要的数据，然后在 pageA中用script标签把pageB加载进来，那么pageB中的脚本就会得以执行。JSONP在此基础上加入了回调函数，pageB加载完之后会执行pageA中定义的函数，所需要的数据会以参数的形式传递给该函数。JSONP易于实现，但是也会存在一些安全隐患，如果第三方的脚本随意地执行，那么它就可以篡改页面内容，截获敏感数据。但是在受信任的双方传递数据，JSONP是非常合适的选择。

flash URLLoader

flash有自己的一套安全策略，服务器可以通过crossdomain.xml文件来声明能被哪些域的SWF文件访问，SWF也可以通过API来确定自身能被哪些域的SWF加载。当跨域访问资源时，例如从域www.a.com请求域www.b.com上的数据，我们可以借助flash来发送HTTP请求。首先，修改域www.b.com上的crossdomain.xml(一般存放在根目录，如果没有需要手动创建) ，把www.a.com加入到白名单。其次，通过Flash URLLoader发送HTTP请求，最后，通过Flash API把响应结果传递给JavaScript。Flash URLLoader是一种很普遍的跨域解决方案，不过需要支持iOS的话，这个方案就无能为力了。

Access Control

Access Control是比较超越的跨域方式，目前只在很少的浏览器中得以支持，这些浏览器可以发送一个跨域的HTTP请求（Firefox, Google Chrome等通过XMLHTTPRequest实现，IE8下通过XDomainRequest实现），请求的响应必须包含一个Access- Control-Allow-Origin的HTTP响应头，该响应头声明了请求域的可访问权限。例如www.a.com对www.b.com下的 asset.php发送了一个跨域的HTTP请求，那么asset.php必须加入如下的响应头：

header("Access-Control-Allow-Origin: http://www.a.com");

window.name

window 对象的name属性是一个很特别的属性，当该window的location变化，然后重新加载，它的name属性可以依然保持不变。那么我们可以在页面 A中用iframe加载其他域的页面B，而页面B中用JavaScript把需要传递的数据赋值给window.name，iframe加载完成之后，页面A修改iframe的地址，将其变成同域的一个地址，然后就可以读出window.name的值了。这个方式非常适合单向的数据请求，而且协议简单、安全。不会像JSONP那样不做限制地执行外部脚本。

server proxy

在数据提供方没有提供对JSONP协议或者 window.name协议的支持，也没有对其它域开放访问权限时，我们可以通过server proxy的方式来抓取数据。例如当www.a.com域下的页面需要请求www.b.com下的资源文件asset.txt时，直接发送一个指向 www.b.com/asset.txt的Ajax请求肯定是会被浏览器阻止。这时，我们在www.a.com下配一个代理，然后把Ajax请求绑定到这个代理路径下，例如www.a.com/proxy/, 然后这个代理发送HTTP请求访问www.b.com下的asset.txt，跨域的HTTP请求是在服务器端进行的，客户端并没有产生跨域的Ajax请求。这个跨域方式不需要和目标资源签订协议，带有侵略性，另外需要注意的是实践中应该对这个代理实施一定程度的保护，比如限制他人使用或者使用频率。

双向跨域

document.domain

通过修改document的domain属性，我们可以在域和子域或者不同的子域之间通信。同域策略认为域和子域隶属于不同的域，比如www.a.com和 sub.a.com是不同的域，这时，我们无法在www.a.com下的页面中调用sub.a.com中定义的JavaScript方法。但是当我们把它们document的domain属性都修改为a.com，浏览器就会认为它们处于同一个域下，那么我们就可以互相调用对方的method来通信了。

FIM – Fragment Identitier Messaging

不同的域之间，JavaScript只能做很有限的访问和操作，其实我们利用这些有限的访问权限就可以达到跨域通信的目的了。FIM (Fragment Identitier Messaging)就是在这个大前提下被发明的。父窗口可以对iframe进行URL读写，iframe也可以读写父窗口的URL，URL有一部分被称为frag，就是#号及其后面的字符，它一般用于浏览器锚点定位，Server端并不关心这部分，应该说HTTP请求过程中不会携带frag，所以这部分的修改不会产生HTTP请求，但是会产生浏览器历史记录。FIM的原理就是改变URL的frag部分来进行双向通信。每个window通过改变其他 window的location来发送消息，并通过监听自己的URL的变化来接收消息。这个方式的通信会造成一些不必要的浏览器历史记录，而且有些浏览器不支持onhashchange事件，需要轮询来获知URL的改变，最后，URL在浏览器下有长度限制，这个制约了每次传送的数据量。

Flash LocalConnection

页面上的双向通信也可以通过Flash来解决，Flash API中有LocalConnection这个类，该类允许两个SWF之间通过进程通信，这时SWF可以播放在独立的Flash Player或者AIR中，也可以嵌在HTML页面或者是PDF中。遵循这个通信原则，我们可以在不同域的HTML页面各自嵌套一个SWF来达到相互传递数据的目的了。SWF通过LocalConnection交换数据是很快的，但是每次的数据量有40kb的大小限制。用这种方式来跨域通信过于复杂，而且需要了2个SWF文件，实用性不强。

window.postMessage

window.postMessage是HTML5定义的一个很新的方法，这个方法可以很方便地跨window通信。由于它是一个很新的方法，所以在很旧和比较旧的浏览器中都无法使用。

Cross Frame

Cross Frame是FIM的一个变种，它借助了一个空白的iframe，不会产生多余的浏览器历史记录，也不需要轮询URL的改变，在可用性和性能上都做了很大的改观。它的基本原理大致是这样的，假设在域www.a.com上有页面A.html和一个空白代理页面proxyA.html, 另一个域www.b.com上有个页面B.html和一个空白代理页面proxyB.html，A.html需要向B.html中发送消息时，页面会创建一个隐藏的iframe, iframe的src指向proxyB.html并把message作为URL frag，由于B.html和proxyB.html是同域，所以在iframe加载完成之后，B.html可以获得iframe的URL，然后解析出 message，并移除该iframe。当B.html需要向A.html发送消息时，原理一样。Cross Frame是很好的双向通信方式，而且安全高效，但是它在Opera中无法使用，不过在Opera下面我们可以使用更简单的 window.postMessage来代替。

总结

跨域的方法很多，不同的应用场景我们都可以找到一个最合适的解决方案。比如单向的数据请求，我们应该优先选择JSONP或者window.name，双向通信我们采取Cross Frame，在未与数据提供方没有达成通信协议的情况下我们也可以用server proxy的方式来抓取数据。

Feed enhanced by Better Feed from Ozh

HTML, JavaScript,CSS简述

seasun — Wed, 01 Dec 2010 13:39:16 +0000

HTML, JavaScript,CSS 等等，这可不是你妈口中的AJAX

众所周知，网页是用超文本标记语言（HTML）编写的，这种网页编程语言告诉浏览器怎样在网页中输出并展现内容。换句话说，HTML就是网页这个建筑的一砖一瓦。长期以来，这些“砖瓦“都相当简单而且是静态的：仅有几行文字，或一些链接，或几张图片。

而今，网页中远不止文本，链接和图片了。我们期望能够在线下象棋时，每走一步不必等待网页重新加载，或者查看一下我们周边的地图时，每拖到一下网页也不用重新刷新。

这些动态网页的创意开始与于脚本语言JavaScript的出现。主要的网页浏览器都支持JavaScript，这就意味着网页能够加入一些更有意义的实时互动。例如，当你在线填一些表格时，点击“提交“按钮，网页可以调用 JavaScript代码来实时检查表格是否填错，如果有错误，网页马上就能提示你。

但今天我们所熟知的动态网页，是当XHR(XML Http Request)引入到JavaScript后才生机焕发，也是首次应用在像微软网页版Outlook，Gmail和Google地图这样的网页程序中。 XHR可以单独改变网页中的独立元素而无需重新加载整个网页，像网页中的游戏，地图，视频，或是个小调查。因此，网络应用程序运行地更快，更及时。

CSS（层叠样式表）的应用也使得网页显示更为生动。CSS给网页程序员提供了一个简单，有效的方式来定义网页的布局，可以使用颜色，圆角，渐变和动画等设计元素来美化网页。

网页程序员通常把JavaScript, XHR, CSS 和其他诸如AJAX （异步JavaScript和XML）等网页技术结合，形成一个强有力的组合。随着增加的更多功能和改进整合在一起，HTML 也继续发展出一个新的标准版本。

今天，网页在全体技术专家，思想家，程序员和一些组织的不懈努力下不断发展，这些组织不但创造了网页技术，而且要确保这些技术能被诸如 IE，Firefox, Safari和Google Chrome等浏览器中支持。网页技术专家和浏览器之间的相互关系，对网页开发者来说，使得网页成为既开放又友好的制作平台，他们给我们的生活带来更多有用而且有趣的网页应用程序。

Feed enhanced by Better Feed from Ozh

10个强大的Ajax jQuery文件上传程序

seasun — Sun, 07 Nov 2010 15:55:03 +0000

上传文件和图片是许多网站的一个常用功能，无论是让注册用户上传一个个人资料图片还是上传文件共享，都离不开上传程序，虽然有很多种实现方法，但要让上传看起来更酷一点，如显示剩余时间，同时上传多个文件，以及使用拖放式操作，或上传功能更稳定一点，也许你就没招了，没关系，本文就为你介绍10个功能强大，易于使用的Ajax jQuery文件上传程序，注意有些除了使用Ajax jQuery外，还结合了其它技术，如Flash。

1、 Valums AJAX Uploader

2、 Plupload

3、 Uploadify

4、AJAX Multiple File Upload Form using jQuery

5、jQuery AJAX File Upload

6、jQuery Upload Progress

7、jQuery Multiple File Upload Plugin

8、Digitalarld Swiff AJAX Uploader

9、jQUploader

10、AJAX File Upload

Feed enhanced by Better Feed from Ozh

开发移动 Web Ajax 应用

seasun — Thu, 12 Aug 2010 15:44:27 +0000

本文阐述如何开发一个运行在 Apple iPhone 以及基于 Android 的智能手机上的移动 Web 应用。开发这些设备上的移动 Web 应用，我们不能使用平常的桌面浏览器，至少不能完全只使用桌面浏览器。我们还需要模拟器或实际的设备。对于 iPhone 来说，我们需要使用 iPhone 模拟器。它是 iPhone SDK 的一部分。本文所使用的是 iPhone SDK 3.1。类似地，我们也需要使用 Android SDK。它包含了一个 Android Virtual Device 管理器，这个管理器可以用来创建运行各个 Android 版本的 Android 模拟器。其中本文使用的是 Android SDK 2.1。本文所用到的大部分代码是 JavaScript 代码，以及一些 HTML 和 CSS。此外，应用还有一个使用 Java™ 实现的服务器端。这并不是强制性要求的，和其它的 Web 应用一样，我们可以自己选择使用任意的服务器端技术。我们需要使用 Java 1.6 来运行本文所开发的应用。另外我们还需要使用 Jersey，它是 JAX-RS 的参考实现，以及所有相关的 Java Archive (JAR) 文件（见参考资料）。

手机浏览器与 WebKit

移动设备很多年就有 Web 浏览器了。然而，由于 Web 开发人员必须处理跨浏览器支持问题，因此开发浏览器应用一直是很困难的。开发人员需要花费很多的时间来实现 HTML、JavaScript 和 CSS 在不同版本的浏览器上运行完全一致，如 Internet Explorer、Mozilla Firefox、Safari 等。而桌面浏览器的问题几乎与手机浏览器中的问题如出一辙。不同版本的手机浏览器也是多得惊人。每个设备制造商都拥有各自的浏览器，甚至来自相同厂商的设备在操作系统、屏幕大小等方面都有很大的差别。有些浏览器只支持 WAP，而有一些则支持部分的 HTML，还有一些完全支持 HTML，但不支持 JavaScript。

幸好，现在情况已经大不相同了。到 2010 年 1 月，美国有超过 80% 的移动互联网流量都是通过 iPhone 或 Android 手机产生的。这两种操作系统不仅都是使用 WebKit 进行 HTML/CSS 渲染，而且它们都是一样积极地使用 HTML 5 标准所采用的 JavaScript 引擎。没错。移动领域的主流浏览器现在都使用了开放标准。这是 Web 开发人员所遇到的最好时机。

浏览器之间还是存在差别的，即使是不同版本的 iPhone 和 Android 也不例外。其中 Android 浏览器差别最大。在 2.0 之前版本的 Android 上，Android 浏览器使用的是私有的 Google Gears 技术。虽然 Gears 有很多优秀的创新技术，现在已经包含在 HTML 5 标准中了。然而，这意味着在很长的一段时间里，Android 浏览器是不支持其中一些 HTML 5 标准的，但是我们还是能够使用 Gears 来实现一部分功能。本文的所有代码都是基于 HTML 5 标准并且是可以正常运行在 Android 2.0+ 或 iPhone 3.0+ 上的。既然我们已经拥有了这些现代的基于 WebKit 的浏览器，接下来让我们来看看一些这些设备上的 Ajax。

手机浏览器上的 Ajax

像桌面 Web 应用一样，在移动 Web 应用上创建引人注目的用户体验的关键通常就是使用 Ajax。当然，用户体验并不是使用 Ajax 的唯一原因；其中还可能涉及到速度和效率的原因。而后者恰恰是在移动 Web 应用上使用 Ajax 的更重要的原因所在，因为移动网络的延迟更大，而浏览器本身也受到处理器速度、内存和缓存大小的限制。幸好，由于只需要关注于基于标准的浏览器，因此 Ajax 则恰好是许多因此变得更简单的技术之一。在详细讨论这个问题之前，让我们先快速地了解一下本文所开发的应用所使用的后台服务器。

在开始之前，我们需要下载必要的 JAR 文件，其中包括 Jersey、Xerces、Rome 和 Google App Engine SDK (见参考资料)。然后将它们安装到下面的文件夹中：WebKitBlog>war>WEB-INF>lib。我们可以从这里下载应用的其它源代码。

WebKit 博客

本文的移动 Web 应用是一个简单的阅读移动 Web 开发新闻的应用。虽然目前它只是简单地从官方 WebKit 博客抓取 RSS 源，但是它可以经过简单地修改来收集多个 RSS 源。这个应用是一个普通的 Java Web 应用，它可以部署到任何一个 Java 应用服务器上。所有代码见清单 1。

清单 1. Feed 类

@Path(”/feed”)

public class Feed {

String surfinSafari = “http://webkit.org/blog/feed/“;

@GET @Produces(”application/json”)

public News getNews(@DefaultValue(”0″) @QueryParam(”after”) long after)

throws Exception{

URL feedUrl = new URL(surfinSafari);

SyndFeedInput input = new SyndFeedInput();

SyndFeed feed = input.build(new XmlReader(feedUrl));

List entries = new ArrayList(feed.getEntries().size());

for (Object obj : feed.getEntries()){

SyndEntry entry = (SyndEntry) obj;

if (entry.getPublishedDate().getTime() > after){

Item item = new Item(entry.getTitle(), entry.getLink(),

entry.getDescription().getValue(),

entry.getPublishedDate().getTime());

entries.add(item);

}

return new News(feed.getTitle(), entries);

}

这个类使用 Java 的 JAX-RS 创建一个 RESTful 服务。@Path 注释表示了服务的终端，即服务的相对 URL 是 /feed。@GET 表示这个服务支持 HTTP GET。@Produces 声明这个服务将生成 JSON 格式的数据。这是一个简单的以 JSON 格式序列化数据的方法。方法 getNews 接收一个名为 after 的参数，即获取一个特定日期之后的实体。这里也使用 JAX-RS 注释来将参数 after 绑定到查询字符参数 after 上。如果没有赋值，它会使用默认值 0。

到这里，我只阐述了清单 1 中创建服务寻址和数据序列化的代码所用到的 JAX-RS 注释。该方法的主体实际上大部分依赖于处理 RSS 的 Rome 包。它只是下载最新的 RSS 源，然后将它转换成我们应用所需要的数据，这里的数据就是 Item 和 News 这两类。其中唯一复杂的部分是文章的发表日期被转化为一个 long 值，并用作一个 ID。这是一个非常有用的 ID，因为我们可以用它来进行排序，我们将在后面使用到。News 类如清单 2 所示。

清单 2. News 类

@XmlRootElement

public class News {

private String title;

private List entries;

// constructors, getters/setters omitted for brevity

}

注意 News 类使用了 JAXB 注释 @XmlRootElement。这个应用中不使用 XML，但是 JAX-RS 使用 JAXB 完成自动的序列化/反序列化。这个类只有一个标题属性和一组 Item。 Item 类如清单 3 所示。

清单 3. Item 类

@XmlType

public class Item {

private String title;

private String link;

private String description;

private Long id;

// constructors, getters/setters omitted for brevity

}

这个类包含的就是我们在 Web 应用中显示的内容。类似于 News 类，它也使用 JAXB 注释，这样 JAX-RS 可以将它序列化成 JSON。这部分代码的最后一部分是配置 Web 应用的，以使请求能指向 JAX-RS。为了达到这个目的，我们需要编辑应用的 web.xml 文件，如清单 4 所示。

清单 4. web.xml 配置文件

http://www.w3.org/2001/XMLSchema-instance”

xmlns=”http://java.sun.com/xml/ns/javaee”

xmlns:web=”http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd”

xsi:schemaLocation=”http://java.sun.com/xml/ns/javaee

http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd”

version=”2.5″>

WebKit Blog Servlet

com.sun.jersey.spi.container.servlet.

ServletContainer

com.sun.jersey.config.property.packages

org.developerworks.mobile

WebKit Blog Servlet

/resources/*

index.html

text/cache-manifest

这是最典型的 web.xml 代码。我们可以看到 servlet 声明，应用使用了 JAX-RS 的参考实现 Jersey。 Servlet 的初始化参数指示 Jersey 扫描 org.developerworks.mobile 包中被标记为处理服务请求的类。同时，任何映射到 /resources/ 的请求都将映射到 Jersey servlet。这里最后需要注意的是文件最后的 mime-mapping 部分。这是 MANIFEST 文件的 MIME 类型，也是我后面将讨论到的脱机 Web 应用的一个关键。既然我们已经了解了 Web 应用将使用到的后台服务，接下来我们将了解它使用到的前台。

Ajax 构建的用户接口

清单 4 中我们可以看到应用有一个标准的 index.html 文件。这是应用的入口点，如清单 5 所示。

清单 5. index.html 文件

WebKit News

Recent News About WebKit

id=”loader” src=”loading.gif”/>

这是一个非常简单的 Web 页面，但是其中有许多值得注意的方面。首先，在文件头部我设置了视区。它指示浏览器放大内容，使内容在设备上良好显示。在 UI 代码方面，这里只有一个标题和表示正在加载的图片。剩下的部分就是 JavaScript。文件 index.js 中的 loadEntries 函数会发送一个 Ajax 请求加载数据。这个函数如清单 6 所示。

清单 6. loadEntries 函数

function loadEntries(){

if (!window.JSON){

var head = document.getElementsByTagName(”head”)[0];

var jsScript = document.createElement(”script”);

jsScript.setAttribute(”src”, “json2.js”);

jsScript.setAttribute(”type”,”text/javascript”);

head.appendChild(jsScript);

}

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){

if (this.readyState == 4 &&this.status == 200){

var theFeed = JSON.parse(this.responseText);

var i = 0;

if (theFeed.entries){

var len = theFeed.entries.length;

for (i=0;i

addEntry(theFeed.entries[len - 1 -i], true);

}

var body = document.getElementsByTagName(”body”)[0];

body.removeChild($(”loader”));

}

};

var urlStr = “/resources/feed”;

xhr.open(”GET”, urlStr);

xhr.send();

}

在这个函数的开始部分，我进行了一些功能检查。大多数浏览器支持内置的解析和序列化 JSON 的函数。这与 json.org 上的 JSON 库是相同的。然而，如果没有这个函数，我们需要在页面上包含这个文件，然后我们就有相同的功能了。

另外，这是非常简单的 Ajax 代码。我们不需要担心 Internet Explorer 不支持，所以我们可以直接创建一个 XMLHttpRequest。我们可以设置它的 onreadystatechange 属性为一个函数，在本例中将创建一个闭包。当响应从服务器返回（readyState = 4）且处理过程没有发生问题（status = 200 OK）时，我们就使用 JSON.parse 函数来解析 JSON 响应。对于来自源的每一个记录执行 addEntry 函数。这个函数为每一个记录创建 UI 元素。如清单 7 所示。

清单 7. addEntry 函数

function addEntry(e, prepend){

var eDiv = document.createElement(”div”);

eDiv.setAttribute(”class”, “item”);

var link = document.createElement(”a”);

link.setAttribute(”href”, e["link"]);

var title = document.createTextNode(e["title"]);

link.appendChild(title);

eDiv.appendChild(link);

var button = document.createElement(”input”);

button.setAttribute(”type”, “button”);

button.setAttribute(”value”, “Show”);

button.setAttribute(”id”, “button” + e["id"]);

button.setAttribute(”onclick”, “showDescription(’” + e["id"] + “‘)”);

eDiv.appendChild(button);

var dDiv = document.createElement(”div”);

dDiv.setAttribute(”id”, e["id"]);

dDiv.setAttribute(”class”, “description”);

dDiv.setAttribute(”style”, “display:none”);

dDiv.innerHTML = e["description"];

eDiv.appendChild(dDiv);

var body = document.getElementsByTagName(”body”)[0];

if (!prepend && body.childNodes.length > 1){

body.appendChild(eDiv);

} else {

body.insertBefore(eDiv, body.childNodes.item(2));

}

这个函数里执行的都是标准的 DOM 操作。唯一复杂的方面是记录可以附加在后面或插到前面，或者添加到顶部或底部。在前面的清单 6 中，函数的最后一个操作是删除正在加载的图片。这其中包括基本的 Ajax 函数，我们可以根据用例选择使用。然而，应用需要从服务器下载许多数据，然后再解析。对于移动 Web 应用，我们可以有更好的方式，我们可以使用本地缓存。

使用本地存储进行缓存

本地存储属于 HTML 5 规范，并且得到广泛的支持。它有一个简单的 name – value 存储机制，而其中 name 和 value 都是字符串。所以将记录保存到本地存储是很简单的，如清单 8 所示。

清单 8. 保存到本地存储

function saveLocal(entry){

if (!window.localStorage){

return;

}

localStorage.setItem(entry["id"], JSON.stringify(entry));

}

同样，这里做了一些浏览器功能检查，按照 HTML 5 规范，首先检查 window 对象是否有 localStorage 属性。如果有，那么我们就可以使用记录的 id 作为存储的键。对于 value，必须使用字符串，因此我们使用 JSON.stringify 函数来将对象序列化成一个字符串。这样，我们只需要一个从本地存储读取所有数据的函数。如清单 9 所示。

清单 9. 从本地存储加载数据

function loadLocal(){

if (!window.localStorage){

return [];

}

var i = 0;

var e = {};

var id = 0;

var entries = [];

for (i=0; i< localStorage.length; i++){

id = localStorage.key(i);

e = JSON.parse(localStorage.getItem(id));

entries[entries.length] = e;

}

entries.sort(function(a,b) {

return b.id – a.id;

});

return entries;

}

同样，这个函数从检查本地存储是否可用开始。接着，它遍历本地存储中的所有数据。对于存储中的每一个值，我们再次使用 JSON.parse 函数来将字符串解析成为一个对象。接着，我们需要对记录进行排序，因为它们从本地存储返回的顺序是不一定的。这里进行了一个降序排序，最新记录在最前面。最后，我们就有了本地存储的保存和加载函数，我们需要将它们整合到 loadEntries 函数中，如清单 10 所示。

清单 10. 添加缓存到 loadEntries 函数

function loadEntries(){

// check for JSON object

var localEntries = loadLocal();

var newest = 0;

if (localEntries.length > 0){

newest = localEntries[0].id;

}

var i = 0;

for (i=0;i

addEntry(localEntries[i]);

}

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){

if (this.readyState == 4 && this.status == 200){

var theFeed = JSON.parse(this.responseText);

var i = 0;

if (theFeed.entries){

var len = theFeed.entries.length;

for (i=0;i

addEntry(theFeed.entries[len - 1 -i], true);

saveLocal(theFeed.entries[len - 1 -i]);

}

var body = document.getElementsByTagName(”body”)[0];

body.removeChild($(”loader”));

}

};

var urlStr = “/resources/feed?after=” + newest;

xhr.open(”GET”, urlStr);

xhr.send();

}

这里的主要区别是我们首先加载本地数据。接着确定其中最新的记录，然后在我们连接服务器时使用这个参数，服务器将只会返回不在本地存储的记录。最后，当我获得新的记录后，在回调函数中我们需要调用 saveLocal 函数来将它们保存到本地缓存中。在新的记录存储到本地后，现在我们就可以启用 Web 应用的完全脱机访问。

脱机访问

使应用以脱机方式工作通常被视为移动 Web 应用开发的圣杯。虽然它可能很复杂，但是许多 HTML 5 的新特性对它进行了简化。我们需要做的第一件事是确定什么东西需要脱机访问，然后将它们列在应用的 MANIFEST 中，如清单 11 所示。

清单 11. 应用的 MANIFEST

CACHE MANIFEST

index.html

index.js

json2.js

loading.gif

对于这样简单的应用，它的 MANIFEST 也是非常简单的。它只包含全部的静态文件：HTML、JavaScript 和图片（以及 CSS）。其中重要的一点是这个文件要用 MIME 类型 text/cache-manifest 挂载 —— 正如我们在清单 4 的 web.xml 文件中设置的那样。最后，在清单 5 中，我们可以看到最外层的 html 元素有一个属性 manifest，它指向清单 11 中的 MANIFEST 文件。最后我们需要做的是对 loadEntries 函数进行最后的修改，如清单 12 所示。

清单 12. 脱机检查

function loadEntries(){

// load local

// …

// check if online

if (navigator.onLine){

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){

if (this.readyState == 4 && this.status == 200){

var theFeed = JSON.parse(this.responseText);

var i = 0;

if (theFeed.entries){

var len = theFeed.entries.length;

for (i=0;i

addEntry(theFeed.entries[len - 1 -i], true);

saveLocal(theFeed.entries[len - 1 -i]);

}

var body = document.getElementsByTagName(”body”)[0];

body.removeChild($(”loader”));

}

};

var urlStr = “/resources/feed?after=” + newest;

xhr.open(”GET”, urlStr);

xhr.send();

}

检查 navigator 对象（window.navigator）的 onLine 属性就可以确定当前是否是脱机的。如果是脱机的，应用就不会请求服务器获取新的记录，而只显示所有本地记录。现在，我们有了一个支持脱机的完整的移动 Web 应用。

结束语

移动 Web 应用是当前一个很热的话题。它们是一种为许多不同设备的用户提供服务的方法。它们利用浏览器之间最高层次的标准化，这是 Web 开发人员最愿意看到的。在本文中，我们了解了开发一个基于 Ajax 的移动 Web 应用所需要的重要技术。而且，通过 Ajax，我们能够利用手机浏览器的最前沿技术。通过浏览本文中的示例代码，我们知道在页面被请求时我们可以在服务器上生成所有的 HTML。然而，通过将所有 UI 放在客户端和使用 Ajax 从服务器获取数据，我们可以简单地将数据缓存到客户端，甚至实现应用的脱机工作方式。

Feed enhanced by Better Feed from Ozh

jQuery中的AJAX全局事件详解

seasun — Tue, 10 Aug 2010 04:57:34 +0000

jQuery在AJAX方面是非常强大和方便的，以下是jQuery进行AJAX请求时方法模板：

$.ajax({
type: “get”,
url: “”,
data : {},
beforeSend : function(){
},
success : function(data){
},
complete : function(){
}
});

关于$.ajax()方法的使用，不是明河写这篇文章的目的，今天明河主要讲解当进行AJAX请求时整个完整的事件流程。

jquery的AJAX方法的全部全局事件：

ajaxStart：ajax请求开始前
ajaxSend：ajax请求时
ajaxSuccess：ajax获取数据后
ajaxComplete：ajax请求完成时
ajaxError：ajax请求发生错误后
ajaxStop：ajax请求停止后

当你使用jquery的ajax方法,不管是$.ajax()、$.get()、$.load()、$.getJSON()等都会默认触发全局事件，只是通常不绑定全局事件，但实际上这些全局事件非常有用处。

ajax方法的全局事件的用处

ajax全局事件，有个典型的应用场合：
你的页面存在多个甚至为数不少的ajax请求，但是这些ajax请求都有相同的消息机制。ajax请求开始前显示一个提示框，提示“正在读取数据“；ajax请求成功时提示框显示“数据获取成功”；ajax请求结束后隐藏提示框。
不使用全局事件的做法是：
给$.ajax()加上beforeSend、success、complete回调函数，在回调函数中加上处理提示框。
使用全局事件的做法是：

$(document).ajaxStart(onStart)
.ajaxComplete(onComplete)
.ajaxSuccess(onSuccess);
function onStart(event) {
//…..
}
function onComplete(event, xhr, settings) {
//…..
}
function onSuccess(event, xhr, settings) {
//…..
}

ajax方法完整事件流

为了更直观的说明，明河使用Axure画了二个流程图，画的不好还请见谅，O(∩_∩)O

AJAX方法完整事件流演示

为了让朋友更容易理解整个事件流，明河做了以下demo。

Feed enhanced by Better Feed from Ozh

使用框架建立富联网应用

seasun — Tue, 27 Jul 2010 13:41:38 +0000

JavaScript库，ICEfaces，Adobe Flash，微软Silverlight，现在还有HTML5，全球性的网络支配地位的竞争已经进入了崭新的时代——一个富网络应用（简称RIA，中文也有叫富互联网应用）的时代。本文目的是界定什么是RIA，解释为何网络已经开始向RIA靠拢，探索今天已经存在的不同RIA框架，对每个框架作出一些优点和缺点的概述，并讨论这些新技术在未来将是怎么样的生存态。

RIA是何物?

所谓RIA，或者说富网络网应用，就是指可以像桌面程序一样操作的网络应用。在RIA冒出来之前，大多数的网络应用都是静态的页面构建的。

Sumo Paint 是一个基于Flash的RIA, 具有像Photoshop一样的图形编辑功能。

跟桌面应用程序不同，任何一个网页的互动往往需要重新加载一个全新的页面。而桌面应用程序，在另一方面，有很多更好的用户交互性，因为所有处理都是在用户的机器本身，所以能给以更加无缝的用户体验。

因此，软件开发商开始问自己，“我们产品应该是一个桌面应用程序还是一个Web应用程序呢？”

这一直是一个公平的问题，因为这两种类型的应用程序都具有各自优点和缺点。

桌面应用程序具有流畅的用户交互性，但软件是售出去的，会遇到发布和更新的问题。

Web应用程序，另一方面，很容易从网上获得，摆脱相关的软件发布和更新的问题，但在用户交互性体验非常差。

因此，怎么样才能两全其美呢？

RIA就是两全其美。RIA通过网络发布，有非常丰富的用户交互。得益于Ajax的出现，一个无需刷新就可以发送服务器请求的网络应用的方法，新技术出现，加入了RIA的运动。

基于这些技术出现了一些框架，帮助开发人员构建和部署富网络应用程序，如JavaScript库，ICEfaces，Adobe Flash 4（Flex 3前身），微软Silverlight，以及HTML5的。

让我们来一个个探讨RIA的框架。

网络应用的JavaScript库

JavaScript库，例如 jQuery和MooTools 是首批技术之一，可以真正的帮助部署流畅和互动的富网络应用。它们提供通过杠杆客户端脚本来处理前端接口功能的RIA框架。它们是一些基本的 Javascript文件，由一些有用的，经过跨浏览器测试功能的集成。可以使用Ajax，以及处理普通的基于用户驱动事件的交互，如显示和隐藏内容。

目前最流行的有jQuery（尤其是使用jQuery UI），MooTools，YIU（雅虎用户界面库），以及EXTJS。这些库包括RIA组件，如网格，图表和复杂的表单元素，以及处理Ajax的工具。最引人入胜的是，大部分网络开发的JavaScript库都是开源的。

如果你不想购买一个集成开发环境（IDE），但仍希望在自己的网站绚丽而专业的RIA功能，JavaScript库是一个很不错的选择。

使用JavaScript库的网站有Google，Digg，雅虎，亚马逊，微软，Twitter，以及Best Buy。

ICEfaces

ICEfaces是标准的JavaServer Faces（JSF）的框架的扩展，旨在去除方程中的JavaScript从而简化程序员的工作流程。换句话说，ICEfaces通过Java应用接口为你处理了所有的JavaScript/Ajax。通过删除这些自定义JavaScript函数的复杂引入，大大简化了创建富网络应用的任务。

如果你的团队主要成员是Java开发人员，或者如果你的网络应用程序不需要其它ICEfaces没有的复杂组件，又或者如果你的网络应用程序是事件驱动的，那么使用ICEfaces是很好的选择。如果你的网路应用是事件驱动的，请确定你已经了解ICEfaces不提供真正的“服务器推”技术的，HTML5，Flash Builder 4和Silverlight都支持的。不过，相应地ICEfaces使用长轮询的方法来模拟服务器推技术。

使用ICEfaces的网站有波音，美国航空航天局，联合太平洋公司，T-Mobile，以及美国银行。

Adobe Flash Builder 4

Flash已经出现了很长一段时间，但是用使用Flash来构建整个网络应用十分麻烦，直到Flex的引进，这是Flash的一个扩展，提供RIA网络组件。

Adobe Flash Builder 4最令人兴奋的是它的跨平台和跨浏览器特性，允许程序在所有的操作系统和所有的浏览器上以同样的方式运行。相比于JavaScript，浏览器有不同的 JavaScript引擎管理和处理的代码，而Adobe的Flash只有一个引擎，用户通过Adobe Flash浏览器插件来安装（通常的情况是他们有了）。

Flash Builder 4 应用之所以能如此，因为它们已经嵌入到HTML页面，这意味着浏览器本身并没有对应用程序的性能有什么影响。这意味着你如果你乐意，你还可以在IE6上运行最复杂的网络应用程序。（这当然简单，因为Flash插件/引擎经常会更新，因此只是稍微依赖于用户插件的版本）。

这些应用通常是伴随着服务器端处理，比如一个Java后端处理，而且需要Flash Builder 4IDE做开发。

如果你的团队主要是Java开发（因为搭配Java运作良好），或者你的应用程序使用事件驱动的构架，可以选择Adobe Flash Builder 4。

使用Flash作为网络应用程序的网站有Mint.com，Flickr和Hyundai。

Silverlight

Silverlight是基本上微软版本的Adobe Flex /的Adobe Flash。现在已获得了一些吸引力，但似乎并没有达到的Adobe Flash的普及程度。

Silverlight应用程序明显约束于.NET的后端，因为它是微软的产品。这意味着，你不得不 Silverlight /.NET 和Adobe Flex / [一些服务器端脚本，如PHP] 之间整合考虑。

如果你的网络应用需要复杂的图形，或者如果你的团队主要是.NET开发人员，又或者如果你的应用程序使用事件驱动的架构，那你可以选择 Silverlight。

使用Silverlight的网站，如Netflix。

HTML5

HTML5的是RIA运动中的最新发展。 HTML5，在本质上是HTML4，JavaScript，CSS，Javascript代码库以及Falsh的最优合并，利用API模型成为一个单一规范。 HTML5的是一个开放的技术，这意味着不会有单一的主管团体如Flash的Adobe或Silverlight的微软。

由于HTML5规范还没有完成，IE9尚未发布，要建立产品级的网络应用，你还需要等待一点点时间。

目前，所有主要浏览器除了IE8都支持HTML5。由于IE8的浏览器市场占据了主要部分，在IE9发布之前，HTML5实在难以成为主流。

一旦HTML5得到广泛支持，如果你不想购买和学习的IDE（像Flex和Silverlight框架所必需的），如果你的应用程序使用事件驱动架构，或者如果你喜欢使用内置的HTML功能和JavaScript API 功能而不是使用第三方JavaScript库，那么使用HTML是很好的选择。

尽管HTML5中可以很好地处理图形，但是使用Flash和Silverlight来处理复杂图形和动画在目前仍然容易/更快的选择。

RIA 的未来

HTML5应用程序是互联网的未来吗？不完全是。只要那些创造性和创新性的网络开发人员还在不断的去创造一些特别的东西，就会总是出现一些新技术可以造出些HTML5或其他任何网络技术无法完成的神奇的东西。

JavaScript库，ICEfaces，Flash，Silverlight和HTML5的存在首要原因是其创造力和创新性。未来的网络将会由许多共存的技术组成，就像现在。

Feed enhanced by Better Feed from Ozh

Ajax跨域访问解决方案

seasun — Mon, 12 Jul 2010 13:54:07 +0000

ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互，而浏览器出于安全考虑，不允许js代码进行跨域操作，所以就诞生了很多跨域的解决方案。当本域和子域间进行访问时最简单的就是设置document.domain，当不同域的访问，大概有下列方法：

1.web端代理的方式，即用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面，由该页面代替用户页面完成交互，从而返回合适的结果。

2.iframe，解决方案就是用window.location对象的hash属性，利用JS改变hash值网页不会刷新，可以这样实现通过JS访问hash值来做到通信，大体就是AB网站各嵌入一个对方网站的iframe，然后通过连续不断的监听hash值的变化来进行通信。比如A网站通过改变B网站iframe的hash后，B网站监听到hash的变化后就进行处理，这种方式需要开发者可以控制两个网站的代码。

3.通过script标签来请求，原理就是在本域内的A内生成一个JS标签，它的SRC指向请求的另外一个域的某个页面B，这个src里面通常会加一个A页面定义好的回调函数，B返回数据即可，可以直接返回调用这个回调函数，这种跨域的通信方式被称为JSONP，此方案存在的缺陷是， script的src属性完成该调用时采取的方式时get方式，如果请求时传递的字符串过大时，可能会无法正常运行。

4.window.name，window.name是一种解决跨域数据传输的新技术，通过在iframe中加载一个跨域的HTML文件，并且在HTML文件中设置window.name的值为需要传给接受者的数据，接收者就可以取得到window.name的值并且返回，比较关键的是同源策略的影响对location的控制不受限制，所以需要加载一个代理的页面来让发送页面读取window.name.

5.使用flash，原理是JavaScript将数据提交给本域下的 Flash，通过 Flash 中转去访问其他域的接口，只需要其他域的根目录下有一个crossdomain.xml文件，文件中设置允许所有域名或允许本域访问即可。

http://www.sitepen.com/blog/2008/07/22/windowname-transport/

http://www.planabc.net/2008/09/01/window_name_transport/

http://hikejun.com/demo/windowname/demo_windowname.html

http://blog.s135.com/ajaxcdr/

Feed enhanced by Better Feed from Ozh

10个Google 推动的 AJAX 库 API

seasun — Fri, 21 May 2010 14:02:22 +0000

我们知道，Google在奉行他们一贯不作恶的行为之外，也在为互联网的发展起着不可估量的促进作用。作为一名web开发者，想必在您碰到无法解决的问题时，肯定会想到从http://code.google.com/ 去寻找解决方案，在使用的同时，不知您是否有发现，在页面的左边导航栏中标识有“开发人员资源”栏目。遵循这以导航，您会发现API 和开发人员工具链接。进去之后在Google所提供的产品中有标识AJAX菜单。如下图所示：

从图中圈出来的按钮点进去之后，您就会发现AJAX 库 API栏目。这里有Google支持的 AJAX 库 API所有栏目。
这里给大家列出的是比较常用的 AJAX 库 API 外链地址。

jquery

jquery UI

Chrome Frame

swfobject

mootools

Yahoo! UI

Prototype

Ext.JS

Dojo

Scriptaculous

Feed enhanced by Better Feed from Ozh

AJAX是如何工作的: AJAX的10个实践运用

seasun — Wed, 08 Jul 2009 13:32:06 +0000

近几年，Ajax已变得越来越流行了，这使得网络应用程序变得越来越像是桌面应用程序。Ajax可以提供很多其它程序无法完成的额外的功能。

什么是 AJAX? 它是怎么工作的?

什么是Ajax？它是如何运作的？

Ajax是异步JavaScript脚本和 XML（Asynchronous JavaScript and XML）的缩写，用来使浏览器端应用程序和服务器端进行通信。在Ajax出现以前，浏览器端应用程序是无法直接和服务器进行通信的，只能使用刷新和加载页面的方法来实现。而有了Ajax之后，浏览器和服务器端就可以自由通信了。

以下简述Ajax脚本的运行路径：

行为引发事件，如用户单击按钮；
Ajax响应该事件，并使用XML向服务器发送请求；
服务器端程序（PHP、ASP或其他）接收到Ajax发来的数据并进行处理，从数据库中调用数据等；
服务器端再使用XML向客户端返回数据；
另外一个JavaScript函数，通常称之为回调函数，接收到服务器端发来的数据并据此更新页面。

本文将讨论我们如何通过不同的脚本来实现各种各样的功能。

1、登录表单

按传统的做法，用户登录时会被定向到一个登录页面，随后再返回登录前的页面。使用Ajax后，用户可以直接在原页面输入用户名和密码。Ajax会将这些信息发送给服务器进行验证。服务器会返回数据告知浏览器是否验证通过，浏览器可相应地更新页面。Digg就有这样的登录表单。

示例：Digg.com （页面顶端）
插件：jQuery Form Plugin

2、自动完成

谷歌是最早开始使用Ajax的公司之一，其搜索建议功能则是最先使用Ajax的地方，并开发了第一个自动完成工具。在搜索框输入数据后，Ajax会从服务器端接受数据，找出数据库中存储的常用搜索关键字并进行提示。自动完成功能是非常有用的，当表单可以输入多个可能的值时，显示一个下拉列表框供用户选择，非常人性化。

示例：Google Search
插件：jq autocomplete

3、投票和排行

网页收藏站点如Digg、Reddit等往往会让用户来决定什么内容会放在首页，使用的方法便是投票。他们使用Ajax来实现这个功能，这样用户就能够方便快捷地表达自己的意见了。

示例：Reddit

4、使用用户内容更新

Twitter之所以流行的一大原因是其简单易用的界面。当用户发送了一个消息后，这条消息会立刻添加到用户的页面中，所有的相应内容都会进行更新。最近，Twitter开始使用Ajax对“热门话题”进行更新。每隔几秒，我们就可以知道大家在忙些什么、关注些什么，非常快速。

示例：Twitter

5、表单的提交和验证

表单永远是最麻烦的东西，但Ajax让它们变得友好起来。Ajax可以派很多用处，从上面提到的自动完成功能，再到现在的表单验证和提交。有些网站使用Ajax检查用户输入的数据是否达到了某些要求，如密码长度或者E-mail地址、URL地址是否合法等

示例：10 Cool jQuery Form Plugins

6、聊天室和即时消息

在线聊天室在IRC之后多年才出现的只用应用。如今，聊天室和即时消息可以完全由浏览器来处理。在聊天室或即时消息应用程序中，Ajax通常要做两件事情，可以想象一下你的耳朵和嘴巴。你的嘴巴要告诉服务器你发送了一条消息，而耳朵则要保持和服务器的联系，以便接受对伐发送的消息，并显示在页面上

示例：Meebo Chat (使用了Ajax）
插件：GMail/Facebook Style Chat Script

7、灵巧的用户界面

Ajax的一个常规应用就是创建整洁、灵巧的用户界面，使用户能在一个页面中做更多的事情。它的好处体现在两个地方：首先，它能使应用程序的响应更为快速，操作更为简单；其次，它能减少浏览器向服务器的请求次数，从而减少带宽和加载时间。有一个免费的上传服务，名为Drop.io，使用的就是这项技术。而谷歌则更是把这项应用发挥到了极致，使用Ajax开发出了类桌面应用程序，如谷歌文档、谷歌地图等。

参考：jQuery UI Library

8、插件

Ajax不仅可以调用本地资源，还能够和其他服务器进行通信。像Wordpress之类的CMS（Content Management System 内容管理系统），它们的插件就是用Ajax实现的。又如Google Adsense，用的也是这样的方法。

示例：Google Adsense
插件：将外部内容加载到div中

9、使用Lightbox代替弹出窗口

弹出窗口拦截程序越来越流行了，原因当然是弹出窗口实在是很烦人。而Lightbox是在浏览器窗口内部显示的，所以拦截程序不能拿它怎么样。而且 Lightbox也不会让用户感到多厌烦，所以有些人就用它来作广告，如Darren Rowe的ProBlogger.com。Lightbox同样可以用来做登录表单或注册表单，比如匿名用户在Digg上投票时会被要求进行注册。

示例：Logo Sauce
插件：Lightbox Plugin

10、Ajax和Flash的结合

很少有人会拿Ajax和Flash和一起使用，但是这样做却能起到非常好的效果。Flash游戏网站Kongregate使用了这项技术，效果很棒。通过使用他们的API，用户可以在游戏中赢取各种“徽章”，并使用Ajax将数据传输给服务器，更新用户的信息。

示例：Kongregate
插件：jQuery Flash Plugin

Feed enhanced by Better Feed from Ozh

XmlHttpRequest的串行异步

seasun — Tue, 23 Jun 2009 04:32:03 +0000

默认情况下，我们总是喜欢用异步XHR请求来提高Web应用的响应性。然而，你考虑过如何让你的XHR请求串行调用吗？毕竟在有些情况下，XHR请求必须按照顺序调用，比如B的调用依赖于A的结果。

你可以使用同步Ajax请求，但是那会暂时锁住浏览器。Thibaud Lopez Schneider在一篇文章中说明了同步Ajax和

串行发生的异步请求

之间的区别。

他创建了一个网站asynchronous.me用来生成简单的示例代码。如果查看串行异步XHR的示例代码的话，你会发现它其实很简单，只是把下一个方法作为上一个方法的回调方法。

function run() {
    request1(function () {
        request2(function () {
            request3(function () {
                done();
            });
        });
    });
}
function request1(callback1) {
    // request 1
    print("request1");
    var xmlHttpRequest1 = new XMLHttpRequest();
    xmlHttpRequest1.open("GET", "something1?hello1", true);
    xmlHttpRequest1.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            // response 1
            print("response1=" + this.responseText);
            // continue execution in the callback
            if (callback1) {
                callback1();
            }
        }
    };
    xmlHttpRequest1.send();
}
function request2(callback2) {
    // request 2
    print("request2");
    var xmlHttpRequest2 = new XMLHttpRequest();
    xmlHttpRequest2.open("GET", "something2?hello2", true);
    xmlHttpRequest2.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            // response 2
            print("response2=" + this.responseText);
            // continue execution in the callback
            if (callback2) {
                callback2();
            }
        }
    };
    xmlHttpRequest2.send();
}
function request3(callback3) {
    // request 3
    print("request3");
    var xmlHttpRequest3 = new XMLHttpRequest();
    xmlHttpRequest3.open("GET", "something3?hello3", true);
    xmlHttpRequest3.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            // response 3
            print("response3=" + this.responseText);
            // continue execution in the callback
            if (callback3) {
                callback3();
            }
        }
    };
    xmlHttpRequest3.send();
}
function done() {
    // end
    print("done");
}

你可以把使用回调的方法与使用Dojo Deferred的进行比较：

    function run() {
        request1().addCallback(request2).addCallback(request3).addCallback(done);
    }
    function request1() {
        // request 1
        print("request1");
        var deferred = dojo.xhrGet({
            url: "something1?hello1",
            load: function (response) {
                // response 1
                print("response1=" + response);
            }
        });
        return deferred;
    }
    function request2() {
        // request 2
        print("request2");
        var deferred = dojo.xhrGet({
            url: "something2?hello2",
            load: function (response) {
                // response 2
                print("response2=" + response);
            }
        });
        return deferred;
    }
    function request3() {
        // request 3
        print("request3");
        var deferred = dojo.xhrGet({
            url: "something3?hello3",
            load: function (response) {
                // response 3
                print("response3=" + response);
            }
        });
        return deferred;
    }
    function done() {
        // end
        print("done");
    }

Feed enhanced by Better Feed from Ozh

10个关于Ajax的IT人需要知道的事情

seasun — Sun, 21 Jun 2009 08:54:03 +0000

任何新网络技术的引进都会不同方面的影响网络的基础建设，小到微不足道，大到甚至地球破碎。在当今网络中，Ajax是一个更具有破坏性的新网络技术。为了减少你对将来网络的吃惊，下面列出了10项你需要熟知的关于Ajax的知识。

让我们看一组幻灯片，对于Ajax，什么是每一个网络专家都需要知道的。

1）Ajax是一个想法，而不仅仅是一个缩略词

尽管Ajax通常被拼写为“异步JavaScript和XML”，但这个全称不完全合适，因为它过分简化了这门技术的历史和实现核心。更确切地，Ajax包含了一种思想，这种思想认为网络应用可以退出传统的以服务器端为中心的重复发送-等待循环方式来建立。Ajax使网络应用转向更有影响的、连续的，而且渐进式的更新。Ajax为用户优先的体验网络应用提供了更丰富、更好的交互性。这个优势也意味着需要网络专家更多的网络控制和安全监视，潜在地，服务器和网络改造也是这样。

2）这确实都与JavaScript有关

Ajax的应用是用JavaScript写的，通常基于XMLHttpRequest对象来通信，这个XMLHttpRequest对象是通过万维网协议过程进行的。由于像大多的网络技术一样，它现在只是一个特定的工业标准，因此在不同浏览器中实现的显著差别还是可以找到的。不管有没有广泛的工业支持，它也可能使用其它的数据传输机制，包括传统的框架和image-cookie方法，以及Flash或java中二进制桥的使用。

无论开发者使用哪种传输方法，Ajax都将JavaScript在网络应用中提升到了一个前所未有的重要地位。现在JavaScript对重要的数据收集、数据通信、消费机制都有影响，所以它不再被认为是没有重大作用的二级网络技术。

认为JavaScript技术有毒的开发者们试图使用工具或框架产生其它的语言如java（如谷歌网络工具）来避免使用这种语言，或者在组件或标签后隐藏代码（例如.Net和Ruby）。然而最终，JavaScript仍会在应用中。最好是理解并学会直接使用它，因为只要你使用Ajax，你就使用了很多的JavaScript。

Ajax是内嵌在网络中的，所以坏代码对网络管理员和开发者来说意味着大量的故障修理，底线是鼓励好的、有网络意识的编码。用于其他语言的具有同样组织的“规则和工具”——代码规范、测试机制和源码控制也必须应用于JavaScript，以此来确保Ajax的可支持性和健壮性。

3）XML是不需要的

尽管缩略词中有“x”，但是Ajax并不需要XML。XMLHttpRequest对象可以传输任意的文本格式。对于很多Ajax开发者来说，作为一种数据格式JavaScript对象符号甚至是纯JavaScript代码段更有意义，因为JavaScript是消费环境。有的开发者喜欢以纯文本或HTML代码段做为网页的输入，也有的使用像不太著名的YAML标记语言或逗号分隔值这样的数据格式。

当然，使用XML是可能的也是应当的，只是不是必需的。XMLHttpRequest对象不支持使用二进制格式上传文件，但是考虑到Flash使用一种叫做活动消息格式（Action Message Format）的二机制格式，所以在Ajax应用中也可能很快地找到类似的性质。你应该知道网络中的哪种机制正在被网络淘汰，因为淘汰的不总是XML，也要确保能够分析出这些机制的性能和安全性。

4）为HTTP请求的增加做好准备

对网络管理员来说，支持Ajax应用最明显的问题是结构化编程方式使网络应用的使用从只有几百KB的某些不频繁响应的程序组变为更多连续的小型HTTP请求交换。这意味着网络绑定的网页和应用服务器会发现他们比以前更繁忙。Ajax将为服务器和网络应用做些什么取决于这些应用是如何建立的——开发者们一定要明白他们使用的应用间的网络冲突。

5）仔细地优化Ajax请求

网络应用应该坚持发送更少的数据、更少的发送次数的网络传输规则。但是这也不是说这种规则被开发者们广泛地遵循。对网络来说很幸运的是， Ajax响应的HTTP压缩可以减少响应尺寸，并且在所有现代的浏览器中都支持。但是由于动态压缩的额外开销，如果响应相对较小速度也不会改变太多。这也就是说，对网络管理员来说在服务器端打开压缩机制是明智的，但是需要明白的是，使用Ajax应用不会比使用传统的网络应用获得的更多。

我们一般使用缓存来减少发送数据的次数。但是，尽管由浏览器提供的特定假设不会在同一段时间里再次获取URL，大多数的Ajax实现还是公开敌视缓存。许多Ajax开发人员不是使用缓存，而是通过头设置或URL的唯一性来积极地战胜缓存。

用JavaScript写的客户端Ajax缓存使得对付缓存成为可能，但是大多数的Ajax库不执行这样的功能。网络专家应该为开发者们展示缓存的好处，因为Ajax使用缓存的好处要比使用压缩多得多。

6）认识到两个连接限制

Ajax应用向同一个URL发送两个同步的连接是受HTTP限制的。这是HTTP协议的设计方式，不是什么浏览器问题或浏览器限制。好消息是，它使许多Ajax开发者远离了服务器的突然崩溃，尽管微软的Internet Explorer 8被认为在这种限制之外运行得很好。非正式的Ajax应用可能是麻烦的，随着浏览器不断地改变规则，网络管理员们应该随时关注提出请求的数量，跟应用开发者们一起避免像快速投票（fast polling）或长期持有连接这样的设计模式。

7）小心响应顺序

在传统的网络应用中，TCP/IP通信协议的网络影响——如HTTP响应接收的缺乏秩序，通常不被开发者和使用者所注意。基础单元、HTML文件在其他对象之前被接收，接着就触发请求。任何接下来的请求都触发整个新的基础文件，从而保证顺序。Ajax将这种固有的顺序摒除了，但是，由于这样，基于一定顺序的应用需要一个响应队列。但Ajax框架并不始终理解这个相关网络。因此，再一次地确认Ajax应用的开发者们了解这些相关的网络级别。

8）理解“层8”纠错的影响

多年来，用户们一直都是通过重载页面或按“后退按钮”来纠正网络传输质量。简而言之，用户这样做有助于减轻网络问题，因为错误一般发生在预期的页面绘制之间。但是，通过Ajax应用错误不再那么明显。可糟糕的是，由于简单的、动画的GIF旋转循环提供的正确的请求状态信息很少，用户经常将错误误传。

开发者们很烦恼，因为许多库在认识到发生了超时时不再响应，一定发生重试，而且服务器错误和数据错误会突然出现。因为JavaScript检测显示的通信和代码错误很少出现在客户端，所以（使用户）无忧的无知是一种规范。为了使管理员正确地使用Ajax，更多的应用级监控是必需的。

9）旧的安全威胁被二次曝光

如果你听信专家的，Ajax可能会显现得产生更多的攻击页面，但是事实是它不会比传统的网络应用开发环境更不安全，因为传送给可信任的服务器的HTTP输入——头消息、检索字符串和消息体是一样的。如果在你的网络开发组可信任的客户端代码和输入数据不被暗地里禁止，那么Ajax将会使事情朝着那个方向推进。

跨站点脚本（XSS）不是在Ajax中的一个新的脆弱点，它只是在JavaScript中更常见，尤其当应用允许使用规定（state）数据时。

跨站点请求伪造物也不是在Ajax中的新现象，但是如果应用开发者们不适当地检查在Ajax应用中的HTTP 引用（原文如此）头和管理session，将是为伪造物们开了门，尽管可能现在更糟糕了。

黑客，像开发者们一样，现在更感兴趣于使用和滥用增加了潜在漏洞的JavaScript。网络专家们应该确定开发者们意识到了即使客户端代码在适当的位置混乱也可能被利用，所以不管是不是Ajax数据输入始终都要被过滤和杀毒。

10)遵守相同的起始地址做为保护

在安全的积极方面，JavaScript的SOP（同一起始地址策略）被完全地强迫应用在基于XMLHttpRequest的Ajax应用中。这个策略确保了脚本不能跟自己发行的以外的域进行通话。从开发者的观点，这也是让人非常烦恼的，因为这意味着来自ajaxref.com的网页服务不能跟来自www.ajaxref.com的URL进行通话，尽管这是同一台服务器上的，但它们不是同一个域。DNS匹配跟这个没关系，这是用于SOP的字符串检查。

SOP也会严重的束缚开发者在客户端努力进行网络服务的能力。显然，最好的方法是在服务器端使用代理来响应发送给其他服务器的请求并将这些结果组合起来。但是许多Ajax开发者们试图打破这个同一起始地址的限制。使用

Feed enhanced by Better Feed from Ozh

简单的Ajax实例

seasun — Wed, 03 Jun 2009 01:51:10 +0000

Ajax 是一种可以通过Javascript, DHTML and the XMLHttpRequest 来发送GET或POST请求，在数据返回时不必重新载入页面。下面是一个非常简单的Ajax例子，发送一个请求，打印出请求的字符串和远程用户的IP地址。

简单的Ajax演示 (请参考原文演示: http://www.degraeve.com/reference/simple-ajax-example.php)

Html 页面

这个HTML页面提供了3个JavaScript函数，通过执行XMLHttpRequest来更新HTML页面.(AJAX调用)



Simple Ajax Example




  word:

CGI 脚本

这个CGI脚本是用来应答HTML页面的JavaScript的请求。 CGI脚本可以通过简单的Python, Puby, PHP, C, Perl 等来实现。
#!/usr/bin/perl -w
use CGI;

$query = new CGI;

$secretword = $query->param(‘w’);
$remotehost = $query->remote_host();

print $query->header;
print “

The secret word is $secretword and your IP is $remotehost

Feed enhanced by Better Feed from Ozh

Google AJAX Libraries API

seasun — Wed, 27 May 2009 09:17:59 +0000

什么是 AJAX 库 API？

AJAX 库 API 是一种内容分布网络，可加载最受欢迎的开源 JavaScript 库的架构。通过使用 Google AJAX API 加载程序的 google.load() 方法，您的应用程序能够迅速从全球任何位置访问不断增长的、最受欢迎的 JavaScript 开源库列表，包括：

Google 就每个库的利益直接与关键相关人员配合，并在最新稳定版本发布时接受这些版本。一旦我们托管给定库的版本，我们承诺无限期地托管该版本。

AJAX 库 API 在使用库集合的同时消除了用 JavaScript 开发混搭的不便之处。我们消除了托管库的不便之处、正确地设置缓存标头、与最新错误修正日期保持一致等。

Feed enhanced by Better Feed from Ozh

jQuery与Extjs的Ajax的跨域访问

seasun — Wed, 20 May 2009 04:37:38 +0000

jquery的代码:

Js代码

Extjs的代码:

Js代码

ss = new Ext.data.ScriptTagProxy({
//url: ’http://10.128.3.104/edi/rest/GetBillCaseInfo’,
url: ‘testjson.do’,
callbackParam: “_callback”,
headers: { ‘Authorization’: ‘Basic YWRtaW46YWRtaW4xMjM=’}
});
ss.load({‘_out’: ‘json’},
new Ext.data.JsonReader({root:“ROWSET.ROW”},
[{name: 'CaseCode', mapping: 'CaseCode'},
{name: 'CaseName', mapping: 'CaseName'}]),
function(recordsBlock, arg, isok) {
alert(Ext.encode(recordsBlock));
alert(Ext.encode(recordsBlock.records[0].data));
}
);
Ext.Ajax.request({
url: ‘http://10.128.3.104/edi/rest/GetBillCaseInfo’,
//url: ’testjson.do’,
scriptTag: true,
success: function(req) {
alert(req.responseText);
},
failure: function(req) {
alert(req.responseText);
},
headers: { ‘Authorization’: ‘Basic YWRtaW46YWRtaW4xMjM=’},
params: { _out: ‘json’ }
});

      ss = new Ext.data.ScriptTagProxy({
        //url: 'http://10.128.3.104/edi/rest/GetBillCaseInfo',
        url: 'testjson.do',
        callbackParam: "_callback",
        headers: { 'Authorization': 'Basic YWRtaW46YWRtaW4xMjM='}
      });
      ss.load({'_out': 'json'},
              new Ext.data.JsonReader({root:"ROWSET.ROW"},
                      [{name: 'CaseCode', mapping: 'CaseCode'},
                        {name: 'CaseName', mapping: 'CaseName'}]),
              function(recordsBlock, arg, isok) {
                alert(Ext.encode(recordsBlock));
                alert(Ext.encode(recordsBlock.records[0].data));
              }
              );

      Ext.Ajax.request({
        url: 'http://10.128.3.104/edi/rest/GetBillCaseInfo',
        //url: 'testjson.do',
        scriptTag: true,
        success: function(req) {
          alert(req.responseText);
        },
        failure: function(req) {
          alert(req.responseText);
        },
        headers: { 'Authorization': 'Basic YWRtaW46YWRtaW4xMjM='},
        params: { _out: 'json' }
      });

注意:无论是jQuery还是Extjs都不能发送自定义HTTP的信息,因为他们都是通过动态生成标签的方式来实现跨域的访问!

Feed enhanced by Better Feed from Ozh

ajax与json配合使用最简单实现

seasun — Thu, 09 Apr 2009 04:06:55 +0000

//ajax声明
var xmlHttp; function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
} else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
//javascript调用执行back()方法启动
ajax function back() {
var url=”/websys/main/actionurl.do?paraname=123″; createXMLHttpRequest(); xmlHttp.open(“GET”, url); xmlHttp.onreadystatechange =callback; xmlHttp.send(null);
}
//回掉函数 function callback(){
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var resstr=xmlHttp.responseText;
var ress=eval(“(“+resstr+”)”);
if(ress.msg==false){
alert(ress.value);
}else{
alert(ress.value);
}
}
}
//后台action
public ActionForward execute(…….)
throws IOException {
String paravalue=rerquest.getParameter(“paraname”);
PrintWriter out=response.getWriter();
if(paravalue.equals(“123″)) {
out.print(“{msg:’success’,value:’oknow!’}”);
return null;
} else {
out.print(“{msg:error,value:’error!’}”);
}
return null;
}
return null;
}

Feed enhanced by Better Feed from Ozh

Ajax之XMLHTTP学习理解

seasun — Thu, 09 Apr 2009 03:04:55 +0000

在.JS文件或者网页中写入如下脚本

//定义XMLHttp实例
var xmlHttp;
function createXMLHttpRequest(){
//开始初始化XMLHttpRequest对象
if(window.ActiveXObject){
//IE浏览器
xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}else if(window.XMLHttpRequest){
//Mozilla浏览器
xmlHttp = new XMLHttpRequest();
}
if(xmlHttp){
xmlHttp.open(“GET”,url,false);
xmlHttp.onreadystatechange=function(){setState(greens,reds,contains)};
xmlHttp.send(null);
}
}
//回调函数举例
//返回的4种状态
function setState(greens,reds,contains){
var contains = document.getElementById(“contain”);
if(xmlHttp.readyState == 0){
contains.innerHTML = “正在初始化”;
}
if(xmlHttp.readyState == 1){
contains.innerHTML = “正在准备发送请求”;
}
if(xmlHttp.readyState == 2){
contains.innerHTML = “正在发送请求”;
}
if(xmlHttp.readyState == 3){
contains.innerHTML = “正在接收数据”;
}
if(xmlHttp.readyState == 4){
//信息已经成功返回，开始处理信息
if(xmlHttp.status == 200){
contains.innerHTML = xmlHttp.responstText; //返回值
}
}
}

DOM的一些详解

(1)设置
在从服务器返回数据的同时，还要进行设置，使浏览器不会在本地缓存结果，response.setHeader(“Cache-Control”,”no-cache”);response.setHeader(“pragma”,”no-cache”);
XMLHttpRequest对象提供２个可以用来访问服务器响应的属性，一个是responseText将响应提供一个串，结合HTML元素的innerHTML属性，非常有用． (document.getElementById(“results”).innerHTML=xmlHttp.responseText).一个是 responseXML将响应提供为一个XML对象．

(2)DOM元素的一些有用的属性
childNodes————————————–返回当前元素所有子元素的数组
firstChild ————————————–返回当前元素的第一个下级子元素
lastChild —————————————返回当前元素的最后一个子元素
nextSibling—————————————返回紧跟在当前元素后面的元素
nodeValue—————————————-指定表示元素值的读／写属性
parentNode ————————————–返回元素的父节点
previousSibling———————————-返回紧邻当前元素之前的元素

(3)用于遍历XML文档的DOM元素方法(document)
getElementById(id)—————————–获取有指定唯一ID属性值文档中的元素
getElementsByTagName(name)————–返回当前元素中有指定标记名的子元素的数组
hasChildNodes()——————————–返回一个布尔值，指定元素是否有子元素
getAttribute(name)——————————返回元素的属性值，属性由name指定

(4)动态创建内容时所用的W3C DOM属性和方法
document.createElement(tagName)———-文档对象上的createElement方法可以创建由tagName指定的元素
document.createTextNode(text)————–文档对象的createTextNode方法会创建一个包含静态文本的节点．
.appendChild(childNode)———该方法将指定的节点增加到当前元素的子节点列表．
.getAttribute(name)|.setAttribute(name,value)—————–获得和设置元素中name属性的值
.insertBefore(newNode,targetNode)—–这个方法将节点newNode作为当前元素的子节点插到targetNode元素前面。
.removeAttribute(name)—–这个方法从元素中删除属性name
.removeChild(childNode)—–这个方法从元素中删除子元素childNode
.replaceChild(newNode,oldNode)—–这个方法将节点oldNode替换为节点newNode
.hasChildNodes()这个方法返回一个布尔值，指示元素是否有子元素

XMLHttpRequest对象的一些典型方法

(1)、void open(String method,String url,boolean asynch);这个方法会建立对服务器的调用。
第一个参数表示要提供调用的特定方法(get,post,put)
第二个参数表示要提供所调用资源的url
第三个参数表示是异步(true)还是同步(false)
(2)、void send(content):这个方法会向具体服务器发出请求。可选参数会作为请求体的一部分发送。
(3)、void setRequestHeader(String header ,String value):这个方法为HTTP请求中一个给定的首部设置值
第一个参数表示要设置的首部。
第二个参数表示要在首部中放置的值。这个方法必须在调用open()之后才能调用。
XMLHttpRequest对象的一些典型属性：
(1)、onreadystatechange:每个状态改变时都会触发这个事件处理器，通常会调用一个javascript函数，用来处理返回时要调用的函数。
(2)、readyState:请求的状态。有5个值：0=未初始化，1=正在加载，2=已经加载，3=交互中，4=完成。
(3)、responseText:服务器的响应，表示为一个串
(4)、responseXML:服务器的响应，表示为一个XML，这个对象可以解析为一个DOM对象。
(5)、status:服务器的Http状态码(200对应ok，404对应Not Found(未找到))

Feed enhanced by Better Feed from Ozh

几种流行的AJAX框架jQuery,Mootools,Dojo,Ext JS的对比

seasun — Thu, 09 Apr 2009 01:49:06 +0000

AJAX是web20的基石，现在网上流行几种开源的AJAX框架，比如：jQuery,Mootools,Dojo,Ext JS等等，那么我们到底在什么情况下该使用那个框架？以下是一组摘抄的数据：

Ajaxian在2007年底对Ajax工具进行了调查，部分调查结果见下表（其中数字为调查者使用该工具的百分比，详细的请参见网页）：http://ajaxian.com/archives/2007-ajax-tools-usage-survey-results

Prototype	jQuery	Ext	Script.aculo.us	Mootools	YUI	JSON	Dojo	Backbase
34.1%	29.3%	22.5%	22.3%	14.3%	13%	12.9%	11.8%	8.3%

其中Prototype使用率最高，很大程度上是因为它是最早成熟的框架，很多以前在项目中采用，所以现在一直在用

让我们来看看选择AJAX框架的基础：

你的项目需求（即你需要哪些特性，例如是否要求做出精美的界面、特效或其它功能）

是否支持A等级的浏览器（IE, Firefox等）?

文档的质量：是否完善（包含教程，API，代码示例等）

框架的可扩展性如何？为框架写插件容易吗？

你是否喜欢它的API的风格？

能大多程度上统一你的JavaScript代码的风格？

框架大小（太大的框架导致用户下载时间的延长）

框架是否强迫你改变写HTML的方式（Dojo就是这样）？

代码执行速度：性能如何？

代码是否为模块化（Mootools为高度模块化）？代码可重用性如何？

一、jQuery

主页：http://jquery.com/

设计思想

简洁的思想：几乎所有操作都是以选择DOM元素（有强大的Selector）开始，然后是对其的操作（Chaining等特性）。

优点

小，压缩后代码只有20多k（无压缩代码94k）。

Selector和DOM操作的方便：jQuery的Selector与mootools的Element.Selectors.js比较，CSS Selector, XPath Selector（1.2后已删除）

Chaining：总是返回一个jQuery对象，可以连续操作。

文档的完整，易用性（每个API都有完整的例子，这是其它框架现在不能比的），而且网上还有很多其它的文档，书籍。

应用的广泛，包括google code也使用了jQuery。

使用jQuery的站点：http://docs.jquery.com/Sites_Using_jQuery

核心的开发团队和核心人员：John Resig等。

简洁和简短的语法，容易记。

可扩展性：有大量用户开发的插件可供使用（http://jquery.com/plugins/）

jQuery UI（http://jquery.com/plugins/，基于jQuery，但和核心的jQuery是独立的），不断发展中。

友好和活跃的社区：google groups: http://docs.jquery.com/Discussion

事件处理有很多方便的方法，如click，而不是单一的addEvent之类的。

缺点

由于设计思想是追求高效和简洁，没有面向对象的扩展。设计思路和Mootools不一样。

CSS Selector的速度稍微有些慢（但是现在速度已经大幅提高）

Mootools

主页：http://mootools.net/

设计思想

面向对象的设计思想。

优点

模块化，各模块代码非常独立，最小的核心只有8k，最大的优点是可选择使用哪些模块，用的时候只导入使用的模块即可，完整的也不到180k（没有压缩），压缩后不到70k。

语法的简洁，直观。

特效（Effects）：这一点比jQuery稍强，现在也正在开发Mootools UI（这应该是Ajax框架开发的一个趋势）。

代码写的优美，易阅读和修改。

文档的完整（最新的1.2beta的文档比以前更详细）。

活跃的社区：官网(http://forum.mootools.net/)，还有一个IRC。

性能：见：http://mootools.net/slickspeed/

缺点

修改了低层的一些类：如Array, String等，这也是设计思想的不同。

在DOM和CSS Selector上不如jQuery强大。

Dojo

主页：http://dojotoolkit.org/

优点

背后强大的支持：IBM、Sun、BEA等，这是非常重要的优势。

功能的强大，Full Stack的框架，扩展了DHTML的能力，例如：

支持与浏览器Back/Forward按钮的集成。

Dojo Offline，一个跨平台的离线存储API。

Chart组件，可以方便地在浏览器端生成图表。

基于SVG/VML的矢量图形库。

Google Maps、Yahoo! Maps组件，方便开发Mashup应用。

Comet支持，通过通用的Buyeux协议。

强大的UI（Dijit）。

面向对象的设计，统一的命名空间，包管理机制（The Package System and Custom Builds）

可扩展性。

缺点

复杂，学习曲线陡。

文档的极端不全，这是一个很大的问题。

API很多不稳定，各版本间改动较大，现在还不是一个成熟的框架。

侵入性太大，页面中大量使用dojo的属性，例如

6个你必须用到AJAX的地方与6个不必用到的地方

seasun — Tue, 07 Apr 2009 01:28:44 +0000

现在距离gmail改变大家对使用网页应用程序的方式,已经有一年多了。但是目前很多网页应用程序,并没有使用充满活力的Ajax的优势,来代替以前沉闷的html功能。

下面是当前网页应用程序应该出现的地方：

* 基于表单的交互

表单是很慢的，非常慢。尝试编辑位于del.icio.us上面的一个书签？点击编辑链接打开一个编辑书签的表单页面，然后编辑你的内容并点击提交按钮等待整个提交过程结束，最后返回上一页并向下滚动到你刚才编辑的书签那里查看内容是否已经正确更改。那AJAX呢？点击编辑链接马上开始更改标签内容，点击提交按钮开始异步传输标签编辑的内容并立即看到更改后的内容而无需重载整个页面。

* 深层树状导航

总而言之，带有深层树状导航的应用程序通常是一个噩梦。在大多数情况中简单平直的拓扑结构以及搜索/标记可以很好的工作。但是如果一个应用程序真正使用深层树状导航，使用JavaScript来管理拓扑ui(user interface用户接口)，则使用Ajax懒加载深层数据可以降低服务器的负载。举例来说，为了阅读一个只有一行的结果来加载整个一个新页面是非常耗时的。

* 实时用户对用户通讯

在一个允许用户创建实时讨论的信息公告系统中，迫使用户一次又一次的更新完页面看到答复是非常愚蠢的。回复应该是实时的，用户不应被迫总是去痴迷于刷新操作。即使是gmail这个已经对以前像hotmail/yahoo mail的收件箱刷新，刷新收件箱标记的操作有所改进，也并没有充分的使用Ajax的功能来提示有新邮件到达。

* 投票、是否选择、等级评价

如果Ajax提交过程没有一个协调的UI提示是非常糟糕的，通过使用Ajax来提交一个调查或是否选择可以减少提交过程等待的痛苦。通过减少点击的等待时间，Ajax应用程序变得越来越有交互性-如果要用40秒来提交一个投票，除非非常在意的话大多数人会选择放弃。如果只花1秒呢，非常大比例的人会乐于参加投票的。（我在Netflix versus有2008张电影投票在IMDb.com有210张电影投票）

* 过滤和复杂数据操作

应用一个过滤、按日期排序、按日期和姓名排序、打开或关闭过滤器等等。任何一种高交换型操作应该交给JavaScript来处理而不是通过向服务器来提交一系列的请求。在查找或者操作大量数据的时候带来的视图上的改变最多不会超过30秒，Ajax真的使这些操作加速了。

* 普通录入时的提示/自动补齐

一些软件/JavaScript是擅长于帮助用户完成键入相同的文字或可以预测的文字的工作的。在del.icio.us 和 Gmail 中该功能是非常有益的，可以用来快速增加标记/email等。

对于一个频繁使用的应用程序诸如网页邮件客户端或博客阅读器来说，用户有充足的时间来学习如何使用新的UI概念但是他们却无法接受一个非常缓慢的反应速度。这种应用为Ajax变的更加普及起到了一个完美的杠杆作用。随着用户使用频率的增加，更多的Ajax部件应该加强用户的使用体验。

但是对于网页应用程序来说，把每件事甚至任何事都用JavaScript来实现也是没有意义的。Ajax只是针对一些特定的环境才能带来显著的帮助。在Ajax出现之前网页应用程序已经可以工作的很好了并且目前在网页开发中Ajax还存在着许多的缺陷和缺点。就算不从服务器端取得一个异步的信息数据流一个平直的html网页日志也可以工作的很好。对于文档或文档之间的跳转来说，老旧的纯HTML仍然是最好的选择。简单或很少使用的应用程序就算不用JavaScript同样可以很好的工作。

下面是一些不应该用到Ajax的地方：

* 简单的表单

就算表单是Ajax技术的最大受益人，一个简单内容的表单，或提交订货单，或一次性的很少用到的表单都不应该使用以Ajax驱动的表单提交机制。总的来说，如果一个表单不是很长用，或已经工作的很好，那么就算使用Ajax也没有什么帮助。

* 搜索

实时搜索带来的痛苦要远大于他带来的帮助。这就是为什么Google Suggest还处于beta测试而并没有放在主页上的原因。在Start.com Live.com上搜索的时候你是不能使用返回按钮来查看上一次搜索或返回上一页的。或许还没有人来完成这项工作，但是完成这个工作应该是很困难的至少是不太明知的或者会因此带来更多的麻烦。（译注：现在已经有很多开源的框架可以实现历史记录功能）

* 基本导航

总的来说，使用Ajax为一个基础的网站/程序做导航是一个可怕的念头。谁会把用来使自己的程序变的更好的时间花在编写代码模仿浏览器的行为上面？在基础页面中导航的操作中JavaScript是没有用的。

* 替换大量的信息

Ajax可以不用整页刷新来动态更新页面中改变的一小部分。但是如果一页上的大部分内容都需要更新，那为什么不从服务器那里获得一个新页面呢？

* 显示操作

虽然看上去Ajax是一个纯UI技术，其实不是这样的。他实际上是一个数据同步、操作、传输的技术。要想得到一个稳定的干净的网页程序，不使用 Ajax/JavaScript来直接完成用户接口是明智的。JavaScript可以分散分布并简单的操作XHTML/HTML DOM，根据CSS规则来决定如何让UI显示数据。查看

这里（http://www.sourcelabs.com/blogs/ajb/2005/08/powering_javascript_ui_with_cs.html）

来查看如何使用CSS来替代JavaScript来控制数据的显示。

* 无用的网页小部件

滑块选择控件、拖拽控件、弹性控件（此处原文为bouncies，不知指为何物？）、鼠标样式、天气预报控件，这些小部件应该可以被更直接的控件代替或者为了整洁干脆整个去掉。为了选择一种颜色，也许滑块选择控件可以选择一个正确的阴影颜色，但是在一个商店中选择一个价格，使用滑块选择控件选到分这个单位对于用户来说有点过分

Feed enhanced by Better Feed from Ozh

Ajax之XMLHTTP学习理解

seasun — Tue, 31 Mar 2009 14:41:29 +0000

在.JS文件或者网页中写入如下脚本

DOM的一些详解

XMLHttpRequest对象的一些典型方法

Feed enhanced by Better Feed from Ozh

21个新奇漂亮的Ajax/CSS表格设计

seasun — Mon, 30 Mar 2009 15:21:22 +0000

翻译:PARAN

当谈到表格数据的设计时，没有太多的网页设计师会有太大的兴趣。今天我们已经收集了21个功能超大且看上去挺漂亮的Ajax/CSS表格设计，并且教你一些表格设计中所运用的技巧，例如表格数据的排序和过滤等。

OK，让我们来看一下这些表格:

1. Tablecloth

Tablecloth 由CSS Globe 开发，是一个轻巧易于使用的表格，简洁的将表格样式添加到你的HTML 表格元素中。

2. Ask the CSS Guy Table

Ask the CSS Guy Table教给我们要如何去创建能够清晰显出去资料之间的相关联系的表格，例如:点击一个表格元素时，将突了显示这个元素，并且在纵列和横列都显示出相关的类别关系。

#3. A CSS styled table version 2

Veerle Duoh 为我们展示了一个漂亮的表格设计，并教我们如何使用CSS来吸引用户的眼球。

#4. Sortable Table

Sortable Table 演示了如何按升序或降序排列以及如何过滤表格中的数据。

5. Row Locking with CSS and JavaScript

Css Guy再次对表格使用了聚焦高亮的效果，除非用户再次点击，否则表单数据将一直保持亮高。

他还给了我们另一个示例:another example to Lock rows with radios .

#6. Vertical scrolling tables

如果您有大量的表格数据，但却没有太大的空间来展示它，这可能是个比较好的方法:一个纯CSS的表格与固定的标题和页脚，以及滚动显示的内容。

7. Replicating a Tree table

这是一个使用HTML 和CSS 设计的树形状表格。

8 ) Paginate, sort and search a table with Ajax and Rails

这个表格提供了一个动态的界面，而不需要重新刷新整个页面。

9. Collapsible tables with DOM and CSS

此表格加上箭头形象的脚本提示，用来控制表格的伸展和收缩。

10. TableSorter plug-in for jQuery

它的主要特性包括多列排序，支持的rowspan和colspan属性以及许多其他功能。

11. Stripe your tables the OO way

使用了Javascript 为表格中的行进行颜色交替，并且添加了onmouseover 和onmouseout 事件，当鼠标点击时，切换背景颜色。

12. MooTools Table Row & Column highlighting

基于MooTools 框架，高亮显示鼠标悬停时的单元格所在的行和列。

13. CSS Table Gallery

93 styled tables是一个专门收集表格样式的站点，下面是来自一个表格样式的截图:

14. jQuery Table Filter

可以对数据进行各种不同的排序、过滤。

15. Sortable/Resizable/Editable TableKit

TableKit基于Prototype框架，专门收集各种HTML表格，可以利用Ajax实时的进行表格栏目大小、排序等编辑。

16. Make all your tables sortable

17. Zebra Tables

alistapart为我们提供了一个极好的例子，如何使用JavaScript和DOM的改变背景色风格，以突出显示单元格。

18. Standardista Table Sorting

Standardista Table Sorting 是一个Javascript模块，让您可以对HTML数据表的任何栏目进行排序。

19. GridView3 Example

20. Mootable

21. Drag & Drop Sortable Lists with JavaScript and CSS

可能还会有一些你更想寻找的详细资料，下面是一些相关的资源链接:

Feed enhanced by Better Feed from Ozh

我想网 » Ajax

跨域资源共享的10种方式

同源策略

单向跨域

JSONP

flash URLLoader

Access Control

window.name

server proxy

双向跨域

document.domain

FIM – Fragment Identitier Messaging

Flash LocalConnection

window.postMessage

Cross Frame

总结

HTML, JavaScript,CSS简述

HTML, JavaScript,CSS 等等，这可不是你妈口中的AJAX

10个强大的Ajax jQuery文件上传程序

开发移动 Web Ajax 应用

Recent News About WebKit

jQuery中的AJAX全局事件详解

jquery的AJAX方法的全部全局事件：

ajax方法的全局事件的用处

ajax方法完整事件流

AJAX方法完整事件流演示

使用框架建立富联网应用

Ajax跨域访问解决方案

10个Google 推动的 AJAX 库 API

jquery

jquery UI

Chrome Frame

swfobject

mootools

Yahoo! UI

Prototype

Ext.JS

Dojo

Scriptaculous

AJAX是如何工作的: AJAX的10个实践运用

XmlHttpRequest的串行异步

10个关于Ajax的IT人需要知道的事情

简单的Ajax实例

Html 页面

CGI 脚本

Google AJAX Libraries API

什么是 AJAX 库 API？

jQuery与Extjs的Ajax的跨域访问

ajax与json配合使用最简单实现

Ajax之XMLHTTP学习理解

几种流行的AJAX框架jQuery,Mootools,Dojo,Ext JS的对比

一、jQuery 主页：http://jquery.com/

Mootools 主页：http://mootools.net/

6个你必须用到AJAX的地方与6个不必用到的地方

Ajax之XMLHTTP学习理解

21个新奇漂亮的Ajax/CSS表格设计

1. Tablecloth

2. Ask the CSS Guy Table

#3. A CSS styled table version 2

#4. Sortable Table

5. Row Locking with CSS and JavaScript

#6. Vertical scrolling tables

7. Replicating a Tree table

10. TableSorter plug-in for jQuery

11. Stripe your tables the OO way

12. MooTools Table Row & Column highlighting

13. CSS Table Gallery

14. jQuery Table Filter

16. Make all your tables sortable

17. Zebra Tables

18. Standardista Table Sorting

19. GridView3 Example

20. Mootable

21. Drag & Drop Sortable Lists with JavaScript and CSS

一、jQuery

主页：http://jquery.com/

Mootools

主页：http://mootools.net/