AJAX学习小结（九）-Jquery实例：仿googlesuggest自动补全功能
日期：2014-05-16 浏览次数：20685 次
步骤1.新建项目JqueryTrain
?
步骤2.导入Jquery类库，并放在jslib文件下；导入包：jstl.jar和standard.jar,注意要是1.1版本的
?
步骤3.新建servlet
?web.xml ?package servlet;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import bean.Word;
/**
* 接收用户端请求
*/
public class AutoComplete extends HttpServlet {
private static final long serialVersionUID = -298323094323211685L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//表示页面传过来的字符串，用于和服务器端的单词进行完整匹配
String wds = request.getParameter("word");
//声明一个数组，存我们要用到的单词
String[] words = {"absolute","anyone","anything","apple","abandon","breach","break","boolean","banana"};
List<Word> list = new ArrayList<Word>();
for(String wd : words){
if(wd.startsWith(wds)){
Word word = new Word();
word.setWord(wd);
list.add(word);
}
}
//将字符串保存在request对象中
request.setAttribute("list", list);
//将请求转发给视图层（注意AJAX中，这个所谓的视图层不返回页面，只返回数据）
request.getRequestDispatcher("wordxml.jsp").forward(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
?
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
<servlet-name>GetStocksInfo</servlet-name>
<servlet-class>servlet.GetStocksInfo</servlet-class>
</servlet>
<servlet>
<servlet-name>AutoComplete</servlet-name>
<servlet-class>servlet.AutoComplete</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>GetStocksInfo</servlet-name>
<url-pattern>/GetStocksInfo</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>AutoComplete</servlet-name>
<url-pattern>/AutoComplete</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
?
?
步骤4.新建bean
? 步骤4.5新建jsp文件---wordxml.jsp ?package bean;
public class Word {
private String word;
public String getWord() {
return word;
}
public void setWord(String word) {
this.word = word;
}
}
?
<%@ page language="java" contentType="text/xml; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!-- 与传统应用的视图层不同，这个jsp返回的是xml的数据，因此contentType的值是text/xml -->
<words>
<c:forEach items="${list}" var="word">
<word>${word.word}</word>
</c:forEach>
<!--word>abc</word>
<word>add</word>
<word>age</word>
<word>a</word>
<word>b</word -->
</words>
?
?
步骤5.新建html文件---JqueryAutoComplete.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
&l
