<html><script> var req = null; function processReqChange() { if (req.readyState == 4 && req.status == 200 ) { var dobj = document.getElementById( 'htmlDiv' ); dobj.innerHTML = req.responseText; } } function loadUrl( url ) { ... if(req) { req.onreadystatechange = processReqChange; req.open('GET', url, true); req.send(''); } } var url = window.location.toString(); url = url.replace( /antipat1a_fixed.html/, 'antipat1_content.html' ); loadUrl( url ); </script> ...
要查看真实环境的演示，请查看在线版本 antipat1a_fixed.html.
这个新代码只是查看请求对象是否发生改变，以响应 onreadystatechange 回调。然后，在完成后更新页面。
onreadystatechange
最后的结果是一个加载神速的页面。页面出现后，新的内容几乎是立即填充了页面框。为什么呢？因为请求完成后就立即调用了代码，然后填充页面。没有必要将时间浪费在无聊的计时器上。
轮询反模式的另一个变体是：页面反复向服务器发送请求，即使请求没有发生变化。请看 清单 4 所示的搜索页面。
<html><script> var req = null; function processReqChange() { if (req.readyState == 4 && req.status == 200 ) { var dobj = document.getElementById( 'htmlDiv' ); dobj.innerHTML = req.responseText; } } function loadUrl( url ) { ... } window.setInterval( function watchSearch() { var url = window.location.toString(); var searchUrl = 'antipat1_content.html?s='+searchText.value; url = url.replace( /antipat1b_polling.html/, searchUrl ); loadUrl( url ); }, 1000 ); </script><body><form> Search <input id="searchText" type="text">:<br/> <div id="htmlDiv" style="border:1px solid black;padding:10px;"> </div></form></body></html>
(编辑:aniston)
·2024年12月目录 ·2024年11月目录 ·2024年10月目录 ·2024年9月目录 ·2024年8月目录 ·2024年7月目录 ·2024年6月目录 ·2024年5月目录 ·2024年4月目录 ·2024年3月目录 ·2024年2月目录 ·2024年1月目录 ·2023年12月目录 ·2023年11月目录
