JSP AJAX模拟实现自动补全的两种方式

//Servlet的方式

package web;

import java.io.IOException;
import java.io.PrintWriter;

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

import service.UserService;

public class SuggestServlet extends HttpServlet {
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		PrintWriter out=resp.getWriter();
		String keyword=req.getParameter("keyword");
		//利用service来进行测试
		if(! "".equals(keyword.trim())){
			UserService userService=new UserService();
			String result=userService.queryUsernameByKeyword(keyword);
			if(result!=null){
				out.println(result);
			}else{
				out.println("");
			}
		}
		out.close();
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
	this.doGet(req, resp);
	}
}

html页面内容：

		
			利用Ajax实现搜索自动补齐提示!
		

		

			
			

				
			

		

原生JS方式

var xhr;
		function createXhr(){
			try{
				return new XMLHttpRequest();
			}catch(e){
				return new ActiveXObject("Microsoft.XMLHTTP");
			}
		}
		//用户名文本框失去焦点的处理函数;
		function findSuggest(){
			xhr=createXhr();
			var keyword=document.getElementById("txtSearch").value;
			alert(keyword);
			xhr.onreadystatechange=callback;
			xhr.open("post","suggestAction",true);
			xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			xhr.send("keyword="+keyword);
		}
		function callback(){
			if(xhr.readyState==4){
				if(xhr.status==200){
					var sobj=document.getElementById("suggest");
					sobj.innerHTML="";
					var str=xhr.responseText.split(",");
					var suggest="";
					if(str.length>0 && str[0].length>0){
						for(i=0;i