教程：通过PHP和JavaScript构建一个Ajax运用程序(1)

文章摘要:浏览器会在 HTML 的 div 标记指定的位置显示内容。 XMLHttpRequest 对象 如果正在使用 Mozilla、Opera 或其他这类浏览器中的一个， 那么可以使用内置的 XMLHttpRequest 对象动态地取得内容。 Microsoft 的 Internet Explorer 浏览器采用另外一个对象， 只是添加几行额外代码的问题。 XMLHttpRequest 避免必须等候页面载入这一瓶颈。通过 Ajax 树立的应用程序，只需点击按钮，就可以用全新的内容替换 Web 页面某一区域的内容。

它的精彩之处在于不必等候页面装入，只有这一个区域的内容需要载入。以 Google Maps 为例：可以点击和四处移动地图，却不必等候页面载入。

Ajax 的问题

在使用 Ajax 时有些事须要注意。像其他 Web 页面一样，Ajax 页面是可以加书签的，所以在使用 GET 与 POST 进行请求时就会造成问题。国际化和编码方案数量的增加，使得把这些编码方案标准化变得日益重要。在这份教程中将了解这些重要的问题。示例 PHP 运用程序

欢迎访问“电脑街！”

首先要用 Ajax 建立一个运用程序，然后用 Sajax 树立，以展现使用这个工具包的好处。应用程序是以前编写的教程中的一部分，带有面板链接。

它被用作示例，以展示使用 Ajax 的优势。因为在各个面板上点击时，它们会异步装入，而不必等候页面剩下的部分再次装入。这个示例应用程序还会展示如何建立自己的 Ajax 应用程序。

Sajax

如果想创建 Ajax 应用程序，又不想受 Ajax 复杂的细节所累。答案就是 Sajax。通过使用 ModernMethod 人员开发的库，Sajax 为 Web 开发人员抽象出了 Ajax 的高层细节。

在底层，Sajax 的工作与 Ajax 相同。可是，通过使用 Sajax 库提供的高层函数，可以忽略 Ajax 的技术细节。

什么是 Ajax？这一节是个入门介绍，用示例解释 Ajax 的概念，包括在点击链接时发生了什么，Ajax 用于 PHP 运用程序时须要的 HTML 和 JavaScript 代码。下一节将更深入一些，实际地使用在这一节学习的 Ajax 概念创建 PHP 应用程序。

幕后内容

Ajax 是异步 JavaScript 和 XML 的组合。之所以说异步，是因为可以点击页面上的链接，然后它只装入与点击对应的内容，同时维持标题或其他任何设定的信息不动。

点击链接时，在背后工作的是 JavaScript 函数。JavaScript 树立与 Web 浏览器通信的对象，并告诉浏览器装入特定页面。然后可以像平常一样浏览同一页面上的其他内容，当浏览器完全装入新页面的时候，浏览器会在 HTML 的 div 标记指定的位子显示内容。

CSS 样式代码用来和 span 记号一起建立链接。

CSS 样式代码

示例应用程序需要 CSS 代码，这样 span 记号看起来就像使用常规的锚记号（＜a href=... ＞）树立的真正链接一样，也会像真正的链接一样被点击。清单 1. 指定 span 标记的显示信息

...＜style type="text/css"＞

span:visited{ text-decoration:none; color:#293d6b; }

span:hover{ text-decoration:underline; color:#293d6b; }

span {color:#293d6b; cursor: pointer}

＜/style＞

这些 span 记号用在示例运用程序中，颜色符合所有 IBM developerWorks 教程中链接使用的颜色。

样式记号的第一行指定已经访问过的链接的颜色维持不变。鼠标经过时加下划线，光标变成指针，就像平凡的锚标记（＜a href... ＞）一样。现在来看看如何创建使用这个 CSS 样式代码的链接。

创建使用 span 记号的链接

在“构建 PHP 运用程序”一节中要树立的链接，将用来通过 JavaScript 与浏览器通信，告诉浏览器要去什么地方，要提取什么内容。它们不是使用锚标记的传统链接，而是使用 span 记号树立的。span 标记的观感由清单 1 的 CSS 代码决定。这里是示例：

＜span onclick="loadHTML(＇panels-ajax.php?panel_id=0＇,

＇content＇)"＞Managing content＜/span＞

onclick 处理程序指定这个 span 被点击时要运行哪个脚本。还有其他几个与 onclick 类似的指示符可以使用，包括 onmouseover 和 ondblclick。

请注意在 onclick 字段中显示的是 JavaScript 函数 loadHTML ，而不是传统的 http:// 链接或由清单 panels-ajax.php? 建立的相对链接。接下来学习 loadHTML 函数。

XMLHttpRequest 对象

如果正在使用 Mozilla、Opera 或其他这类浏览器中的一个，那么可以使用内置的 XMLHttpRequest 对象动态地取得内容。

Microsoft 的 Internet Explorer 浏览器采用另外一个对象，稍后将会学到。它们使用的方式实际上相同，而且对它们提供支持，只是添加几行额外代码的问题。

XMLHttpRequest 对象用来通过 JavaScript 检索页面内容。稍后在示例运用程序中会使用这个代码，同 ActiveXObject 的 loadHTML 函数一起使用。