读 Manning: Ajax in Action (Ajax实战)

http://www.manning.com/crane/

     

Dave Crane and Eric Pascarello with Darren James 著
ajaxcn.org 译

第一部分 重新思考Web应用

第1章 一种新的Web设计方法

1.1 为什么需要Ajax富客户端
1.2  Ajax的四个基本原则
1.3 真实世界中的Ajax富客户端
1.4 Ajax的替代方案
1.5 小结

第一章给人的感觉很好，没有什么深刻的理论，但是又觉得看过后有所启发，不像有些书籍开头部分就说些空洞无物、千遍一律的开场白。

首先我们为什么需要Ajax呢，用户体验。用户体验主要有两种，瞬态的和独占的。对于瞬态的应用，每天只是偶尔用一下，如果有个几秒钟的延迟应该还是可以忍受的，甚至有什么几分钟也能忍受，至少你可以去泡杯咖啡。可对于一个独占应用，你会一次性使用几个小时，我想大家都不能忍受在word中，每敲入一个字都要延迟1秒钟吧。先前的Web应用基本上是一种瞬态应用，点击一条链接，等待几秒钟，然后花几分钟或几小时阅读页面，然后在点击另一条链接，所以大家也习惯于这种模式，虽然有些不那么好，可也没什么致命性的问题。随着Web应用的内容越来越多，现代人的豹子脾气，先前的这种使用模式越来越不让人喜欢了。“网络延迟是导致实际应用的交互性糟糕的一个普遍原因，用户界面的开发者对于网络延迟只能做最坏的假设，要尽可能让用户界面与网络活动无关”。有点GUI编程常识的人都知道，多线程啊。让异步的线程在后台处理那些脏活累活，在GUI上给人以华丽的呈现。Ajax的A正是Asynchronous，异步的，这点应该是其核心之一。

Ajax的四个基本原则：浏览器中的是应用而不是内容；服务器交付的是数据而不是内容；用户交互变得流畅而连续；有纪律的严肃编程。

第2章 Ajax新手上路

2.1 Ajax的关键元素
2.2 用JavaScript改善用户体验
2.3 用CSS定义应用的外观
2.4 用DOM组织视图
2.5 使用XML技术异步加载数据
2.6 Ajax有何不同
2.7 小结
2.8 资源

常说Ajax是新瓶装老酒，因为Ajax不是一种单一的技术，而是四种技术的集合：JavaScript, CSS, DOM, XMLHttpRequest。CSS, DOM和JavaScript合在一起以前称为DHTML。JavaScript定义了业务规则和程序流程，应用程序使用XMLHttpRequest对象以后台方式从服务器获得数据，通过DOM和CSS来改变界面的外观（数据，表现，和程序逻辑的分离）。

JavaScript是一种弱类型的，解释型的，通用的脚本语言。

HTML标记定义了文档的结构，而不是外观。它同时也定义了文档中可以应用样式的位置，例如类名，唯一的ID，甚至是标签类型本身。

<link rel='stylesheet' type='text/css' href='window.css' />
<div class='contents'> ... </div>
<span id='my'>...</span>

通过使用DOM，可以采用编程方式操作文档的结构，在Ajax应用中，用户界面的更新主要是使用DOM来完成的。JavaScript通过全局变量document公开当前的Web页面的根节点。DOM中元素之间的关系可以看作是HTML清单的镜像，这种关系是双向的，修改DOM将会改变HTML标记。所有流行的Web浏览器的DOM元素都支持称为innerHTML的属性，允许以一种非常简单的方式为元素分配人意的内容。

var abc = document.getElementById('hello');
abc.className = 'declared';
abc.style.border = "solid green 2px";
var children = abc.childNodes;
var parent = abc.parentNode;
var xyz = getElementByTagName('div')'
var child1 = document.createElement('div');
var txtNode = document.createTextNode("hhh");
appendChild(child1);
el.innerHTML += "<div class='programmed'>" + text + "</div>";

最早尝试提供后台通信能力的是使用IFrame，而XMLHttpRequest对象提供了更加清晰和强大的功能，XMLHttpRequest对象并不是Web浏览器中DOM的标准扩展。

READY_STATE_UNINITIALIZED = 0
READY_STATE_LOADING = 1
READY_STATE_LOADED = 2
READY_STATE_INTERACTIVE = 3
READY_STATE_COMPLETE = 4

在Interactive状态，控制权返回用户界面。

令Ajax显得与众不同的地方不是它所使用的技术本身，而是通过使用这些技术所带来的交互模型。我们所习惯的传统Web交互模型并不适合用于独占式的应用，只有打破了这种交互模型，新的可能才会慢慢出现。

可以在两个层次上使用Ajax：开发基于Ajax的UI组件或嵌入在页面中的交互式组件（如Google Suggest, Map）；宿主应用，既可以容纳类似于应用的组件，也可以容纳类似于文档的组件（类似于一个桌面应用，如GMail）。有些不明白，何为应用的组件？何为文档的组件呢？