刚刚学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 block
e.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 block
e.printStackTrace();
} finally{
this.free(con, pstmt, rs);
}
return count;
}
分享到：
相关推荐
然而，"山寨版qq源码.素材"这个主题暗示我们可能会探讨的是一个非官方的、模仿QQ功能的软件源码及相关的素材。在IT行业中，这样的项目通常是由开发者或者爱好者为了学习、研究或者创新目的而创建的。 首先，我们要...
"山寨版QQ"通常是指非官方、模仿QQ功能的软件，它们可能由Java爱好者开发，旨在提供类似QQ的聊天通信服务。下面将详细讨论相关知识点： 1. **Java编程语言**：Java是一种广泛使用的跨平台编程语言，适合开发桌面...
【山寨版QQ源代码】是一个项目，旨在模仿QQ即时通讯软件的功能和架构，提供在网络环境中运行的服务。这个项目包括了服务器端和客户端两大部分，旨在实现一个与正版QQ相似但可能具有不同特性和功能的通信平台。从描述...
山寨版qq源码+素材 山寨版qq源码+素材 IM即时通信 山寨版qq源码+素材 可以自己分析，对于java学习比较好的哈！
3. **安全性问题**：使用非官方的认证客户端可能存在安全隐患，如个人信息泄露、恶意代码植入、被用作攻击跳板等，因此不建议使用。 4. **兼容性**：不同的网络环境可能采用不同的设备和配置，导致非官方客户端可能...
标题中的“山寨版QQ 源代码 QQ2010界面”指的是一个非官方的、模仿QQ2010版本用户界面的软件项目，它的源代码是使用Java编程语言编写的。这个项目可能是为了教学目的，如描述中提到的“韩顺平JAVA教程视频配套源代码...
基于网络、io流的java编程。基本实现了QQ常用的所有功能，用户注册，登录，私聊，群聊，窗口抖动，加好友，截图，改变字体，改变聊天窗口背景等，值得借鉴，不足地方还望大家指正。（注：数据库为mysql，用其他的...
【标题】：“java语言 山寨版QQ源码”指的是基于Java编程语言实现的一个简易QQ聊天软件的源代码。这个项目通常是为了教学目的而设计，让学习者能够深入理解Java编程语言在网络通信、多线程、图形用户界面（GUI）等...
【Java山寨版QQ项目】是韩顺平老师为了教学目的设计的一个模拟QQ功能的应用程序，旨在帮助初学者理解和掌握Java编程语言以及相关的软件开发技术。这个项目提供了从基础到进阶的Java编程实践，涵盖了网络通信、多线程...
**JAVA山寨版聊天源代码详解** 在JAVA编程领域，网络编程是不可或缺的一部分，尤其是在开发实时交互的应用程序，如聊天软件时。"JAVA山寨版聊天源代码"是一个学习和理解JAVA网络编程的好资源，它提供了从基础到进阶...
《植物大战僵尸》是一款深受玩家喜爱的塔防类游戏，其山寨版源码为我们提供了一个了解游戏开发过程的独特视角。源码是程序的核心，包含了游戏的逻辑、算法和设计思想，对于学习游戏编程的开发者来说，是宝贵的参考...
【标题】：“山寨版[超级马里奥]是男人就玩过一关”指的是一个非官方制作、模仿原版《超级马里奥》游戏的版本，这类游戏通常由小型开发团队或者个人开发者制作，旨在致敬经典游戏，但也可能包含一些创新元素或趣味性...
项目可能使用了Java的Serializable接口或者第三方库如Google的Protocol Buffers、Facebook的Thrift或Apache Avro来实现这一过程。 6. **事件驱动编程**：Java的事件监听机制使得程序能够实时响应用户的操作，例如...
【标题】"山寨版qq源码"所涉及的知识点主要集中在客户端与服务器端的软件开发领域，这通常指的是创建一个类似QQ的即时通讯应用。这个项目可能是为了教学目的，由知名IT讲师韩顺平老师设计并讲解，让我们来详细探讨...
"简单山寨版QQ"是一个基于Java编程语言的项目，旨在为初学者提供一个学习和实践的基础平台，了解和掌握Java的一些核心概念和技术。这个项目主要涉及到以下几个关键知识点： 1. **Java基础知识**：Java是一种广泛...
这个"山寨版qq源码+素材"的压缩包文件提供了模拟QQ功能的基础框架，特别适合计算机科学与技术专业的学生作为毕业设计项目使用。下面我们将深入探讨其中可能包含的关键知识点： 1. **网络编程**：源码中必定包含了...
山寨版iphone4游戏，我自己的源代码