這裡我們再理解了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" "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通過onMouseOver方法作為引數傳入到呼叫servlet的url中 -->
<img id="1" onMouseOver="getdatail(this);" onMouseOver="clear();" vspace="6" border="0" alt="" src="images/zf.jpg">
<br>
</td>
<td >"50%">
<br>
武將名稱：
張飛
<br>
會員價：2500元
<br>
</td>
</tr>
<tr>
<td >"50%">
<img id="2" onMouseOver="getdatail(this);" onMouseOver="clear();" vspace="6" border="0" alt="" src="images/gy.jpg">
<br>
</td>
<td >"50%">
<br> 武將名稱：
關羽
<br>
會員價：2500元
<br>
</td>
</tr>
<tr>
<td >"50%">
<img id="3" onMouseOver="getdatail(this);" onMouseOver="clear();" vspace="6" border="0" alt="" src="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>
好了，這就是main.html的程式碼，其中的js部門同樣用到了上一節AJAX的實現步驟，萬變不離其中嘛，還是他哦，所以只要改動一小部分就可以應該在很多地方，有很強的複用性。
建立資料,在MySql中建立一個名為ajaxtest的資料庫，在其下新增表和資料，如下：
use ajaxtest;
show tables;
create table sort(
id integer primary key,
name varchar(40) not null
);
create table product(
id integer primary key,
sortid integer not null references sort(id),
name varchar(50) not null,
price double not null,
saleprice Double not null,
descript text(500) not null,
contents text(2000) not null,
saledate date not null,
salecount integer null,
image varchar(50) null
);
insert into sort values(1,'張飛');
insert into sort values(2,'趙雲');
insert into sort values(3,'關羽');
insert into product values(1,1,'張飛',140000,13500,'張飛','五虎上將張飛','2009-10-12',100,'image/zf,jpg');
insert into product values(2,1,'趙雲',140000,13500,'趙雲','五虎上將趙雲','2009-10-12',100,'image/zy,jpg');
insert into product values(3,1,'關羽',140000,13500,'關羽','五虎上將之首','2009-10-12',100,'image/gy,jpg');
好了，資料庫做好了，現在就要有一個JavaBean來實現資料的連線和查詢。
DB.java程式碼：
package classmate;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
public class DB {
Connection conn = null;
Statement stmt = null;
ResultSet rs = null;
public DB(){
try{
Class.forName("com.mysql.jdbc.Driver");
//System.out.println("classdb");
}catch(java.lang.ClassNotFoundException e){
e.printStackTrace();
}
}
public ResultSet executeQuery(String sql){
try{
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/ajaxtest", "root", "888888");
//System.out.println("conn");
stmt = conn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE, ResultSet.CONCUR_READ_ONLY);
//System.out.println("stmt");
rs = stmt.executeQuery(sql);
//System.out.println("rs");
}catch(SQLException e){
e.printStackTrace();
}
return rs;
}
public void close(){
if(rs != null){
try{
rs.close();
}catch(Exception e1){
e1.printStackTrace();
}
}
if(stmt != null){
try{
stmt.close();
}catch(Exception e1){
e1.printStackTrace();
}
}
if(conn != null){
try{
conn.close();
}catch(Exception e1){
e1.printStackTrace();
}
}
}
}
當然我還需要有一個JavaBean類用來封裝對商品資訊進行操作的業務邏輯，也就是MVC中的M，這裡我們用product來實現，product.java程式碼如下：
package classmate;
import java.sql.ResultSet;
public class Product {
private int id;
private String name;
private String contents;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getContents() {
return contents;
}
public void setContents(String contents) {
this.contents = contents;
}
public static Product GetDetail(DB db,Integer Id) throws Exception{
ResultSet rs;
String strSql = null;
String rplContent = null;
strSql = "select * from product where id = " + Id + ";";
System.out.println(strSql);
rs = db.executeQuery(strSql);
System.out.println(rs);
Product product = new Product();
if(rs.next()){
//System.out.println("11");
product.setName(rs.getString("name"));
//System.out.println(rs.getString("name"));
//System.out.println(strSql);
rplContent = rs.getString("contents");
rplContent = rplContent.replace("/n", "<br>");
product.setContents(rplContent);
//System.out.println(rplContent);
}
return product;
}
}
好了，最關鍵也是最重要的部分Servlet，也就是MVC中C他都來幹嘛呢，哦，原來他是用來讀取資料，並將資料寫成XML傳送回客戶端。
package classmate;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.ResultSet;
import java.sql.SQLException;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class TipServlet extends HttpServlet {
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
req.setCharacterEncoding("UTF-8");
Integer key = Integer.valueOf(req.getParameter("key"));
DB db = new DB();
Product product = null;
try{
product = Product.GetDetail(db,key);
}catch(Exception e){
e.printStackTrace();
}
resp.setContentType("text/xml;charset=UTF-8");
resp.setHeader("Cache-Control", "no-cache");
PrintWriter out = resp.getWriter();
out.println("<response>");
out.println("<content>" + product.getContents() + "</content>");
out.println("</response>");
//System.out.println("<response><content>" + product.getContents() + "</content></response>");
out.close();
}
@Override
public void init(ServletConfig config) throws ServletException {}
}
完成這些，我們就完成了所有的程式碼了，大家一起試試看，是不是可以了。一個簡單AJAX例項完成了，同時他也是一個MVC框架的。
最終效果如：
