思洋互动网站建设学前班

创建Ajax响应页面

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

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

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

 广州网站建设,网站建设,广州网页设计,广州网站设计

1. 清单 3. HTML Ajax 响应页面  
2. <?php 
3. include 'Simpsons.php';  
4.  
5. $s = new Simpsons();  
6. $episodes = $s->find( $_REQUEST['q'] );  
7. if ( count( $episodes ) == 0 ) {  
8. ?> 
9. No results found  
10. <?php   
11. } else {  
12. ?> 
13. <table> 
14. <?php foreach( $episodes as $e ) { ?> 
15. <tr><td class="episode"><b><?php echo( $e['title'] )   
16. ?></b> -   
17.  Season <?php echo( $e['season'] ) ?>   
18.  Episode <?php echo( $e['episode'] ) ?> -   
19.  Aired on <?php echo( $e['aired'] ) ?></td></tr> 
20. <tr><td class="summary"><?php echo( $e['summary'] )   
21. ?></td></tr> 
22. <?php } ?> 
23. </table> 
24. <?php 
25. }  
26. ?> 

 广州网站建设,网站建设,广州网页设计,广州网站设计

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

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

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