您现在正在浏览：站长之家 >> 设计编程 >> 详细内容

通过PHP和Sajax使用Ajax之JavaScript

时间:2007-12-27 来源:不详作者:林子

　　示例应用程序需要 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 函数一起使用。请参阅清单 2 了解用法。

　　清单 2. 初始化和使用 XMLHttpRequest 对象

...
＜style＞
＜script type="text/javascript"＞
var request;
var dest;

function loadHTML(URL, destination){
　dest = destination;
　if(window.XMLHttpRequest){ 织梦好，好织梦
　　request = new XMLHttpRequest();
　　request.onreadystatechange = processStateChange;
　　request.open("GET", URL, true);
　　request.send(null);
　}
}
＜/script＞
...
　　在清单 2 中作为参数传递的 destination 变量指出 XMLHttpRequest 对象要去装入内容的地方，由＜div id="content"＞＜/div＞标记指定。然后代码会检查 XMLHttpRequest 对象是否存在，假如存在，就创建一个新的。然后，事件处理程序被设置为 processStateChange 函数，这个函数是对象在每次状态变化时都会调用的函数。请求剩下的部分就是用 open 方法进行设置，设置传输类型为 GET，并设置对象要装入的 URL。最后调用对象的 send 方法，让对象实际发挥作用。

ActiveXObject

　　在 Internet Explorer 中，用 ActiveXObject 代替 XMLHttpRequest。它的函数与 XMLHttpRequest 的函数相同，甚至函数名都是一样的，如清单 3 所示。

　　清单 3. 初始化和使用 ActiveXObject

...
function loadHTML(URL, destination){
　dest = destination;
　if(window.XMLHttpRequest){