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

最新推荐文章于 2024-10-18 18:49:38 发布

qin3232521

最新推荐文章于 2024-10-18 18:49:38 发布

阅读量239

点赞数

分类专栏： xml 文章标签： xml jquery php html function 浏览器

xml 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

迁移到XML

第一种方式是使用XML作为您从服务器到客户端的传输语法。此处的想法是服务器提供一个通用XML端点，任何流程都可以使用该端点来执行查询，并且您的客户端足够智能，能够读取XML并以其想要的方式来格式化它。

要变成XML，首先要创建如清单 6中所示的新服务器页面。

 
 清单6. XML Ajax页面  
<?php 
include 'Simpsons.php';  
 
header( 'Content-type: text/xml' );  
 
$s = new Simpsons();  
$doc = new DOMDocument();  
$root = $doc->createElement( 'episodes' );  
$doc->appendChild( $root );  
foreach( $s->find( $_REQUEST['q'] ) as $episode ) {  
   $el = $doc->createElement( 'episode' );  
   $el->setAttribute( 'title', $episode['title'] );  
   $el->setAttribute( 'episode', $episode['episode'] );  
   $el->setAttribute( 'season', $episode['season'] );  
   $el->setAttribute( 'aired', $episode['aired'] );  
 
   $tn = $doc->createTextNode( $episode['summary'] );  
   $el->appendChild( $tn );  
 
   $root->appendChild( $el );  
}  
print $doc->saveXML();  
?>

虽然搜索仍然一样，但是您格式化结果的方式变了。现在，该代码创建了XML文档并将节点附加到其上，从而保存所有返回的数据。然后在脚本的末尾，它只是将XML DOM保存为字符串。请注意在脚本的顶部，在导出XML而非HTML时，还要将内容类型设置为文本/xml。

如果在您的Web浏览器中导航到此页面，则您会看到类似图 4中的情况。

不过，一些浏览器可能以更结构化的方式显示已返回的文本。如果您想查看原始的源XML，则您可以选择View - Source以便看到类似图 5中的窗口。

如您所见，该脚本创建了一些良好格式化的XML，准备好供新的客户端代码使用。

解析XML（而不是直接使用 HTML）的新客户端代码位于清单 7中。

 
 清单 7. 使用 XML 的即时搜索页面  
<html><head> 
<script src="jquery-1.4.2.min.js"></script> 
<link rel="stylesheet" href="styles.css" type="text/css" /> 
<title>Instant Search - XML Based</title> 
</head> 
<body> 
Simpsons Search: <input type="text" id="term" /> 
<table id="results"> 
</table> 
<script> 
$(document).ready( function() {  
$('#term').keyup( function() {  
 $.get('search_xml.php?q='+escape($('#term').val()), function(data) {  
html = '<table id="results">';  
$(data).find('episode').each( function() {  
     var ep = $(this);  
         html += '<tr><td class="episode"><b>'+  
         ep.attr('title')+'</b>&nbsp;';  
         html += 'Season '+ep.attr('season')+'&nbsp;';  
         html += 'Episode '+ep.attr('episode')+'&nbsp;';  
         html += 'Aired '+ep.attr('aired')+'</td></tr>';  
         html += '<tr><td class="summary">'+  
         ep.text()+'</td></tr>';  
   } );  
   html += '</html>';  
   $('#results').replaceWith( html );  
 } );  
} );  
} );  
</script> 
</body> 
</html>