PHP+XML+jQuery实现即时功能(2)

创建Ajax响应页面

第一个版本的UI针对Ajax请求使用HTML响应。此方法是实现即时UI的最简单的方式。即时UI web页面采用搜索关键词并使用该关键词对服务器发出Ajax 请求。然后，服务器格式化组成该响应的HTML块并将其返回到页面。在一个简单的调用中，即时UI web页面中的代码将使用更新的 HTML 替换该页面的一部分。

在本文的后面，我会演示使用来自服务器的XML响应和JSON响应，但是现在，为了简单起见，我们从HTML版开始。

您首先需要的是HTML响应页面。此页面接受来自请求的查询字符串。然后使用该字符串调用Simpsons类来搜索剧集。接着，将已返回的剧集数组格式化 HTML。此代码位于清单 3中。

 
 
清单 3. HTML Ajax 响应页面  
<?php 
include 'Simpsons.php';  
 
$s = new Simpsons();  
$episodes = $s->find( $_REQUEST['q'] );  
if ( count( $episodes ) == 0 ) {  
?> 
No results found  
<?php   
} else {  
?> 
<table> 
<?php foreach( $episodes as $e ) { ?> 
<tr><td class="episode"><b><?php echo( $e['title'] )   
?></b> -   
 Season <?php echo( $e['season'] ) ?>   
 Episode <?php echo( $e['episode'] ) ?> -   
 Aired on <?php echo( $e['aired'] ) ?></td></tr> 
<tr><td class="summary"><?php echo( $e['summary'] )   
?></td></tr> 
<?php } ?> 
</table> 
<?php 
}  
?> 

在顶部，清单 3包括Simpsons类。然后该代码创建该类的一个新实例并进行find调用。之后它会查看响应是否为空，以及是否返回 “No Results Found”；否则，它遍历这些结果并组成一个结果表。

为了测试该页面，只需转到您的Web浏览器并请求该网页。您可以在图 1中看到输出。

此时，您拥有开始构建即时搜索UI所需要的所有东西。