百度下拉提示框
在使用百度搜索时,在输入框中输入部分文字后,下面会将与该文字相关的词组展示出来,该功能就可以使用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并进行拼接)。