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

最新推荐文章于 2024-05-01 00:06:10 发布

qin3232521

最新推荐文章于 2024-05-01 00:06:10 发布

阅读量209

点赞数

分类专栏： xml 文章标签： jquery xml php javascript function 服务器

xml 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

构建即时搜索UI

使用JavaScript jQuery库可以轻松构建即时搜索UI。查看清单 4，您就可以明白我的意思。

 
 清单 4. 使用HTML响应的即时页面  
<html><head> 
<script src="jquery-1.4.2.min.js"></script> 
<link rel="stylesheet" href="styles.css" type="text/css" /> 
<title>Instant Search - HTML Based</title> 
</head> 
<body> 
Simpsons Search: <input type="text" id="term" /> 
<div id="results"> 
</div> 
<script> 
$(document).ready(function() {  
$('#term').keyup(function() {  
  $.get('search_html.php?q='+escape($('#term').val()), function(data) {  
    $('#results').html(data);  
  } );  
} );  
} );  
</script> 
</body> 
</html>

在页面的顶部，清单 4包括jQuery库和CSS样式表，以使输出更美观。页面的主体包括搜索关键词的输入字段和保存此输出的结果div。

工作的大部分都在页面底部的 JavaScript 部分完成。它首先调用文档中的 ready 函数。此调用可确保在页面准备就绪前都不执行内部 JavaScript。内部 JavaScript 使用搜索关键词输出对象中的 keyup 函数来监控搜索关键词字段中的关键字键入。在文本字段变更时，将对服务器调用 Ajax get 方法。通过使用 html 函数，来自此调用的数据响应将用于填充结果元素。

如果JavaScript代码看上去像线路噪声，没关系。这实际上就是JavaScript的技术现状，该代码需要复查线路，所以代码规模最好保持得小一些。

虽然您可以在没有jQuery库的情况下完成这些工作，但是使用该库的价值在于，该代码非常简洁且所有跨平台工作都已经为您完成。您不必担心Internet Explorer与Safari或Firefox；只需编写一次代码然后将其用于任何地方。

要测试该库，请在Web浏览器中建立即时搜索UI。在图 2中，您可以看到类似的东西。

图2显示了我输入少量字符后的界面。在我键入关键词 “frink” 之后，您可以在图 3 中看到结果。

图3显示了在标题或两集概要中出现 “frink”。可笑的数据！Frink教授（到目前为止节目中的最佳角色）出现在不止两集中。但这仍是非常奇妙。本地计算机上的响应时间是非常出色的，即使服务器代码解析是通过840K的XML。

现在您可能想通过在每一个按键之间放置一个延迟并在您真正发出请求时来控制请求的数量。在清单 5中，更新的代码可以执行此操作。

 
 清单 5. 使用带有延迟的 HTML 响应的即时页面  
<html><head> 
<link rel="stylesheet" href="styles.css" type="text/css"> 
<script src="jquery-1.4.2.min.js"></script> 
<title>Instant Search - HTML Based With Delay</title> 
</head> 
<body> 
Simpsons Search: <input type="text" id="term" /> 
<div id="results"> 
</div> 
<script> 
delayTimer = null;  
 
function getResults() {  
  $.get('search_html.php?q='+escape($('#term').val()), function(data) {  
    $('#results').html(data);  
  } );  
  delayTimer = null;  
}  
 
$(document).ready(function() {  
$('#term').keyup(function() {  
  if ( delayTimer )  
     window.clearTimeout( delayTimer );  
  delayTimer = window.setTimeout( getResults, 200 );  
} );  
} );  
</script> 
</body> 
</html>

此代码在用户按键时创建一个计时器。当该计时器在 200 毫秒后停止时，请求发出。如果另外一次击键在计时器停止之前，则原来的计时器将被取消，同时创建一个新的计时器。其结果就是在用户停止了键入之后，计时器停止 200 毫秒。虽然该界面始终感觉像原来的，但是向服务器发出请求的数量会大幅减少，尤其是在用户快速键入的时候。

虽然我们可以到此为止，但是实际上有另外两种方式来进行此即时过程。

qin3232521

关注

0
点赞
踩
0

收藏

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

构建即时搜索UI使用JavaScript jQuery库可以轻松构建即时搜索UI。查看清单 4，您就可以明白我的意思。清单 4. 使用HTML响应的即时页面 html>head> script src="jquery-1.4.2.min.js">script> link rel="stylesheet" href="styles.css" type="text/css" /> tit
复制链接

扫一扫