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

这里我们再理解了AJAX后，开始来用实例感受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 /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(你请求的页面有异常); } } } //清楚提示框