用 PHP 构建基于 Ajax 的 Web 站点

iwebcode

浏览: 2007862 次
性别:
来自: 杭州

最近访客更多访客>>

u012363178

yefeng_laixi

无为我是谁

firehack

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (2435)

社区版块

存档分类

2013-02 ( 13)
2013-01 ( 57)
2012-12 ( 62)
更多存档...

级别：中级

Ken Ramirez, 创始人, Axsys Technology Group

2008 年 9 月 23 日

学习使用原生 JavaScript™ 代码和 PHP 编写 Asynchronous JavaScript +XML（Ajax）应用程序的过程。本文介绍几个框架和应用程序编程接口（API），可以用它们减少开发 Ajax Web应用程序所需编写的代码量。

PHP已经流行很多年了。PHP 通常作为服务器端脚本语言，用来快速开发基于 Web 的应用程序，而且效果很不错。实际上，一些最流行的 Web项目（比如 PHP-Nuke、osCommerce 和 Joomla）都是用 PHP 开发的，它们至今仍然很兴旺。

Ajax也已经出现了一阵子了，但是直到最近使用 Ajax 技术开发的 Web 站点才开始大量增加。Ajax 技术使 Web 站点或 Web应用程序能够自动地与服务器通信，而不需要刷新整个页面。从本质上说，Ajax的异步特性使客户机浏览器能够向服务器发送请求或调用服务器端的方法。在客户端，可以使用 JavaScript代码处理服务器返回的结果，然后可以把任何输出合并到现有的前端 HTML 视图中，而不需要刷新页面。在使用 Ajax时，实际上并不使用新的编程语言。实际上，只需组合使用现有技术。

Ajax 资源中心

请访问 Ajax 资源中心，这是有关 Ajax 编程模型信息的一站式中心，包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。

PHP和 Ajax 的组合提供一个强大的平台，可以用来创建具备健壮的特性的 Web 站点或 Web 应用程序。本文讨论 PHP 和 Ajax的一些用途，研究如何在自己的 Web 应用程序中使用它们。在阅读本文之前，您应该充分理解 HTML 和 JavaScript编程。您还应该熟悉 PHP 脚本编程语言，虽然也可以使用大多数其他脚本语言。

与服务器通信

在 Ajax 中客户机/服务器通信的关键是使用 JavaScript XMLHttpRequest对象。大多数浏览器都支持这个对象，包括 Windows® Internet Explorer 5.0 和更高版本、Safari1.2、Mozilla Firefox、Opera 8 和更高版本以及 Netscape 7。为了解释传统客户机/服务器通信和基于 Ajax的客户机/服务器通信之间的差异，下面举一个例子。按照传统方式，为了让客户机浏览器向服务器发送需要处理或存储在数据库中的内容，常常使用 POST 方法把客户端上输入控件收集的内容发送到服务器。服务器使用 PHP（或其他脚本语言）处理这些内容，使用数据库读取或存储数据，最后返回嵌入在 HTML 代码中的结果。然后，浏览器处理 HTML 并向最终用户显示一个新页面。图 1 描述这个场景。

图 1. 提交数据并接收结果的传统过程

通过使用 Ajax，同样的过程在前端需要的时间更少。其基本思想是让用户感觉不必等待页面更新。实际上，通过使用 Ajax，可以用一个 HTML页面构成整个 Web 应用程序，但是不建议这么做。按照传统方式，如果希望向服务器提交一个表单，就要设置表单的动作并把动作类型指定为 POST。在使用 Ajax 时，实际上并不向服务器直接提交表单，而是调用一个 JavaScript 函数。这个函数从表单收集数据并执行检验，然后使用 XMLHttpRequest 把数据发送给一个服务器端函数。当结果返回客户机时，客户机处理结果并更新需要更新的页面部分。在这种情况下，页面并不全部地刷新。因此，处理 HTML 所花费的时间更少，性能会更好。图 2 说明了使用 Ajax 更新页面与刷新整个页面之间的细微差别。

图 2. 提交数据并接收结果的 Ajax 过程

现在看看通过 JavaScript 代码与服务器进行通信所需的步骤。首先，定义表单的外观，见清单 1。

清单 1. HTML 表单

				
<body>
My First Ajax Page

<form name="myForm">
Press button to view server time: 
  <input type="button" value="Update"
  onClick="ajaxFunction();" />
Server Time Is: <input type="text" name="time" />
</form>

</body>

这个表单产生图 3 所示的输出。

图 3. HTML 表单的输出

这个表单没有做任何真正有用的事，但是它帮助您了解在自己的代码中的什么地方集成 Ajax。

请注意按钮上指定的 onClick 事件。这个事件调用一个名为 ajaxFunction 的 JavaScript 函数。这里就是 Ajax 中比较有趣的地方。在这个方法中，要执行几个步骤，本节会逐一解释这些步骤：

创建 XMLHttpRequest 对象的实例。
连接要调用的服务器端服务。
告诉 Ajax 在服务器端代码执行完成并返回结果时应该调用哪个方法。
发送请求。
异步地响应。

创建 XMLHttpRequest 实例

需要创建 ajaxFunction 并提供一个变量来容纳创建的 XMLHttpRequest 对象。与任何 JavaScript 方法一样，按照清单 2 所示定义这个方法。

清单 2. ajaxFunction 的定义

				
function ajaxFunction() {
  var xmlHttp = null;
  .
  .
  .
}

大多数现代浏览器都支持 XMLHttpRequest 对象。但是，Internet Explorer 6 等比较陈旧的浏览器要求创建一个 ActiveX 对象来执行异步的服务器调用。这会产生一个问题：必须判断正在运行代码的浏览器类型并创建适当的对象。JavaScript 代码通过它的 try/catch 功能提供了一个解决方案。只需以正确的优先次序尝试创建对象，让 try/catch 块处理其余的事情。清单 3 给出一个代码示例。

清单 3. 创建适当的对象

				
function ajaxFunction() {
  var xmlHttp=null;
  
  try
  {
    // Firefox, Internet Explorer 7. Opera 8.0+, Safari.
    xmlHttp = new XMLHttpRequest();
  }
  catch (e)
  {
  // Internet Explorer 6.
  try
    {
    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    try
      {
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
    catch (e)
      {
      return false;
      }
    }
  }
}

可以看到，所有现代浏览器都支持创建 XMLHttpRequest 对象。关于 Microsoft® 是真正支持 XMLHttpRequest 对象，还是使用一个 façade 包装 ActiveX 实现，还有一些争议。

打开服务器连接

在同一个 JavaScript 函数中，创建 XMLHttpRequest 对象之后，使用 XMLHttpRequest 对象的 open 方法打开一个到服务器端脚本的连接。这个方法有两个必要参数和三个可选参数，见表 1。

表 1. open 方法的参数

参数说明

method	指定要使用的 HTTP 方法。有效值包括 `GET`、`POST`、`PUT` 或 `HEAD`。
url	指定要调用的 XML 数据或服务器端 XML Web 服务的绝对路径或相对路径。为了防止跨站点脚本攻击，Ajax 请求针对的 URL必须使用与包含 Ajax 请求的页面相同的协议、主机和端口。尽管一些浏览器可能允许任意的URL，但是并非所有浏览器都支持这么做。如果需要跨站点通信，必须在服务器端使用 cURL 或其他方法进行处理。
async	如果希望异步地向服务器发送请求，应该把这个参数设置为 true。true 值还要求设置 `onreadystatechange` 属性，稍后讨论这个属性。把这个参数设置为 false 会禁止大多数浏览器接收任何进一步的用户输入。如果应用程序足够灵活，能够在执行后端操作的同时继续接收输入，那么最好异步地执行操作。
user	指定一个用户名，用来在执行脚本之前对用户进行身份验证。只有在脚本要求用户身份验证的情况下，才需要这个参数。
password	指定一个密码，用来在执行脚本之前对用户进行身份验证。只有在脚本要求用户身份验证的情况下，才需要这个参数。

对于这个示例，代码只需要执行一个 GET 操作，向服务器上的一个脚本请求时间。还告诉 open 方法我们希望异步地执行操作，见清单 4。

清单 4. open 方法调用

				
function ajaxFunction() {
  
  .
  .
  .
  xmlHttp.open("GET", "time.php", true);

}

告诉 Ajax 在服务器端代码执行完成时应该调用哪个方法

在使用 Ajax 调用服务器时，产生的响应是通过调用一个回调函数返回的。可以创建并命名一个函数，也可以创建无名的函数。无论是哪种情况，都需要设置 XMLHttpRequest 对象的 onReadyStateChange 属性，让它知道要使用的回调函数，见清单 5。

清单 5. 设置 onReadyStateChange 属性

				
function ajaxFunction() {
  
  .
  .
  .
  xmlHttp.onreadystatechange=function() {
  	if(xmlHttp.readyState==4)
    {
  		// Get the data from the server's response.
  	  document.myForm.time.value=xmlHttp.responseText;
  	  xmlHttp=null;
    }
  }
}

可以看到，调用这个方法之后，它会检查 readyState，寻找有效值 4。共有五个有效状态，见表 2。

表 2. readyState 的有效值

值说明

0	未初始化
1	正在装载
2	装载完成
3	交互状态
4	已经完成

这段代码的基本意思是，“如果状态指出操作已经完成，就进行处理”。当状态为已经完成时，下一步是用服务器响应更新需要更新的页面部分。这需要接收赋值给 responseText 属性的值，这就是服务器响应。最后，通过把 XMLHttpRequest 对象赋值为 null，停止这个对象。

发送请求

ajaxFunction 还需要执行一个步骤，也就是把请求发送到服务器。这需要使用 XMLHttpRequest 对象的 send 方法。如果请求是异步的，这个方法会在发送请求之后立即返回。如果请求是同步的，这个方法在收到响应之后才会返回，这意味着 Ajax 函数会一直阻塞，直到这个方法返回。

这个方法有一个参数，可以把它设置为 null 或许多其他值。例如，可以传递一个 DOMDocument 对象、InputStream 或 String。如果请求方法是 POST，这个值就用作 HTTP 请求体。完成的 ajaxFunction 应该与清单 6 相似。

清单 6. 完成的 ajaxFunction

				
function ajaxFunction() {
 var xmlHttp=null;
 
 try {
   // Firefox, Internet Explorer 7. Opera 8.0+, Safari
   xmlHttp = new XMLHttpRequest();
 } catch (e) {
   // Internet Explorer 6.
   try {
     xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
     try {
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
     } catch (e) {
       alert("Your browser does not support AJAX!");
       return false;
     }
   }
 }
 xmlHttp.open("GET", "time.php", true);
 xmlHttp.onreadystatechange=function() {
   if(xmlHttp.readyState==4) {
     // Get the data from the server's response.
     document.myForm.time.value=xmlHttp.responseText;
     xmlHttp=null;
   }
 }
 xmlHttp.send("");
}

异步地响应

因为 Ajax 在本质上是异步的，所以必须注意并发性并了解处理次序。在发出多个 Ajax 调用并以出乎意料的次序接收响应时，这尤其重要。一般假设次序是无法意料的。

有时候，服务器响应需要以 XML 文档的形式返回给客户机。在这些情况下，可以使用 XMLHttpRequest 对象的 responseXML 属性接收数据。清单 7 给出一个返回 XML 文档的 PHP 脚本示例。

清单 7. 返回 XML 文档的 PHP 代码

				
<?php

$result = getRecordSet($_GET['query'];

echo '<?xml version="1.0" encoding="ISO-8859-1"?>' .
  '<car>';

while($row = mysql_fetch_array($result)) {

  echo "<make>" . $row['make'] . "</make>";
  echo "<model>" . $row['model'] . "</model>";
  echo "<year>" . $row['year'] . "</year>";
  echo "<description>" . $row['description'] . 
	  "</description>";
}
echo '</car>';
?>

这段代码创建一个 XML 文档（由 '<?xml version="1.0" encoding="ISO-8859-1"?>' 表示），然后发送响应的其余部分。客户端代码必须先从 responseXML 属性中取出 XML 文档，使用 Document Object Model（DOM）解析数据，然后通过修改页面上现有的适当字段在页面上显示数据。清单 8 演示这些步骤。

清单 8. 处理 XML 文档的 JavaScript 代码

				
function stateChanged() {   
  if(xmlHttp.readyState==4)  {
    xmlDoc = xmlHttp.responseXML;   
    document.getElementById("make").innerHTML = 
      xmlDoc.getElementsByTagName("make")[0].childNodes[0].nodeValue;
    document.getElementById("model").innerHTML = 
      xmlDoc.getElementsByTagName("model")[0].childNodes[0].nodeValue;
    document.getElementById("year").innerHTML =
      xmlDoc.getElementsByTagName("year")[0].childNodes[0].nodeValue;
    document.getElementById("description").innerHTML =
      xmlDoc.getElementsByTagName("description")[0].childNodes[0].nodeValue;
  }
}

用 JavaScript 框架扩展 Ajax

您可能会注意到，为了在前端实现 Ajax 功能，服务器端 PHP 代码并不需要任何特殊的东西。实际上，可以用任何语言编写服务器端脚本，只要能够从Web 服务器调用它并把结果返回给客户机。但是，出于几个目的，希望扩展 Ajax来实现其他功能。例如，许多库提供了外观更好的前端控件，可以实现 Web 2.0 所需的效果。这些库大多数是用 JavaScript代码编写的，并提供了可以减少编写前端所需的 JavaScript 代码量的特性和 API。另外，这些库大多数使用 JavaScriptObject Notation（JSON），这是一种目前在因特网上广泛使用的轻量数据交换格式。下面是可能对您有帮助的一些库：

Prototype
Script.aculo.us
Dojo
jQuery

Prototype

Prototype提供用来开发动态 Web 应用程序的类驱动的 JavaScript 代码。另外，Prototype 框架还提供一个全局 Ajax对象，这个对象使 Ajax 功能更容易编写、效果更好、更容易处理。另外，通过使用这个框架进行 Ajax开发，就不再需要处理跨浏览器问题。只需在一次调用中指定目标 URL、HTTP 方法（POST 或 GET）和响应回调函数等等。

Script.aculo.us

Script.aculo.us是另一个流行的 JavaScript 框架，它提供一些出色的用户界面控件。这个框架还提供了一些执行 Ajax 功能的控件。甚至还有一个Google 风格的自动补齐文本控件，可以用它收集用户输入的文本。Ajax功能允许轻松地指定查询的服务器端目标。产生的响应用来向最终用户显示服务器返回的字符串集。

Dojo

Dojo工具集是一个开放源码的 JavaScript 和 Ajax 框架，它速度快和文件小（只有 25 KB），因此很受欢迎。在 Ajax方面，Dojo 提供了用来发送和接收异步服务器调用和响应的 API。在服务器端不需要修改任何代码。对于任何 Ajax 调用，您的 PHP代码仍然可以做出响应。

jQuery

jQuery 的优点是简化了在页面上搜索元素的机制，并支持在运行时动态地添加新函数、特性和格式。它还提供一些与众不同的 Ajax 特性，支持在 Web 页面上提供 Ajax 交互。

扩展 PHP 来执行 Ajax

既然了解了基本概念，现在就来讨论如何扩展 PHP 来支持 Ajax。从 PHP 的角度来看，扩展 Ajax 功能并不仅仅是重写 XMLHttpRequest（XHR）访问代码。这还涉及以更简单更直观的方式提供前端服务，然后通过它们访问用 PHP编写的后端服务。应该包括从前端执行后端服务、访问数据库、执行后端网络服务等特性。我在市场上看到的一些框架允许开发人员用后端语言编写代码，然后由框架创建前端 JavaScript 代码。开发人员告诉框架必须调用哪些后端方法，框架就会用 JavaScript 代码编写前端façade，这些代码可以分配 XHR 对象、发送请求、接收响应，然后把响应传递给您选择的函数，甚至把输出直接赋值给您选择的 HTML元素。这种框架设计思想可以减少必须编写的 JavaScript代码。希望为其提供函数的所有元素都可以被覆盖，可以把它们连接到在发生指定的前端事件时做出响应的后端方法。下面是值得研究的一些框架：

PHP AJAX
PHP-Ext
ExtPHP

PHP AJAX

PHP AJAX 允许开发人员用自己的类扩展 PHP 类。然后，只需在调用 PHP 文件时调用一个初始化方法，它会替您生成必需的前端 XHR 代码。前端事件必须调用一个与 PHP 类同名的 JavaScript 函数。代码与清单 9 相似。

清单 9. 用自己的 PHP 类扩展 PHP AJAX

				
class ajax_app extends phpajax { 
 function input() { 
 } 
 function loading() { 
 } 
 function main() { 
 } 
}

调用覆盖的方法执行 Ajax 生命周期中的各种任务。例如，如果在前端执行一个操作，就调用后端类的 main() 方法处理这个操作。在前端收集的所有输入都传递给 input() 方法。

PHP-Ext

PHP-Ext提供一个支持 PHP 4 和 5 的库，这个库提供大量前端用户界面控件。这些控件的底层代码实际上是由 Ext JS提供的，但这个框架的特色是开发人员不需要提供 JavaScript 来操作前端控件。相反，与控件的所有交互都是通过用 PHP编写的后端服务来执行的。在需要时，根据指定的事件调用 PHP 代码。当发生指定的事件时，就会调用对应的 PHP 代码。按照这种方式，可以从PHP 代码几乎直接地填写网格和其他控件的内容。

ExtPHP

用PHP 编写的另一种 Ext JS 包装器是 ExtPHP（不要与前面提到的 PHP-Ext 混淆）。按照这个项目的开发负责人的说法，可以使用ExtPHP 编写侵入式和非侵入式 JavaScript 代码，编程方式与使用 Ext JS 时相同。这个框架的优点是允许 PHP编辑器探测未知的、拼写错误的或使用不当的方法，这样就不必在 Web 浏览器中调试 JavaScript 代码。ExtPHP的设计思想是生成可以从 PHP 脚本调用的 PHP 类。在实例化一个对象时，会把对应的 JavaScript代码存储在一个内部缓冲区中。如果调用一个对象的方法，代码也被添加到内部缓冲区中。准备好所有 JavaScript 代码之后，只需调用一个方法 jsrender()。还可以通过调用 ExtPHP 函数在输出中添加内容，这样就可以在输出中直接添加 JavaScript 代码。

结束语

本文介绍了如何编写基于 Ajax 的前端代码，以及如何把前端代码和后端 PHP 脚本结合起来。还介绍了一些最新的框架，可以使用这些框架大大加快Ajax Web 应用程序的创建。通过结合使用这些框架、Ajax 和 PHP，可以编写出外观优美、功能丰富的 Web应用程序。实际上，如果您掌握了这些新技术，就会觉得离不开它们了。

分享到：