- 技术人生
- 用ajax + webwork 实现google suggest 效果
代码如下:
autoComplete.html
<
html
>
<
head
>
<
title
>
Ajax Auto Complete
</
title
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=gb2312"
>
<
style
type
="text/class"
>
...
.mouseOut{...}{ background: #708090; color:#FFFAFA; } .mouseOver{...}{ background:#FFFAFA; color:#000000; }
</
style
>
<
script
type
="text/javascript"
>
...
var xmlHttp; var completeDiv; var inputField; var nameTable; var nameTableBody; function createXMLHttpRequest()...{ if(window.ActiveXObject)...{ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }else if(window.XMLHttpRequest)...{ xmlHttp = new XMLHttpRequest(); } } function initVars()...{ inputField = document.getElementById("names"); nameTable = document.getElementById("name_table"); completeDiv = document.getElementById("popup"); nameTableBody = document.getElementById("name_table_body"); } function findNames()...{ initVars(); if(inputField.value.length > 0)...{ createXMLHttpRequest(); var url = "AutoComplete.action?name=" + escape(inputField.value); xmlHttp.open("GET",url,true); xmlHttp.onreadystatechange = callback; xmlHttp.send(null); }else...{ clearNames(); } } function callback()...{ if(xmlHttp.readyState ==4 )...{ if(xmlHttp.status == 200)...{ setNames(xmlHttp.responseXML.getElementsByTagName("name")); }else if(xmlHttp.status == 204 || xmlHttp.status == 1223)...{ clearNames(); } } } function setNames(the_names)...{ clearNames(); var size = the_names.length; setOffsets(); var row,cell,txtNode; for(var i=0; i<size; i++)...{ var nextNode = the_names[i].firstChild.data; row = document.createElement("tr"); cell = document.createElement("td"); //cell.onmouseout = function(){this.className = 'mouseOver';}; //cell.onmouseover = function(){this.className = 'mouseOut';}; cell.setAttribute("bgcolor","#FFFAFA"); cell.setAttribute("border","0"); cell.onclick = function()...{ populateName(this);}; cell.onmouseover = function()...{ doOnMouseOver(this)} cell.onmouseout = function() ...{ doOnMouseOut(this)} txtNode = document.createTextNode(nextNode); cell.appendChild(txtNode); row.appendChild(cell); nameTableBody.appendChild(row); } } function setOffsets()...{ var end = inputField.offsetWidth; var left = calculateOffsetLeft(inputField); var top = calculateOffsetTop(inputField) + inputField.offsetHeight; completeDiv.style.border = "black 1px solid"; completeDiv.style.left = left + "px"; completeDiv.style.top = top + "px"; completeDiv.style.width = end + "px"; } function calculateOffsetLeft(field)...{ return calculateOffset(field,"offsetLeft"); } function calculateOffsetTop(field)...{ return calculateOffset(field,"offsetTop"); } function calculateOffset(field,attr)...{ var offset = 0; while(field)...{ offset += field[attr]; field = field.offsetParent; } return offset; } function populateName(cell)...{ inputField.value = cell.firstChild.nodeValue; clearNames(); } function doOnMouseOver(cell)...{ cell.style.background = "blue"; } function doOnMouseOut(cell)...{ cell.style.background = "#FFFFFF"; } function clearNames()...{ var ind = nameTableBody.childNodes.length; for(var i= ind - 1; i>=0; i--)...{ nameTableBody.removeChild(nameTableBody.childNodes[i]); } completeDiv.style.border = "none"; }
</
script
>
</
head
>
<
body
>
<
h1
>
Ajax Auto Complete Example
</
h1
>
Names:
<
input
type
="text"
size
="20"
id
="names"
onkeyup
="findNames();"
style
="height:20px;"
>
<
div
style
="position:absolute;"
id
="popup"
>
<
table
id
="name_table"
bgcolor
="#FFFAFA"
border
="0"
cellspacing
="0"
>
<
tbody
id
="name_table_body"
></
tbody
>
</
table
>
</
div
>
</
body
>
</
html
>
AutoComplete.java
package
control;
import
java.io.
*
;
import
java.util.ArrayList;
import
java.util.Iterator;
import
java.util.List;
import
javax.servlet.http.HttpServletResponse;
import
com.opensymphony.webwork.ServletActionContext;
import
core.BookActionSupport;
public
class
AutoComplete
extends
BookActionSupport
...
{ private List names = new ArrayList(); public String execute()...{ names.add("Abe"); names.add("Abel"); names.add("Abigail"); names.add("Abner"); names.add("Abraham"); names.add("Marcy"); names.add("Marge"); names.add("marie"); names.add("MarcyMarcyMarcyMarcyMarcy"); String prefix = getParameter("name"); NameService service = NameService.getInstance(names); List matching = service.findNames(prefix); try...{ HttpServletResponse response = ServletActionContext.getResponse(); PrintWriter out = response.getWriter(); if(matching.size()>0)...{ response.setContentType("text/xml"); response.setHeader("Cache-Control","no-cache"); out.println("<response>"); Iterator iter = matching.iterator(); while(iter.hasNext())...{ String name = (String) iter.next(); out.println("<name>" + name + "</name>"); } out.println("</response>"); matching = null; service = null; out.close(); }else...{ response.setStatus(HttpServletResponse.SC_NO_CONTENT); } }catch(Exception e)...{ System.out.println(e.getMessage()); } return ""; }}
注意: 在这个类中继承了
BookActionSupport类. 这个是继承自webwork框架的ActionSupport类的.主要实现了getParameter()方法. NameService.java
package
control;
import
java.util.ArrayList;
import
java.util.Iterator;
import
java.util.List;
public
class
NameService
...
{ private List names; private NameService(List list_of_names)...{ this.names = list_of_names; } public static NameService getInstance(List list_of_names)...{ return new NameService(list_of_names); } public List findNames(String prefix)...{ String prefix_upper = prefix.toUpperCase(); List matches = new ArrayList(); Iterator iter = names.iterator(); while(iter.hasNext())...{ String name = (String) iter.next(); String name_upper_case = name.toUpperCase(); if(name_upper_case.startsWith(prefix_upper))...{ boolean result = matches.add(name); } } return matches; }}
xworl.xml
<?
xml version="1.0" encoding="UTF-8"
?>
<!
DOCTYPE xwork PUBLIC "-//OpenSymphony Group//XWork 1.0//EN" "X:WorkSpaceBFPPropertyconfigwebxwork-1.0.dtd"
>
<
xwork
>
<
include
file
="webwork-default.xml"
/>
<
package
name
="helloWorld"
extends
="webwork-default"
>
<
interceptors
>
<
interceptor
name
="params"
class
="com.opensymphony.xwork.interceptor.ParametersInterceptor"
/>
</
interceptors
>
<
default-interceptor-ref
name
="defaultStack"
/>
<
action
name
="AutoComplete"
class
="control.AutoComplete"
>
<
result
name
="success"
>
/jsp/domainS.jsp
</
result
>
<
interceptor-ref
name
="model-driven"
/>
<
interceptor-ref
name
="params"
/>
</
action
>
</
package
>
</
xwork
>
注意: 我的 project的名称是helloworld , java类在 control目录下. 请注意区分!Ok, 代码到此结束. 虽然比google suggest要简单. 但是可以体会一下ajax的用法.
