JAVA Ajax Tutorial Fourth Chapter-ajax and MVC simple combination

Today I finally want to achieve the effect, when the mouse is placed on the picture, will be based on the data in the database library read out, displayed through the display box. This is useful here in many online stores, and we use AJAX to achieve this effect. This example combines MySQL, servlet, and JS, with little theory, but it is a practice to feel the theoretical knowledge.

Ajax is applied to a page, and he can implement the MVC framework, can it? Of course you can. Call Ajax through the page, which is the V in MVC, which is used by the foreground to display the content that interacts with the user. Use JavaBean as the M in MVC to encapsulate some of the features and data we need so that C can pass information to V. So here's the C, what's C, where we're in Model2 C is a servlet, and he uses it to control the specifics. The m-v-c are all complete, so we're done with an MVC. In the following file structure, let me show you what is m-v-c. Main.html and login.jsp are V,db.java and Product.java are JavaBean and M, and Loginaction.java and Tipservlet.java are C, let's see how Ajax and MVC can be combined.

Here is our file structure, we need a page main.html to host the front desk; a database of data to store our devices; Since this is based on the MVC framework, we need a servlet to implement specific functions in addition to the page, Db.java, Product.java and Tipservlet.java classes. Detailed comments are written in the code so that it is easy to understand and view.

Let's take a look at the main.html code (detailed note written in code):

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<script type= "Text/javascript" >
Define a display box
var Datadiv;
var datatablebody;
Current DOM node
var curelement;
var xmlhttpreq = false;
Creating XMLHttpRequest Objects
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) {}
}
}
}
Send Request function
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);
}
Processing return information
function ProcessResponse () {
if (xmlhttpreq.readystate = = 4) {
if (Xmlhttpreq.status = = 200) {
The following content displays a prompt box
First remove the contents of the Prompt box before
ClearData ();
Set the coordinate position of the prompt box
Setoffsets ();
alert (data);
Resolves data content returned from the server
var content = XMLHttpReq.responseXML.getElementsByTagName ("content") [0].firstchild.data;
alert (content);
var row = CreateRow (content);
Fill out the data in the prompt box
Datatablebody.appendchild (row);
}else{
Window.alert ("The page you requested has an exception");
}
}
}
Clear Cue Box
function ClearData () {
alert (datatablebody.childNodes.length);
The length of the child node that gets the value of the Datatablebody
var ind = Datatablebody.childNodes.length;
for (var i = ind-1 i &gt;= 0; i--) {
Clear each child node
Datatablebody.removechild (Datatablebody.childnodes[i]);
}
Datadiv.style.border= "None";
}
Generate Table Content rows
This involves DOM technology, so we still need some knowledge of the 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;
}
Set Display location
function Setoffsets () {
Datadiv.style.border = "Black 1px solid";
var top = 0;
var left = 0;
while (curelement) {
The location of the current mouse element from the top of the browser
Top + + curelement["offsettop"];
The location of the current mouse element from the left side of the browser
Left + + curelement["offsetleft"];
alert (top);
Curelement = curelement.offsetparent;
}
Define the position of the display box from the top of the browser
Datadiv.style.left = left + "px";
Define the position of the display box from the left side of the browser
Datadiv.style.top = top + "px";
}
</script>
<title>insert title here</title>
<body leftmargin= "0" topmargin= "0" >
<table cellpadding= "0" cellspacing= "0" > "778" align= "center" border= "0" >
<tbody>
<tr>
&LT;TD height= "Ten" ></td>
</tr>
</tbody>
</table>
<table height= "148" cellpadding= "0" cellspacing= "0" > "778" align= "center" border= "0" >
<tbody>
&LT;TR valign= "Top" >
&LT;TD > "236" >
<table > "375" border= "1" >
<tr>
&LT;TD > "348" height= "1" >&nbsp;</td>
&LT;TD > "height=" "1" >&nbsp;</td>
</tr>
<tr>
&LT;TD > "348" height= ">
<table id= "autonumber" style= "Border-collapse:collapse" bordercolor= "#111111" height= "cellpadding=" "0" cellspacing= "0" > "100%" border= "0" >
<tbody>
<tr>
&LT;TD align= "center" >
<b> Shu Generals </b>
</td>
</tr>
</tbody>
</table>
</td>
&LT;TD > "height=" >&nbsp;</td>
</tr>
<tr>
&LT;TD valign= "Top" height= "328" > "348" >
<table cellpadding= "0" cellspacing= "0" > "100%" border= "1" >
<tbody>
<tr>
&LT;TD > "50%" >
The IDs of the <!--below are passed as arguments to the URL of the calling servlet via the onmouseover method-->

<br>
</td>
&LT;TD > "50%" >
<br>
Name of the generals:
Zhang Fei
<br>
Member Price: 2500 RMB
<br>
</td>
</tr>
<tr>
&LT;TD > "50%" >

<br>
</td>
&LT;TD > "50%" >
<br> Generals Name:
Guan yu
<br>
Member Price: 2500 RMB
<br>
</td>
</tr>
<tr>
&LT;TD > "50%" >

<br>
</td>
&LT;TD > "50%" >
<br> Generals Name:
Zhao
<br> member Price: 2500 RMB
<br>
</td>
</tr>
</tbody>
</table>
</td>
<td>&nbsp;</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>