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; 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

相关阅读:
OSG中的示例程序简介(转)
空间点到直线垂足坐标的解算方法 (转)
OpenscenGraph中控制swapbuffer的方法（用于多机大屏幕同步显示机制）
吏治？官治？
C++中使用union的几点思考(转)
一个穷人移民美国三年的生活经历(转)
展望99股市：谁是重组大黑马？(转)
mysql 在一个实例运行情况下再搭建一个实例
 在CentOS下安装crontab服务
 Zabbix监控之迁移zabbix server
原文地址：https://www.cnblogs.com/hacket/p/3063964.html