您的位置：首页 > 编程语言 > Java开发

Demo之JavaEE的使用Ajax简单实现Google的Suggestion

2012-07-26 19:08 302 查看

为了更好的理解Ajax的原理和结构性实现方式，特意的简单的实现了这个小小的功能，为以后复习用。

JSP页面的代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax Suggestion</title>
<style type="text/css">
#popup{
border:#999 solid 1px;
width:150px;
height:80px;
display:none;
}
span{
display:block;
}
</style>
</head>
<script type="text/javascript" >

function $(id){return document.getElementById(id);}

var a;

//Ajax核心代码
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("POST",url,true);
xmlhttp.send();
}

function resp(){
var tmp=""
if(xmlhttp.readyState==4 && xmlhttp.status==200){
tmp=xmlhttp.responseText;
}
a=tmp.split("|");
matchstr();
}

//对获取的数据进行处理
function matchstr(){

var hint="";
var num=0;

if(a.length<=5){
num=a.length;
}else{
num=5;
}
for(var i=0;i<num;i++){
var tmp=a[i];
hint=hint+'<span id="sug'+i+'">'+tmp+'</span>';
}
$('popup').innerHTML=hint;
}

//Ajax获取数据
function subvalue(url){
var str=document.valueForm.aText.value;
url=url+"?str="+str;
loadXMLDoc(url,resp);

}

//监听键盘按下事件
function ShowMsg(id){
$(id).style.display="block";
subvalue('AjaxServlet');

}
function HideMsg(id){
$(id).style.display="none";
}
</script>

<body>
<div id="main">
<div id="formText">
Ajax Suggestion实例练习：
<form id="showform" name="valueForm" action="AjaxServlet">
<input type="text" name="aText" onkeyup="ShowMsg('popup');" onblur="HideMsg('popup');" />
<input type="submit" value="提交" />
</form>
<div id="popup">
</div>
</div>
</div>
</body>
</html>

Servlet的实现代码，这里没有从数据库中获取数据，只是利用Servlet中定义的一个数组模拟了一下实现：

package controller;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
* Servlet implementation class AjaxServet
*/
@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

/**
* @see HttpServlet#HttpServlet()
*/
public AjaxServlet() {
super();
// TODO Auto-generated constructor stub
}

/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
this.doPost(request, response);
}

/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub

String str=request.getParameter("str");

System.out.println("**************");
System.out.println(str);
System.out.println("**************");
str=str.toUpperCase();

List list=new ArrayList();
list.add("Anna");
list.add("Aonew");
list.add("Bind");
list.add("Colla");
list.add("Droid");
list.add("Ella");
list.add("Frunk");
list.add("Gland");
list.add("Hylun");
list.add("Illust");
list.add("John");
list.add("Kate");
list.add("Lumia");
list.add("Monne");
list.add("Nacy");
list.add("Octor");
list.add("Peter");
list.add("Quance");
list.add("Rank");
list.add("Steven");
list.add("Tema");
list.add("Ubuntu");
list.add("View");
list.add("Wenslet");
list.add("Xeelee");
list.add("Yella");
list.add("Zend");

List resplist=new ArrayList();
for(int i=0;i<list.size();i++){
String tmp=list.get(i).toString().toUpperCase();

if(str.equals(tmp.substring(0,str.length()))){
resplist.add(list.get(i));
}
}

String resp="";
for(int i=0;i<resplist.size();i++){

resp=resp+resplist.get(i).toString()+"|";
}

PrintWriter out = response.getWriter();
System.out.println(resp);
out.println(resp);

}

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航