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

最新推荐文章于 2024-04-29 14:33:44 发布

qin3232521

最新推荐文章于 2024-04-29 14:33:44 发布

阅读量278

点赞数

分类专栏： xml 文章标签： jquery xml php json javascript html

xml 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

迁移到JSON

在Web 2.0的世界中，JSON是一种非常流行的移动数据的方式。它小巧、方便、快捷，便于浏览器读取，因为需要做的所有操作就是评估已返回的JavaScript代码。创建JSON也很简单，就如您在清单 8中的Ajax搜索页面的JSON版本中所见的那样。

 
 清单8. JSON Ajax页面  
<?php 
include 'Simpsons.php';  
 
header( 'Content-type: application/json' );  
 
$s = new Simpsons();  
print json_encode( $s->find( $_REQUEST['q'] ) );  
?>

您只需使用json_encode函数来将已返回的数组转变为JSON代码。如果您好奇的话，这里也存在一个可将JSON转回为PHP基本类型的json_decode函数。大多数流行语言都具有与这里一样简单的JSON机制，可以将基本数据结构转化为JSON，或者转换出JSON。

如果您在浏览器中查看JSON页面，则您会看到类似图 6中的响应页面。

虽然本页面可能不会太吸引人们的目光，但是对于浏览器中的JavaScript解译器来说，此页面看起来非常易于阅读。用于读取 JSON 格式化输出的相应的即时UI web代码位于清单 9中。

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

此代码非常类似于 XML 代码，不同的是您可以对返回的数组使用 jQuery each 函数，然后使用点符号来访问数据中的所有重要关键字（也就是说，标题、剧集、摘要等等）。

现在您具有：可以用作您自己的工作起始点的即时搜索功能的初步实现。

与Google的开发人员所做的相比，此实现具有三个主要区别。首先是缩放。他们每天要处理数十亿的搜索，现在通过每一次击键他们可处理数十亿单独的小搜索。虽然存在许多有关这方面的问题和解决方案，但是在这种情况下您至少有一件事情要去做 — 浏览器缓存。如果用户键入相同的关键词两次，由于浏览器缓存的缘故，实际上仅进行一个请求，因为第二次发出请求时浏览器返回缓存的数据。

Google 所作的另外一件事情是预取结果。例如，如果您键入 “mov”，则暗示您正在寻找 “movies”，进行此搜索并通过用于您缺少的 “ies” 的灰色文本指示这点。

第三个区别是对于分页的支持，这相当容易解决。您所要做的就是在页面的底部为页面链接添加一些 JavaScript，然后在用户单击以从第一页浏览到任何随后页面时调用此脚本。

结束语

Google的即时UI功能真的很即时。它是革命性的吗？不是。但是它是对可用性具有深远影响的一小步。正如您从本文中看到的，通过使用像XML、PHP和jQuery这样的标准工具，这些行为的初步阶段并不难实现。

qin3232521

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
PHP+XML+jQuery实现即时功能(5)

迁移到JSON在Web 2.0的世界中，JSON是一种非常流行的移动数据的方式。它小巧、方便、快捷，便于浏览器读取，因为需要做的所有操作就是评估已返回的JavaScript代码。创建JSON也很简单，就如您在清单 8中的Ajax搜索页面的JSON版本中所见的那样。清单8. JSON Ajax页面 php include 'Simpsons.php'; header( 'Conte
复制链接

扫一扫