通过 PHP 和 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=... >）创建的真正链接一样，也会像真正的链接一样被点击。 数据挖掘研究院

					
...
<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 了解用法。

					
...
<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 所示。

					
...
function loadHTML(URL, destination){
    dest = destination;
    if(window.XMLHttpRequest){
...
    } else if (window.ActiveXObject) {
        request = new ActiveXObject("Microsoft.XMLHTTP");
        if (request) {
            request.onreadystatechange = processStateChange;
            request.open("GET", URL, true);
            request.send();
        }
    }
}
</script>
 数据挖掘研究院 

在这种情况下（使用 Internet Explorer），实例化一个 Microsoft.XMLHTTP 类型 的新 ActiveXObject 对象。然后，设置事件处理程序，调用对象的 open 函数。然后调用对象的 send 函数，这样 ActiveXObject 就工作了。

processStateChange 函数 数据挖掘实验室

这里描述的函数叫作事件处理程序或回调函数。回调函数的目的是当对象状态发生变化时，能够处理状态变化。在具体的应用中，这个函数的目的应当是处理状态变化、检验对象是否到达预期状态、读取动态装入的内容。

数据挖掘研究院

processStateChange 函数由 XMLHttpRequest 或 ActiveXObject 对象在对象状态发生变化时调用。当对象进入状态 4 时，表明页面的内容已经接收完成（请参阅清单 4）。 数据挖掘实验室

					
...
var dest;

function processStateChange(){
    if (request.readyState == 4){
        contentDiv = document.getElementById(dest);
        if (request.status == 200){
            response = request.responseText;
            contentDiv.innerHTML = response;http://httpd.apache.org/download.cgi
        }
    }
}

function loadHTML(URL, destination){
...
 数据挖掘研究院 

当 XML HTTP 对象到达状态 4 时，内容就已经就绪，可以提取并在浏览器的预期位置上显示。位置是 contentDiv，内容从文档中检索。如果请求是正确的，而且也按正确的顺序检索，那么响应的状态应当是 200。HTML 响应保存在 request.responseText 中，把它设置到 contentDiv.innerHTML，就可以在浏览器中显示它。 数据挖掘研究院

如果在传输过程中没有发生错误，一切正常，那么新内容就会在浏览器中出现；否则，request.status 就不等于 200。请参阅清单 5 了解错误处理代码。 数据挖掘研究院

					
...
        if (request.status == 200){
            response = request.responseText;
            contentDiv.innerHTML = response;
        } else {
            contentDiv.innerHTML = "Error: Status "+request.status;
        }
...
 
数据挖掘研究院
 

清单 5 会把有关传输错误的信息发送给浏览器。在示例应用程序中将把这个函数用作回调函数。接下来，学习 GET 和 POST 的问题和它们的差异。 数据挖掘研究院

GET 与 POST

数据挖掘研究院

GET 和 POST 是进行 HTTP 请求和在请求中传递变量的两种方法。开发人员不应当随意选择使用哪种方法，因为两种方法都有使用意义。GET 请求把变量嵌在 URL 中，这意味着它们是可以加书签的。如果变量可能会修改数据库、购买商品或者做其他类似操作，这种方法会有副作用。假设偶然间加了书签的页面有一个购买商品的 URL ，里面包含地址、信用卡号以及 $100 的产品，全都嵌在 URL 中，那么重新访问这个 URL 就意味着购买这件商品。

所以，只有在变量没有副作用，可以经常重新载入也不会发生什么的时候，才可以进行 GET 请求。适合 GET 请求的一个变量可能是分类 ID。可以反复重新载入，分类会反复显示，但是没有任何累积的效果。 数据挖掘研究院

在另一方面，当变量对源（例如数据库）有作用时或者为了个人信息安全，应当采用 POST 请求。比如在购买一件 $100 的产品时，应当用 POST 请求。如果给付款页面加了书签，由于 URL 中没有变量，所以什么也不会发生，也不会意外地购买了不想购买的东西，或者在已经拥有的情况下又买了一次。 数据挖掘实验室

GET 和 POST 的意义在 Ajax 中有同样的作用。在构建本文的应用程序和未来的应用程序时，理解 GET 和 POST 请求的差异是很重要的。这会有助于避免 Web 应用程序开发的常见缺陷。 数据挖掘研究院

编码方法 数据挖掘研究院

对于通过 HTTP 传输的数据进行编码，有多种方法，而 XML 只接受其中少数几种。互操作性最大的一种编码方法是 UTF-8，因为它向后兼容美国信息交换标准码（ASCII）。有许多在其他国家使用的国际字符的编码方式不向后兼容 ASCII ，如果不进行恰当的编码，就不适合放在 XML 文件中。 数据挖掘研究院

例如，把字符串 ”Internationalization” 放在浏览器中，用 UTF-8 编码的话，会把它变成 I%F1t%EBrn%E2ti%F4n%E0liz%E6ti%F8n。经典 ASCII 字符的 UTF-8 编码与相同字符的 7 位 ASCII 码对应，这使 UTF-8 是一个理想的编码方法选择。 数据挖掘研究院

了解这一点是很重要的，因为在通过 HTTP 传输和接收文档的过程中都要处理编码问题，在使用 Ajax 时也是一样。使用 Ajax 进行传输时，也应当使用 UTF-8 编码，因为标准化可以提高互操作性。