开发学院软件开发 Java JAVA AJAX教程第四章—AJAX和MVC的简单结合阅读

JAVA AJAX教程第四章—AJAX和MVC的简单结合

　2009-10-27 00:00:00　来源：WEB开发网　　　

核心提示：今天我最后要实现的效果，当鼠标放到图片上时会根据，JAVA AJAX教程第四章—AJAX和MVC的简单结合，会把数据库库里的数据读出，通过显示框显示出来，详细的注释写在代码，这样方便理解和查看，这个在很多网上商店都有用到这里效果，我们这里用AJAX来实现这个效果

今天我最后要实现的效果，当鼠标放到图片上时会根据，会把数据库库里的数据读出，通过显示框显示出来。这个在很多网上商店都有用到这里效果，我们这里用AJAX来实现这个效果。这个实例里结合了MySql、Servlet还有Js，理论性很少，但通过实践来感受理论知识。

一个页面中应用了AJAX，同时他也能实现MVC框架，可以吗？当然可以的。通过页面调用AJAX，这个页面就是MVC中的V，他用来前台显示与用户交互的内容。用JavaBean作为MVC中的M，来封装一些我们需要的功能和数据，这样便于C将信息传给V。这里就牵涉到C，什么是C呢，这里我们在 Model2中的C就是Servlet，他用来对具体的事情进行控制。M-V-C都齐全了，这样我们就完成一个MVC了。在下面的文件结构中，让我给你指出哪些是M-V-C。main.html和login.jsp是V，DB.java和Product.java是JavaBean也就是M，而 LoginAction.java和TipServlet.java是C，下面就来看看如何把AJAX和MVC结合起来。

这里是我们的文件结构，我们需要一个页面main.html来承载前台；一个数据库数据来存储我们的设备；由于这里还是基于MVC框架来做的，所以除了页面外，我们还需要Servlet来实现具体的功能，DB.java、Product.java和TipServlet.java类。详细的注释写在代码，这样方便理解和查看。

我们先来看main.html代码(详细注释写在代码)：

<!DOCTYPE　html　PUBLIC　"-//W3C//DTD　HTML　4.01　Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta　http-equiv="Content-Type"　content="text/html;　charset=UTF-8"> <script　type="text/javascript"> //定义显示框 var　datadiv; var　datatablebody; //当前DOM节点 var　curelement; var　XMLHttpReq　=　false; //创建XMLHttpRequest对象 function　createXMLHttpRequest(){ if(window.XMLHttpRequest){ XMLHttpReq　=　new　XMLHttpRequest(); }else　if(window.ActiveXObject){ try{ XMLHttpReq　=　new　ActiveXObject("MSXML2.XMLHTTP"); }catch(e){ try{ XMLHttpReq　=　new　ActiveXObject("Mircsoft.XMLHTTP"); }catch(e1){} } } } //发送请求函数 function　getdatail(element){ datatablebody　=　document.getElementById("databody"); datadiv　=　document.getElementById("popup"); createXMLHttpRequest(); curelement　=　element; var　url　=　"TipServlet?key="　+　escape(element.id); XMLHttpReq.open("GET",url,true); XMLHttpReq.onreadystatechange　=　processResponse; XMLHttpReq.send(null); } //处理返回信息 function　processResponse(){ if(XMLHttpReq.readyState　==　4){ if(XMLHttpReq.status　==　200){ //下面的内容时显示提示框 //首先先删除之前显示提示框中的内容 cleardata(); //设置提示框的坐标位置 setoffsets(); //alert(data); //解析从服务端返回的数据内容 var　content　=　XMLHttpReq.responseXML.getElementsByTagName("content")[0].firstChild.data; //alert(content); var　row　=　createrow(content); //将数据填写到提示框中 datatablebody.appendChild(row); }else{ window.alert("你请求的页面有异常"); } } } //清楚提示框 function　cleardata(){ //alert(datatablebody.childNodes.length); //获得datatablebody的值的子节点的长度 var　ind　=　datatablebody.childNodes.length; for(　var　i　=　ind　-1;　i　>=　0;　i--　){ //清楚每个子节点 datatablebody.removeChild(datatablebody.childNodes[i]); } datadiv.style.border="none"; } //生成表格内容行 //这里牵涉到DOM技术，所以还是需要大家掌握一定的DOM知识 function　createrow(data){ var　row,cell,txtnode; row　=　document.createElement("tr"); cell　=　document.createElement("td"); cell.setAttribute("bgcolor",　"#fffafa"); cell.setAttribute("border",　"0"); txtnode　=　document.createTextNode(data); cell.appendChild(txtnode); row.appendChild(cell); return　row; } //设置显示位置 function　setoffsets(){ datadiv.style.border　=　"black　1px　solid"; var　top　=　0; var　left　=　0; while(curelement){ //当前鼠标所在元素离浏览器顶部的位置 top　+=　curelement["offsetTop"]; //当前鼠标所在元素离浏览器左侧的位置 left　+=　curelement["offsetLeft"]; //alert(top); curelement　=　curelement.offsetParent; } //定义显示框距离浏览器顶部的位置 datadiv.style.left　=　left　+　"px"; //定义显示框距离浏览器左侧的位置 datadiv.style.top　=　top　+　"px"; } </script> <title>Insert　title　here</title> </head> <body　leftmargin="0"　topmargin="0"> <table　cellpadding="0"　cellspacing="0"　>"778"　align="center"　border="0"> <tbody> <tr> <td　height="10"></td> </tr> </tbody> </table> <table　height="148"　cellpadding="0"　cellspacing="0"　>"778"　align="center"　border="0"> <tbody> <tr　valign="top"> <td　>"236"> <table　>"375"　border="1"> <tr> <td　>"348"　height="1"> </td> <td　>"29"　height="1"> </td> </tr> <tr> <td　>"348"　height="13"> <table　id="autonumber"　style="border-collapse:collapse"　bordercolor="#111111"　height="20"　cellpadding="0"　cellspacing="0"　>"100%"　border="0"> <tbody> <tr> <td　align="center"> <b>蜀国武将</b> </td> </tr> </tbody> </table> </td> <td　>"29"　height="13"> </td> </tr> <tr> <td　valign="top"　height="328"　>"348"> <table　cellpadding="0"　cellspacing="0"　>"100%"　border="1"> <tbody> <tr> <td　>"50%">  <img　id="1"　　　vspace="6"　border="0"　alt=""　src="http://tech.ddvip.com/2009-10/images/zf.jpg"> <br> </td> <td　>"50%"> <br> 武将名称：张飞 <br> 会员价：2500元 <br> </td> </tr> <tr> <td　>"50%"> <img　id="2"　　　vspace="6"　border="0"　alt=""　src="http://tech.ddvip.com/2009-10/images/gy.jpg"> <br> </td> <td　>"50%"> <br>　武将名称：关羽 <br> 会员价：2500元 <br> </td> </tr> <tr> <td　>"50%"> <img　id="3"　　　vspace="6"　border="0"　alt=""　src="http://tech.ddvip.com/2009-10/images/zy.jpg"> <br> </td> <td　>"50%"> <br>　武将名称：赵云 <br>　会员价：2500元 <br> </td> </tr> </tbody> </table> </td> <td> </td> </tr> </table> </td> </tr> </tbody> </table> <div　style="position:absolute;"　id="popup"> <table　bgcolor="#fffafa"　border="0"　cellpadding="2"　cellspacing="2"> <tbody　id="databody"> </tbody> </table> </div> </body> </html>