电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 通过 PHP、XML 和 jQuery 实现即时性（3） [打印本页]

作者: look_w 时间: 2018-9-19 19:41 标题: 通过 PHP、XML 和 jQuery 实现即时性（3）

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<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>

在页面的顶部，包括 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. 使用带有延迟的 HTML 响应的即时页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<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 毫秒。虽然该界面始终感觉像原来的，但是向服务器发出请求的数量会大幅减少，尤其是在用户快速键入的时候。
虽然我们可以到此为止，但是实际上有另外两种方式来进行此即时过程。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)