模式 3. 读取 JavaScript 数据
从服务器请求 JavaScript 数据这种技术通常用于 JavaScript Object Notation（JSON）这种良好的代码。返回 JavaScript 数据的优点就是能够使浏览器高效地解析并创建使用起来更加简单的 JavaScript 数据结构。
让我们将 清单 8 中从服务器读取 XML 的代码修改为从服务器读取 JavaScript 数据的代码。新代码如 清单 10 所示。
清单 10. Pat3_js.html
<html><head><script>
var req = null;
function processReqChange() {
if (req.readyState == 4 && req.status == 200 ) {
var dtable = document.getElementById( 'dataBody' );
var books = eval( req.responseText );
for( var b in books ) {
var elTr = dtable.insertRow( -1 );
var elAuthorTd = elTr.insertCell( -1 );
elAuthorTd.innerHTML = books[b].author;
var elTitleTd = elTr.insertCell( -1 );
elTitleTd.innerHTML = books[b].title;
} } }
...
|
所有的 HTML 代码保持不变。processReqChange 函数仅仅更改为读取 eval 从而从服务器返回 JavaScript 数据。该函数随后使用 eval 的 JavaScript 对象作为数据源，后者又将其添加到表中。
清单 11 显示了来自服务器的 JavaScript 数据。
清单 11. Pat3_js_data.js
[ { author: 'Jack Herrington', title: 'Code Generation in Action' },
{ author: 'Jack Herrington', title: 'Podcasting Hacks' },
{ author: 'Jack Herrington', title: 'PHP Hacks' }
]
|
 |
为什么众多 Ajax 应用程序工程师更喜欢使用 JavaScript 代码而不是 XML 来对数据编码？答案很明显。JavaScript 代码更容易读取和管理，并且也更容易被浏览器处理。
收集和显示所有的数据之后，即可看到 Ajax 的重点就是显示当前数据 —— 当前 最重要的部分。那么，如何保证总是能够从服务器获得最新的数据呢？