增强站点交互性 Ajax小部件鉴赏(1)(3)
在桌面应用程序中，就地编辑功能并不鲜见，但是到目前为止，这个功能在 Web 上还不多见。在 Web 2.0 中，交互性变得非常重要，所以像就地编辑之类的技术也更加普遍起来。
为了实现就地编辑，可以自己编写代码，也可以使用一个 JavaScript 框架来处理大部分事情。最流行的一个工具包就是 Scriptaculous 框架，它构建在 prototype.js 库之上。Scriptaculous 库使得构建就地编辑控件非常容易。
清单 5 显示了就地编辑的一个简单的 HTML 测试文件。
清单 5. Inplace.html
|
首先，Inplace.html 包括所有必需的 JavaScript 源文件。然后，我插入了一个简单的表，其中有一个包含可就地编辑的 数据的段落。在文件的最后，我插入了一小段脚本，用于为那个段落创建 InPlaceEditor 对象。
InPlaceEditor 构造函数带有两个参数：一个参数是段落的 ID，另一参数是用于在我完成编辑之后处理提交的那个页面的 URL。在这个例子中，该页面为 submitted.html；但实际上，它也可能是一个 ASP.NET、Java EE 或 PHP 页面，或者是使用其他一些动态 Web 技术的页面。
清单 6 显示了简单的 submitted.html 文件。
清单 6. Submitted.html
|
现在来做一下测试。首先用浏览器打开这个 HTML 文件。一开始可以看到初始的文本。当把鼠标放在文本上时，它变成黄色，如图 3 所示。
图 3. 就地编辑的初态
黄色意味着用户可以单击该字段，然后对其进行编辑。于是，我单击该字段，随后得到了一个 Name 字段、一个 ok 按钮和一个 cancel 链接，如 <图 4 所示。
图 4. 单击之后编辑文本
然后，我改变文本，并单击 ok，这样就会将数据发送到服务器（或者 submitted.html 页面，就像这个例子一样）。然后，服务器返回替换了初始文本的 HTML 页面。在这个例子中，我发回了 Name changed! （如图 5 所示）；在实际应用中，它更可能是数据的新值。
图 5. 单击 ok 后的新内容
这些简单的界面升级就可以使应用程序的可用性大大提高。等待页面装载（尤其是从较慢的服务器上装载）会让人觉得界面太土、太陈旧。使用就地编辑器之类的简单工具就可让应用程序光鲜起来，而实现起来并不复杂。
