滑鼠指到书的图片上时，会取得书籍说明，滑鼠移开图片，说明会消失，您可以使用以下的JavaScript来达到这个功能：
TipsEx-1.js varxmlHttp; varbook;
functioncreateXMLHttpRequest(){ if(window.ActiveXObject){ xmlHttp=newActiveXObject(\}
elseif(window.XMLHttpRequest){ xmlHttp=newXMLHttpRequest(); } }
functiongetBookData(element){ createXMLHttpRequest(); book=element;
//懒得写Servlet了，直接取得.txt的文字XD varurl=element.id+\xmlHttp.open(\
xmlHttp.onreadystatechange=callback; xmlHttp.send(null); }
functioncallback(){
if(xmlHttp.readyState==4){ if(xmlHttp.status==200){ //计算提示文字位置 setTipsPosition(); //建立表格列（Row），并设定取得的文字 varrow=createRow(xmlHttp.responseText); document.getElementById(\ } } }
//清除说明
functionclearData(){
varbookDataBody=document.getElementById(\bookDataBody.removeChild(bookDataBody.childNodes[0]); document.getElementById(\}
functioncreateRow(data){
vartxtNode=document.createTextNode(data);
varcell=document.createElement(\cell.setAttribute(\cell.setAttribute(\cell.appendChild(txtNode);
31
varrow=document.createElement(\row.appendChild(cell); returnrow; }
functionsetTipsPosition(){ //计算说明的X座标
varend=book.offsetWidth+50; vartop=calculateOffset(book)+25;
varpopup=document.getElementById(\popup.style.border=\popup.style.left=end+\popup.style.top=top+\}
//计算说明的Y座标
functioncalculateOffset(field){ varoffset=0; while(field){ offset+=field.offsetTop; field=field.offsetParent; }
returnoffset; }
可以看一下执行结果。
40.13自动完成
想知道什么是自动完成（AutoComplete），可以试着在GoogleSuggest打几个字就知道了，事实上这个功能在桌面应用程式很常见，像是字典查询程式。
其基本原理就是，当您在打字时触发键盘事件，例如onkeyup事件，向伺服端发出非同步请求…
例如打了一个a，接着伺服端从资料库查询出a开头的所有资料，然后传回至客户端，客户端此时执行callback函式，将结果以一个表格来模拟下拉式选单，显示出所有可能的建议选项…
32
接着使用者可以从中选择选项，利用滑鼠事件，将使用者选择的项目放置至输入栏位中… 就某些程度来说，这有些类似动态清单，只不过这次是以每个使用者键入的文字来查询，而不是下拉式选单中加以设定的选项，而且为了美观，会需要使用DOM、CSS等，将画面模拟的跟视窗程式中的选单画面一样。
而且您必须考虑到打字者打字速度的问题，如果有个使用者打字速度很快，一秒钟可以按下键盘10次，那就是一秒钟发出10次请求，那么以像Google这样百万人次的伺服端来说，处理请求的负担会很重，您可以在客户端设定，大概一秒钟（或一个您觉得适当的时间）才将使用者目前已键入的文字送出至伺服端查询。
因为使用者查询的资料可能在上一次请求传回的结果集合中，所以另一个减少向伺服端请求的方法之一，就是将上次查询到的资料快取一份在客户端，如果使用者继续键入文字，那么先在快取中查询是否有符合的，如果有的话就直接用，如果没有再向伺服端查询。
程式撰写起来会有些复杂，有些程式库或框架，就直接提供有自动完成的元件，您只有略为遵守元件的规范（例如回应的XML格式），就可以拥有自动完成的功能。
事实上，手工编写Ajax应用程式实在很辛苦，有一个好用的程式库或框架，对于撰写Ajax应用程式来说是绝对必要的，在了解Ajax基本原理之后，接下来就是选择适合的程式库与框架。
41进阶JavaScript
41.1在网页中使用JavaScript
要在网页中使用JavaScript，您可以使用
33
…