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

今天我最后要实现的效果,当鼠标放到图片上时会根据,会把数据库库里的数据读出,通过显示框显示出来。这个在很多网上商店都有用到这里效果,我们这里用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 &gt;= 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">&nbsp;</td>
<td >"29" height="1">&nbsp;</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">&nbsp;</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>&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>
</html>

时间: 2016-01-11

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

JAVA AJAX教程第三章—AJAX详细讲解

现在开始深入AJAX,这里还是按老思路,理论和实践相结合.这章的内容主要是讲解AJAX步骤详解,下一张将会用一个AJAX技术实现页面提示效果的实例来说明AJAX的实现. 一.AJAX步骤详解 AJAX实质上是遵循Request/Server模式来进行工作的,这个框架基本的流程包括下面几个具体的步骤: (1)XMLHttpRequest对象初始化 (2)发送请求 (3)服务器接收请求并进行处理 (4)服务器返回响应数据 (5)客户端接收 (6)依据响应数据修改客户端页面内容 整个过程中的通信交互方

AJAX教程实例,ASP+AJAX+ACCESS数据库应用教程(附源码)

access|asp+|数据|数据库|ajax教程 AJAX教程实例[阿里西西原创]  其实说起AJAX的初级应用是非常简单的,通俗的说就是客户端(javascript)与服务端(asp或php等)脚本语言的数据交互. 看完本篇ajax实例教程,我相信你也可以轻松做出一个初级的AJAX应用. 你也可以直接访问:http://www.alixixi.com/web/web/ajax/jiaocheng.html预览此篇ajax教程的源码示例. 好,下面我们就始一步步让你了解AJAX+ASP基础应用

[四天学会ajax] 学习Ajax教程第四天,利用 DOM 进行 Web 响应

ajax|dom|web|教程|响应 在 HTML 的外部文件中一样,标记的组织与其样式.格式和行为是分离的.虽然您肯定可以用 JavaScript 更改元素或文本的样式,但实际更改您的标记所布置的组织却更加有趣. 只要牢记您的标记只为您的页面提供组织.框架,您就能立于不败之地.再前进一小步,您就会明白浏览器是如何接受所有的文本组织并将其转变为超级有趣的一些东西的,即一组对象,其中每个对象都可被更改.添加或删除. 文本标记的优点 在讨论 Web 浏览器之前,值得考虑一下为什么纯文本绝对 是存储

[四天学会ajax] 学习Ajax教程第三天,Ajax 中的高级请求和响应

ajax|高级|教程|请求|响应 对于很多 Web 开发人员来说,只需要生成简单的请求并接收简单的响应即可:但是对于希望掌握 Ajax 的开发人员来说,必须要全面理解 HTTP 状态代码.就绪状态和 XMLHttpRequest 对象.在本文中,Brett McLaughlin 将向您介绍各种状态代码,并展示浏览器如何对其进行处理,本文还给出了在 Ajax 中使用的比较少见的 HTTP 请求. 在本系列的 上篇文章 中,我们将详细介绍 XMLHttpRequest 对象,它是 Ajax 应用程序

Java XML教程(第5章)

xml|教程 来源:http://d23xapp2.cn.ibm.com/developerWorks/education/xml/xmljava/tutorial/xmljava-1-1.html 第五章 解析器高级功能 概览 我们已经讨论了使用一个 XML 解析器来处理 XML 文档的基础.在本章节,我们将探讨一些高级概念. 首先,我们将从头构建一棵 DOM 树.换而言之,我们将不需要一个 XML 源文件来创建一个 Document 对象. 然后,我们将向您显示如何使用解析器来处理包含在一个

XSL基础教程第四章

基础教程   XSL索引    XSL可以用来对一个XML文档进行索引.      将索引信息放在哪里    现在重新看看在以前许多章节中都曾看到过的 XML文档:       <?xml version="1.0"?>       <CATALOG>       <CD>       <TITLE>Empire Burlesque</TITLE>       <ARTIST>Bob Dylan</ARTIS

C语言学习教程第四章-数组(3)

二维数组 前面介绍的数组只有一个下标,称为一维数组, 其数组元素也称为单下标变量.在实际问题中有很多量是二维的或多维的, 因此C语言允许构造多维数组.多维数组元素有多个下标, 以标识它在数组中的位置,所以也称为多下标变量. 本小节只介绍二维数组,多维数组可由二维数组类推而得到.二维数组类型说明二维数组类型说明的一般形式是: 类型说明符 数组名[常量表达式1][常量表达式2]-: 其中常量表达式1表示第一维下标的长度,常量表达式2 表示第二维下标的长度.例如: int a[3][4]; 说明了一个

C语言学习教程第四章-数组(2)

数组元素的表示方法 数组元素是组成数组的基本单元.数组元素也是一种变量, 其标识方法为数组名后跟一个下标. 下标表示了元素在数组中的顺序号.数组元素的一般形式为: 数组名[下标] 其中的下标只能为整型常量或整型表达式.如为小数时,C编译将自动取整.例如,a[5],a[i+j],a[i++]都是合法的数组元素. 数组元素通常也称为下标变量.必须先定义数组, 才能使用下标变量.在C语言中只能逐个地使用下标变量, 而不能一次引用整个数组. 例如,输出有10 个元素的数组必须使用循环语句逐个输出各下标变

C语言学习教程第四章-数组(1)

数 组 数组在程序设计中,为了处理方便, 把具有相同类型的若干变量按有序的形式组织起来.这些按序排列的同类数据元素的集合称为数组.在C语言中, 数组属于构造数据类型.一个数组可以分解为多个数组元素,这些数组元素可以是基本数据类型或是构造类型.因此按数组元素的类型不同,数组又可分为数值数组.字符数组.指针数组.结构数组等各种类别. 本章介绍数值数组和字符数组,其余的在以后各章陆续介绍.数组类型说明 在C语言中使用数组必须先进行类型说明. 数组说明的一般形式为: 类型说明符 数组名 [常量表达式],