|
您可以看到浏览器中的页面能够发挥作用，如 图 2 所示。
图 2. 具有动态响应区域的搜索区域
多么美妙。这样看来，页面非常合理。当我改变搜索文本时，显示结果的区域也将根据新的搜索条件改变（也许并不完全如此，但是如果为请求安装一个真正的搜索引擎，它就会这样做）。
问题是 JavaScript 代码使用 window.setInterval 来不断地生成请求，即使搜索字段没有发生更改。这将消耗网络带宽，并消耗服务器时间。对于一个流行的站点来说，这可是一个致命的组合。
解决方法就是对搜索框使用事件回调，如 清单 5 所示。
清单 5. Antipat1b_fixed.html
<html><script>
var req = null;
function processReqChange() { ... }
function loadUrl( url ) { ... }
var seachTimer = null;
function runSearch()
{
if ( seachTimer != null )
window.clearTimeout( seachTimer );
seachTimer = window.setTimeout( function watchSearch() {
var url = window.location.toString();
var searchUrl = 'antipat1_content.html?s='+searchText.value;
url = url.replace( /antipat1b_fixed.html/, searchUrl );
loadUrl( url );
seachTimer = null;
}, 1000 );
}
</script><body><form>
Search <input id="searchText" type="text" onkeyup="runSearch()">:<br/>
<div id="htmlDiv" style="border:1px solid black;padding:10px;">
</div></form></body></html>
|
这里，我将 runSearch() 函数与搜索框的 onkeyup() 方法关联起来。通过这样做，当用户在搜索框中输入内容时，我将得到回调。
runSearch() 函数执行得非常漂亮。它为调用服务器并实际运行搜索的另一个方法设置了一个超时。如果在设置之前还没有超时，那么将清除该超时。为什么？因为这将允许用户输入大量的文本；然后，当用户按下最后一个键时，第二种方法将运行搜索。通过这种方法，用户将不再被不断闪烁的显示打扰。
没有检查回调返回的结果
许多 Ajax 反模式源于对 XMLHTTPRequest 对象机制的误解。我经常看到的一种情况就是，用户没有在回调中检查对象的 readyState 或 status 字段。请查看 清单 6 以理解我所说的含义。
清单 6. Antipat2_nocheck.html
<html><script>
var req = null;
function processReqChange() {
var dobj = document.getElementById( 'htmlDiv' );
dobj.innerHTML = req.responseText;
}
...
</code>
<p>Everything looks okay. And on small requests, and on some browsers, it's
probably fine. But many requests are large enough to call several calls
to the <code type="inline">onreadystatechange</code> handler before they
finish. So, your callback might be working with incomplete data.</p>
<p>The right way to do it is shown in <a href="#list7">Listing 7</a>.</p>
<code type="section">
<heading refname="list7" type="code">Listing 7. Antipat2_fixed.html</heading>
<html><script>
var req = null;
function processReqChange() {
if (req.readyState == 4 && req.status == 200 ) {
var dobj = document.getElementById( 'htmlDiv' );
dobj.innerHTML = req.responseText;
}
}
...
|
(编辑:aniston)
|
