百度下拉提示框
在使用百度搜索时，在输入框中输入部分文字后，下面会将与该文字相关的词组展示出来，该功能就可以使用ajax来实现。
注册输入框的onkeyup事件，该事件触发时，将输入框中填写的内容使用ajax发送到servlet中，在servlet中根据用户的输入去数据库中查询，之后将查询出的数据再发送给jsp中，最后将该数据展示在页面即可。
代码示例：
定义jsp：
1 <!-- 用户输入框 --> 2 <div id="divsearch"> 3 <input type="text" name="name" id="name" /> 4 <input type="submit" value="搜索"> 5 6 </div> 7 <!-- 下拉提示框 --> 8 <div id="tips" 9 style="display: none; border: 1px solid red; width: 128px; top: 135px;"> 10 11 </div>
在jsp中编写javascript代码：
1 <script type="text/javascript"> 2 window.onload = function(){ 3 4 var searchElement = document.getElementById("name"); 5 var div = document.getElementById("tips"); 6 7 //给文件框注册按键弹起事件 8 searchElement.onkeyup = function(){ 9 //获取文本框的值 10 var name = this.value; 11 //如果文本框没有数据时，将div隐藏。 12 if(name==""){ 13 div.style.display="none"; 14 return; 15 } 16 17 //获得XMLHttpRequest对象 18 var xhr = getXMLHttpRequest(); 19 20 //回调函数 21 xhr.onreadystatechange = function(){ 22 if(xhr.readyState==4){//请求一 切正常 23 if(xhr.status==200){//服务器响应一切正常 24 var str = xhr.responseText;//得到服务器返回的数据 25 if(str == ""){ 26 return; 27 } 28 var result = str.split(","); // 把返回的数据截成数组 29 var childDivs = ""; 30 //循环把数据放入div中 31 for(var i=0;i<result.length;i++){ 32 //把数组中的每个元素放到div中 33 childDivs+="<div onclick=‘writeText(this)‘ onmouseover=‘changeBackground_over(this)‘ onmouseout=‘changeBackground_out(this)‘>"+result[i]+"</div>"; 34 } 35 36 div.innerHTML= childDivs;//把多个childDivs（div）放入列表div中 37 div.style.display="block";//把列表显示 38 } 39 } 40 } 41 42 xhr.open("get","${pageContext.request.contextPath}/search?name="+name+"&time="+new Date().getTime()); 43 44 xhr.send(null); 45 } 46 } 47 48 function getXMLHttpRequest(){ 49 var xhr; 50 if (window.XMLHttpRequest) {//IE7+, Firefox, Chrome, Opera, Safari 51 xhr = new XMLHttpRequest(); 52 } else {//IE6, IE5 53 xhr = new ActiveXObject("Microsoft.XMLHTTP"); 54 } 55 return xhr; 56 } 57 58 //鼠标悬浮时，改变背景色 59 function changeBackground_over(div){ 60 div.style.backgroundColor = "orange"; 61 } 62 //鼠标离开时，恢复背景色 63 function changeBackground_out(div){ 64 div.style.backgroundColor = ""; 65 } 66 67 //将文本填充到搜索框 68 function writeText(div){ 69 //得到搜索框 70 var searchElement = document.getElementById("name"); 71 searchElement.value = div.innerHTML;//把div中的文本添加到搜索框中 72 div.parentNode.style.display="none";//把context1的div隐藏 73 } 74 </script>
编写servlet用来接收ajax请求并查询数据，这里简化下不去数据库中查询，而是自己构建一个List，将该List作为查询的结果返回给jsp：
1 package com.monkey1024.servlet; 2 3 import java.io.IOException; 4 import java.util.ArrayList; 5 import java.util.List; 6 7 import javax.servlet.ServletException; 8 import javax.servlet.http.HttpServlet; 9 import javax.servlet.http.HttpServletRequest; 10 import javax.servlet.http.HttpServletResponse; 11 12 /** 13 * 查询 14 */ 15 public class SearchServlet extends HttpServlet { 16 private static final long serialVersionUID = 1L; 17 18 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 19 20 String name = request.getParameter("name"); 21 22 //根据用户输入的数据去查询数据库，这里省略数据库查询操作，手动编写一个List结果集 23 List<String> result = new ArrayList<>(); 24 result.add("m1"); 25 result.add("m2"); 26 result.add("m3"); 27 result.add("m4"); 28 result.add("m5"); 29 30 //把集合中的数据转换为字符串返回到网页 31 String str = ""; 32 //如果用户输入的内容是以m开头的话，则将数据返回 33 if(name.startsWith("m")){ 34 for (int i = 0; i < result.size(); i++) { 35 if(i>0){ 36 str+=","; 37 } 38 str+=result.get(i); 39 } 40 } 41 42 System.out.println(str); 43 //把数据响应到客户端 44 response.getWriter().write(str); 45 } 46 47 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 48 doGet(request, response); 49 } 50 51 }
json简介
json的全称是JavaScript Object Notation，是一种数据交换格式，独立于编程语言，可以用来存储数据，优点是非常利于人类阅读和编写，同时也利于机器的解析和生成，同时还可以提升网络传输效率。
json的数据格式是以名-值对的方式存储的，可以将其看做是一个字符串，下面就是一个json格式的数据：
{name:"monkey1024",age:18,hobby:"java"}
在json中规定的字符编码时utf-8，无需担心乱码问题。几乎所以的编程语言都有解析json数据的第三方库，因此json的应用非常多。在servlet中可以将要返回给jsp的数据封装为json格式，在jsp中可以使用javascript来解析，javascript已经内置了json的解析。
在javascript中创建json对象：
1 <script type="text/javascript"> 2 3 //创建一个json对象 4 var student = {name:"jack",age:18}; 5 alert(student.name); 6 7 //创建一个数组，数组中存放json对象 8 var animal = [{name:"monkey",count:10},{name:"tiger",count:5}]; 9 alert(animal[0].name); 10 </script>
通过上面示例可以看出在javascript中使用json非常方便。
在java中有非常多的第三方库可以解析json格式的数据，常用的有：
fastjson：国人开发的，是目前java语言中最快的json库
gson：google开发
jackson：Tatu Saloranta开发
下面以fastjson为例看下，fastjson相关jar包下载地址：http://pan.baidu.com/s/1jIagJII
fastjson中常用的方法：
- JSON.toJSONString
将JavaBean转成json格式的字符串 - JSON.parseObject
将json格式的字符串转换为JavaBean
代码示例：
创建一个City类，表示城市：
1 package com.monkey1024.bean; 2 3 /** 4 * 城市 5 * 6 */ 7 public class City { 8 9 private int id; 10 11 private String name; 12 13 public int getId() { 14 return id; 15 } 16 17 public void setId(int id) { 18 this.id = id; 19 } 20 21 public String getName() { 22 return name; 23 } 24 25 public void setName(String name) { 26 this.name = name; 27 } 28 29 }
创建一个Province类表示省份：
1 package com.monkey1024.bean; 2 3 import java.util.List; 4 5 /** 6 * 省份 7 * 8 */ 9 public class Province{ 10 11 private String name; 12 13 private List<City> cities; 14 15 public String getName() { 16 return name; 17 } 18 19 public void setName(String name) { 20 this.name = name; 21 } 22 23 public List<City> getCities() { 24 return cities; 25 } 26 27 public void setCities(List<City> cities) { 28 this.cities = cities; 29 } 30 31 }
fastjson测试类：
1 package com.monkey1024.test; 2 3 import java.util.ArrayList; 4 import java.util.List; 5 6 import com.alibaba.fastjson.JSON; 7 import com.monkey1024.bean.City; 8 import com.monkey1024.bean.Province; 9 10 public class JsonTest { 11 12 public static void main(String[] args) { 13 14 City c1 = new City(); 15 c1.setId(1005); 16 c1.setName("石家庄"); 17 18 City c2 = new City(); 19 c2.setId(1006); 20 c2.setName("唐山"); 21 22 City c3 = new City(); 23 c3.setId(1007); 24 c3.setName("保定"); 25 26 List<City> cities = new ArrayList<>(); 27 cities.add(c1); 28 cities.add(c2); 29 cities.add(c3); 30 31 Province hebei = new Province(); 32 hebei.setName("河北"); 33 hebei.setCities(cities); 34 //将Province对象转换为json格式并返回字符串 35 String hebeiString = JSON.toJSONString(hebei); 36 System.out.println(hebeiString); 37 38 //将json格式的字符串转换为Province对象 39 Province hebeiNew = JSON.parseObject(hebeiString, Province.class); 40 System.out.println(hebeiNew.getName()); 41 42 } 43 44 }
使用json进行数据传输
将百度下拉提示框中的代码改成使用json格式进行数据传输。
将SearchServlet类中的doGet方法修改为下面内容：
// 根据用户输入的数据去查询数据库，这里省略数据库查询操作，手动编写一个List结果集1 List<String> result = new ArrayList<>(); 2 result.add("m1"); 3 result.add("m2"); 4 result.add("m3"); 5 result.add("m4"); 6 result.add("m5");
//将List转换为string类型1 String str = JSONArray.toJSONString(result);
// 把数据响应到客户端1 response.getWriter().write(str);
因为servlet中返回了一个JSON字符串，所以需要在javascript中将该字符串转换为JSON类型，因此将search.jsp中的
1 var result = str.split(",");
修改为：
1 var result = JSON.parse(str);
上面代码中将字符串转换为JSON对象。
由此可见使用json进行数据传输时可以减少开发者的操作并且提高系统的运行效率（之前需要遍历list并进行拼接）。