山寨版 谷歌建议
?刚刚学ajax，模仿谷歌做了一个谷歌建议，觉得挺好玩的发上和大家分享一下，? 互相学习嘛···
先发几张成果图：
继续打字数据不断更新：
鼠标可选，选择好后，提交到文本框中：
?
?
前台代码：
<script type="text/javascript">var Xhr;function getXhr(){if (window.ActiveXObject) {Xhr = new window.ActiveXObject("Microsoft.XMLHTTP");}else if(window.XMLHttpRequest){Xhr = new XMLHttpRequest();}}function getInfo(){getXhr();var content = document.getElementById("text").value;removeTable();if(content!=""){var url = "servlet/SelectServlet";Xhr.open("POST",url,true);Xhr.onreadystatechange = callback;Xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");Xhr.send("content="+content);}}function callback(){if (Xhr.readyState == 4) {if (Xhr.status == 200) {var xmlDoc = Xhr.responseXML;createTable(xmlDoc);}}}function createTable(doc){var root=doc.documentElement;var areas=root.getElementsByTagName("area");var table=document.createElement("table");var tbody=document.createElement("tbody");table.appendChild(tbody);for(var i=0;i<areas.length;i++){var area=areas.item(i);var tr=tbody.insertRow(i);tr.onmouseover=function(){this.style.backgroundColor="#0000ff";this.style.color="#ffffff";};tr.onmouseout=function(){this.style.backgroundColor="#ffffff";this.style.color="#000000";};tr.onclick=function(){var content=this.firstChild.firstChild.nodeValue;document.getElementById("text").value=content;removeTable();};var td0=tr.insertCell(0);var td1=tr.insertCell(1);var areaName=document.createTextNode(area.getElementsByTagName("areaName").item(0).firstChild.nodeValue);var count=document.createTextNode(area.getElementsByTagName("count").item(0).firstChild.nodeValue);td0.appendChild(areaName);td1.appendChild(count);tbody.appendChild(tr);}document.getElementById("rs").appendChild(table);}function removeTable(){var rs=document.getElementById("rs");if(rs.hasChildNodes()){rs.removeChild(rs.firstChild);}}</script>?html：
<body><div id="content"><div id="header"><a href="#">网页</a><a href="#">图片</a><a href="#">视频</a><a href="#">地图</a><a href="#">资讯</a><a href="#">音乐</a><a href="#">问答</a></div><div id="image"></div><div id="form" align="center"><form action="servlet/SelectServlet" method="post"> <input type="text" name="content" id="text" onkeyup="getInfo()"/><br/> <input type="submit" value="Google搜索" id="submit"/> </form> <div id="rs"> </div></div><div id="footer" ></div></div> </body>
css：
<style type="text/css">#header{border-bottom:groove;}#image{margin-top:100px;margin-left:420px;width:370px;height:120px;background-image: url("/GoogleSuggest/image/GoogleTitle.png");}#text{width: 500px;}#submit{margin-right: 50px;}#rs{position:relative;bottom:12px;width: 500px;}#rs table{border: 1px gray solid;width: 500px;}.count{color: blue;}</style> </head>?后台java：
public class SelectServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("utf-8");response.setCharacterEncoding("utf-8");response.setContentType("text/xml,encoding=utf-8");String content = request.getParameter("content");System.out.println(content);PrintWriter outputStream = response.getWriter();XMLOutputter out = new XMLOutputter(Format.getPrettyFormat());ContentService cs = new ContentServiceImpl();Document document = cs.getResult(content);out.output(document, outputStream);outputStream.close();out.clone();}}?业务代码：
public class ContentServiceImpl implements ContentService {/* (non-Javadoc) * @see service.ContentService#getResult(java.lang.String) */public Document getResult(String s) {Element areas = new Element("areas");Document document = new Document();ContentDAO cd = new ContentDAOImpl();List<Area> list = cd.getSelectRS(s);for (Area a : list) {Element area = new Element("area");Element areaName = new Element("areaName");areaName.setText(String.valueOf(a.getArea()));Element count = new Element("count");count.setText(String.valueOf(cd.getCountSameInfo(a.getArea())));area.addContent(areaName);area.addContent(count);areas.addContent(area);}document.addContent(areas);return document;}}?
DAO代码：
public class ContentDAOImpl extends BaseDAO implements ContentDAO {Connection con = null;PreparedStatement pstmt = null;ResultSet rs = null;public List<Area> getSelectRS(String content) {List<Area> list = new ArrayList<Area>();con = this.getConnection();//预编译不能把%写到？后面String sql = "select * from mydb.areatest where area like ?";try {pstmt = con.prepareStatement(sql);pstmt.setString(1, content+"%");rs = pstmt.executeQuery();while(rs.next()){Area area = new Area();area.setId(rs.getInt("id"));area.setAreaid(rs.getInt("areaid"));area.setArea(rs.getString("area"));area.setFatherid(rs.getInt("Fatherid"));list.add(area);}} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();} finally{this.free(con, pstmt, rs);}return list;}/* (non-Javadoc) * @see dao.ContentDAO#getCountSameInfo(java.lang.String) */public int getCountSameInfo(String name) {int count = 0;con = this.getConnection();//预编译不能把%写到？后面String sql = "select count(*) from mydb.areatest where area = ?";try {pstmt = con.prepareStatement(sql);pstmt.setString(1, name);rs = pstmt.executeQuery();while(rs.next()){count = rs.getInt(1);}} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();} finally{this.free(con, pstmt, rs);}return count;}