AJAX练习3--鼠标移动到指定的图片显示相应的该图片的信息
一、ajax+xml+jsp+servlet
1、jsp
1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 2 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 4 <html> 5 <head> 6 7 </head> 8 <!-- 拖动只适用于jsp和html --> 9 <img src="images/lb.jpg" id="1"/> 10 <div id="lb"></div> 11 <img src="images/sq.jpg" id="2"/> 12 <div id="sq"></div> 13 <body> 14 15 16 <script type="text/javascript"> 17 18 //取得两幅图片对象 19 var imgElementArray = document.getElementsByTagName("img"); 20 var size = imgElementArray.length; 21 //alert(size); 22 //对两幅图片做事件监听 23 for(var i=0;i<size;i++){ 24 imgElementArray[i].onmouseover = function(){ 25 //alert(this.id); 26 var id = this.id;//取得id将其传递到后台 27 //创建XHR对象 28 var xhr = createXHR(); 29 30 xhr.onreadystatechange = function(){ 31 32 if(xhr.readyState==4){ 33 if(xhr.status==200){ 34 //alert("进来了"); 35 var docXML = xhr.responseXML;//获取服务器传送过来的xml文件 36 //alert(docXML); 37 if(id==1){ 38 //alert("刘备"); 39 //取得服务器来的信息 40 //获取author和name对象 41 var authorElement = docXML.getElementsByTagName("author")[0]; 42 //alert(authorElement.nodeName); 43 var nameElement = docXML.getElementsByTagName("name")[0]; 44 //获取author和name对象的文本信息 45 var author = authorElement.innerHTML; 46 var name = nameElement.innerHTML; 47 //alert(author+name);//得到作者和name的值 48 //获取刘备div 49 var lbElement = document.getElementById("lb"); 50 //将name和author值写入到div中去 51 lbElement.innerHTML = "name="+name+"："+"author="+author; 52 }else if(id==2){ 53 54 //alert("孙权："+sqElement.id); 55 //获取author和name 56 var authorElement = docXML.getElementsByTagName("author")[0]; 57 var nameElement = docXML.getElementsByTagName("name")[0]; 58 //获取author和name对象的文本信息 59 var author = authorElement.innerHTML; 60 var name = nameElement.innerHTML; 61 //alert(author+name);//得到作者和name的值 62 63 //将name和author值写入到div中去 64 //获取孙权div 65 var sqElement = document.getElementById("sq"); 66 sqElement.innerHTML = "name="+name+"："+"author="+author; 67 } 68 } 69 } 70 } 71 xhr.open("get","/myday31/ImageServlet?id="+id+"&time="+new Date().toString(),true); 72 xhr.send(null); 73 }; 74 } 75 76 function createXHR(){ 77 var xhr = null; 78 try{ 79 //ie 80 xhr = new ActiveXObject("microsoft.xmlhttp"); 81 }catch(e){ 82 xhr = new XMLHttpRequest(); 83 } 84 return xhr; 85 } 86 </script> 87 </body> 88 </html>
2、Servlet
1 import java.io.IOException; 2 import java.io.PrintWriter; 3 4 import javax.servlet.ServletException; 5 import javax.servlet.http.HttpServlet; 6 import javax.servlet.http.HttpServletRequest; 7 import javax.servlet.http.HttpServletResponse; 8 9 import cn.zengfansheng.web.ajax.dao.ImageDao; 10 import cn.zengfansheng.web.ajax.domain.Image; 11 12 public class ImageServlet extends HttpServlet { 13 public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException { 14 15 System.out.println("ImageServlet：：doGet()"); 16 int id = Integer.parseInt(request.getParameter("id")); 17 ImageDao imageDao = new ImageDao(); 18 Image image = imageDao.findImageById(id); 19 response.setContentType("text/xml;charset=utf-8"); 20 PrintWriter pw = response.getWriter(); 21 pw.write("<root>"); 22 pw.write("<image>"); 23 pw.write("<author>"); 24 pw.write(image.getAuthor()); 25 pw.write("</author>"); 26 pw.write("<name>"); 27 pw.write(image.getName()); 28 pw.write("</name>"); 29 pw.write("</image>"); 30 pw.write("</root>"); 31 } 32 }
3、ImageDao
1 import cn.zengfansheng.web.ajax.domain.Image; 2 3 public class ImageDao { 4 5 //根据编号查询图片-模拟数据库 6 public Image findImageById(int id){ 7 8 Image image = new Image(); 9 image.setId(id); 10 if(id==1){ 11 image.setAuthor("小胜"); 12 image.setName("刘备"); 13 }else if(id==2){ 14 image.setAuthor("hacket"); 15 image.setName("孙权"); 16 } 17 return image; 18 } 19 }
4、domain-Image
1 // 图片 2 public class Image { 3 4 private int id; 5 private String name; 6 private String author; 7 public Image(){} 8 9 public int getId() { 10 return id; 11 } 12 public void setId(int id) { 13 this.id = id; 14 } 15 public String getName() { 16 return name; 17 } 18 public void setName(String name) { 19 this.name = name; 20 } 21 public String getAuthor() { 22 return author; 23 } 24 public void setAuthor(String author) { 25 this.author = author; 26 } 27 }
二、AJAX+JSON+JSP+SERVLET+JAVABEAN
1、jsp
1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 2 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 4 <html> 5 <head> 6 7 </head> 8 <!-- 拖动只适用于jsp和html --> 9 <img src="images/lb.jpg" id="1"/> 10 <div style="border-style: dotted;width: 100px;position: absolute;left: 500px;top: 50px;" > 11 编号：<span></span><br/> 12 名称：<span></span><br/> 13 作者：<span></span><br/> 14 </div> 15 <!-- <div id="lb"></div> --> 16 <img src="images/sq.jpg" id="2"/> 17 <!-- <div id="sq"></div> --> 18 <body> 19 20 <script type="text/javascript"> 21 22 //1）当页面被加载时，将<div>隐藏 23 window.onload=function(){ 24 //定位<div>标签 25 var divElement = document.getElementsByTagName("div")[0]; 26 //通过JS操作CSS样式 27 divElement.style.visibility="hidden"; 28 }; 29 30 //取得两幅图片对象 31 var imgElementArray = document.getElementsByTagName("img"); 32 var size = imgElementArray.length; 33 //alert(size); 34 35 //对两幅图片做事件监听 36 for(var i=0;i<size;i++){ 37 38 //b、鼠标移出 39 imgElementArray[i].onmouseout = function(){ 40 //定位<div>标签 41 var divElement = document.getElementsByTagName("div")[0]; 42 //通过JS操作CSS样式 43 divElement.style.visibility="hidden"; 44 } 45 46 //a、鼠标移入 47 imgElementArray[i].onmouseover = function(){ 48 //alert(this.id); 49 //记录鼠标的X，Y坐标-event(css)-clientX，clientY 50 var x = event.clientX+20; 51 var y = event.clientY+40; 52 //alert(x+y); 53 54 var id = this.id;//取得id将其传递到后台 55 //创建XHR对象 56 var xhr = createXHR(); 57 58 xhr.onreadystatechange = function(){//每次状态改变都会调用该方法 59 60 //2、JSON 61 if(xhr.readyState==4){ 62 63 if(xhr.status==200){ 64 //从AJAX引擎中取得json格式的字符串 65 var jsonString = xhr.responseText; 66 //将json格式的字符串转成json对象 67 var jsonObject = window.eval("("+jsonString+")");//特别的调用方式 68 //alert(jsonObject[0].id+"--"+jsonObject[0].name+"--"+jsonObject[0].author); 69 var name = jsonObject[0].name; 70 var author = jsonObject[0].author; 71 var id = jsonObject[0].id; 72 73 //将div标签显示出来 74 //定位<div>标签 75 var divElement = document.getElementsByTagName("div")[0]; 76 //通过JS操作CSS样式 77 divElement.style.visibility="visible"; 78 //js操作css 79 //在x,y坐标地方显示出来 80 divElement.style.left = x+"px";//firefox不支持，ie支持 81 divElement.style.top = y+"px";//firefox不支持，ie支持 82 83 document.getElementsByTagName("span")[0].innerHTML=id; 84 document.getElementsByTagName("span")[1].innerHTML=name; 85 document.getElementsByTagName("span")[2].innerHTML=author; 86 } 87 } 88 89 90 //1、XML格式 91 /* if(xhr.readyState==4){ 92 if(xhr.status==200){ 93 //alert("进来了"); 94 var docXML = xhr.responseXML;//获取服务器传送过来的xml文件 95 //alert(docXML); 96 if(id==1){ 97 //alert("刘备"); 98 //取得服务器来的信息 99 //获取author和name对象 100 var authorElement = docXML.getElementsByTagName("author")[0]; 101 //alert(authorElement.nodeName); 102 var nameElement = docXML.getElementsByTagName("name")[0]; 103 //获取author和name对象的文本信息 104 var author = authorElement.innerHTML; 105 var name = nameElement.innerHTML; 106 //alert(author+name);//得到作者和name的值 107 //获取刘备div 108 var lbElement = document.getElementById("lb"); 109 //将name和author值写入到div中去 110 lbElement.innerHTML = "name="+name+"："+"author="+author; 111 }else if(id==2){ 112 113 //alert("孙权："+sqElement.id); 114 //获取author和name 115 var authorElement = docXML.getElementsByTagName("author")[0]; 116 var nameElement = docXML.getElementsByTagName("name")[0]; 117 //获取author和name对象的文本信息 118 var author = authorElement.innerHTML; 119 var name = nameElement.innerHTML; 120 //alert(author+name);//得到作者和name的值 121 122 //将name和author值写入到div中去 123 //获取孙权div 124 var sqElement = document.getElementById("sq"); 125 sqElement.innerHTML = "name="+name+"："+"author="+author; 126 } 127 } 128 } */ 129 }; 130 xhr.open("get","/myday31/ImageServlet?id="+id+"&time="+new Date().toString(),true); 131 xhr.send(null); 132 }; 133 } 134 //创建XHR对象的方法 135 function createXHR(){ 136 var xhr = null; 137 try{ 138 //ie 139 xhr = new ActiveXObject("microsoft.xmlhttp"); 140 }catch(e){ 141 try{ 142 xhr = new XMLHttpRequest(); 143 }catch(e){ 144 alert("浏览器太差！"); 145 } 146 } 147 return xhr; 148 } 149 </script> 150 </body> 151 </html>
2、Servlet
1 import java.io.IOException; 2 import java.io.PrintWriter; 3 4 import javax.servlet.ServletException; 5 import javax.servlet.http.HttpServlet; 6 import javax.servlet.http.HttpServletRequest; 7 import javax.servlet.http.HttpServletResponse; 8 9 import net.sf.json.JSONArray; 10 11 import cn.zengfansheng.web.ajax.dao.ImageDao; 12 import cn.zengfansheng.web.ajax.domain.Image; 13 14 public class ImageServlet extends HttpServlet { 15 public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException { 16 17 //System.out.println("ImageServlet：：doGet()"); 18 int id = Integer.parseInt(request.getParameter("id")); 19 ImageDao imageDao = new ImageDao(); 20 Image image = imageDao.findImageById(id); 21 22 23 //2、使用第三方工具api将javabean对象和转换成符合JSON格式的字符串 24 //使用第三方工具API将JavaBean对象转换符合Json格式的字符串 25 JSONArray jsonArray = JSONArray.fromObject(image); 26 String jsonString = jsonArray.toString(); 27 //System.out.println(jsonString); 28 response.setContentType("text/html;charset=UTF-8"); 29 response.getWriter().write(jsonString); 30 31 //1、使用xml传送 32 /*response.setContentType("text/xml;charset=utf-8"); 33 PrintWriter pw = response.getWriter(); 34 pw.write("<root>"); 35 pw.write("<image>"); 36 pw.write("<author>"); 37 pw.write(image.getAuthor()); 38 pw.write("</author>"); 39 pw.write("<name>"); 40 pw.write(image.getName()); 41 pw.write("</name>"); 42 pw.write("</image>"); 43 pw.write("</root>");*/ 44 } 45 }
3、Image
4、ImageDao
by hacket
