通过PHP和Sajax使用Ajax之JavaScript
时间：2007-02-18 来源：PHP爱好者
多年以来，创建真正具有响应性的 Web 应用程序这一目标一直被 Web 开发的一个简单事实所阻碍：要改变页面某一部分的信息，用户就必须重载整个页面。但是以后不再会这样了。感谢异步 Java? 脚本和 XML（Ajax），我们现在可以从服务器端请求新内容，只修改页面的一部分。这个教程解释了如何把 Ajax 用于 PHP ，并介绍了简单 Ajax 工具包（Sajax），这是一个用 PHP 编写的工具，可以把服务器端 PHP 与 javascript 集成。
开始之前
这份教程针对的是对于开发富 Web 应用程序感兴趣的人，富 Web 应用程序把异步 JavaScript 和 XML（Ajax）与 PHP 结合起来，用户每次点击时，不必刷新整个页面，就可以动态更新内容。这份教程假设读者了解基本的 PHP 概念，包括 if 和 switch 语句以及函数的使用。
关于本教程
在本教程中，将学习 Ajax 以及围绕它的应用的问题。将用 PHP 构建一个 Ajax 应用程序，显示以前写的一个教程中的面板。点击面板链接只会重新载入内容区，并用选定面板的内容替换它，从而节约了带宽和页面装入的时间。然后将把简单 Ajax 工具包（Sajax）集成进 Ajax 应用程序，它可以同步 Ajax 的使用，从而简化开发。
概述
在深入之前，先看看 Ajax、示例 PHP 应用程序和 Sajax。 Ajax
Ajax 允许 Web 开发人员创建交互的 Web 页面，同时避免必须等候页面载入这一瓶颈。通过 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 函数一起使用。请参阅清单 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){
...
} 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）。
清单 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 了解错误处理代码。
清单 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 编码，因为标准化可以提高互操作性。
开始之前
这份教程针对的是对于开发富 Web 应用程序感兴趣的人，富 Web 应用程序把异步 JavaScript 和 XML（Ajax）与 PHP 结合起来，用户每次点击时，不必刷新整个页面，就可以动态更新内容。这份教程假设读者了解基本的 PHP 概念，包括 if 和 switch 语句以及函数的使用。
关于本教程
在本教程中，将学习 Ajax 以及围绕它的应用的问题。将用 PHP 构建一个 Ajax 应用程序，显示以前写的一个教程中的面板。点击面板链接只会重新载入内容区，并用选定面板的内容替换它，从而节约了带宽和页面装入的时间。然后将把简单 Ajax 工具包（Sajax）集成进 Ajax 应用程序，它可以同步 Ajax 的使用，从而简化开发。
概述
在深入之前，先看看 Ajax、示例 PHP 应用程序和 Sajax。 Ajax
Ajax 允许 Web 开发人员创建交互的 Web 页面，同时避免必须等候页面载入这一瓶颈。通过 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 函数一起使用。请参阅清单 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){
...
} 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）。
清单 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 了解错误处理代码。
清单 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 编码，因为标准化可以提高互操作性。
相关阅读 更多 +
