Ajax留言本实现

plkong

浏览: 176881 次
性别:
来自: 深圳

最近访客更多访客>>

medy13

dev998

IT_PLAYER

coolwindsjm

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Ajax

Ajax IE CSS MySQL 应用服务器

创建一个Ajax应用程序的步骤做一总结：

第一步：创建XMLHttpRequest对象。

第二步：使用XMLHttpRequest对象的Open方法创建请求。

第三步：使用XMLHttpRequest对象的send方法发送请求。

第四步：使用XMLHttpRequest对象的 onreadystatechange事件来捕获请求状态信息。

我们以一个完整留言板应用程序来演示整个过程。

一、数据库设计

这里只需要一个留言表来保存留言，其表结构如下表所示：

字段名称	数据类型	说明
id	Int(4)	关键字，确定唯一性
title	Varchar(200)	标题
author	Varchar(200)	作者
date	Varchar(50)	留言日期
content	Varchar(600)	内容

二、客户端程序设计

在Ajax应用程序中，页面设计和传统Web设计方式没有什么差别，同样是使用HTML标记和CSS来将内容呈现给最终用户。所不同的是，Ajax的页面在载入完成后可以通过DOM模型来修改页面的内容和布局，达到改变显示效果。这就需要在进行页面设计时要去符合一定的标准，要求表现与数据结构相分离。

1. 创建一个CSS样式文件style.css,代码如下：

@CHARSET "UTF-8";
body{
font-size:0.75em;
text-align:center;
}
dl{
margin:0;
}
dt{
background-color:#339900;
color:#FFFFFF;
margin:1px;
padding:0 3px;
}
dd{
margin:3px;
}
div{
margin:auto;
line-height:150%;
text-align:left;
width:400px;
border:1px solid #006600;
}

#postMsg{
margin-top:10px;
}
dd.button{
text-align:center;
}
dd.button input{
margin:0 20px;
}

2.页面message设计：

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%
//数据库用户名和密码
String userName = "root";
String userPasswd = "1984428";
//需要连接的数据库名
String dbName = "studyajax";
//表名
String tableName = "message";
//创建连接并执行查询操作
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/"+dbName,userName,userPasswd);
Statement statement = conn.createStatement();
String sql = "SELECT * FROM " + tableName;
ResultSet rs = statement.executeQuery(sql);

//获取数据结果集
%>
<!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">
<link type="text/css" rel="stylesheet" rev="stylesheet"
	href="CSS/style.css" />
<title>Ajax实现留言板</title>
<script language="javascript" type="text/javascript">
<!--
//将用户留言信息显示到当前页面
function addToList(date){
	//获取留言本div容器
	var msg = document.getElementById("msgList");
	//为了解决IE与Firefox在兼容性，一般获取对象使用
	//document.getElementById("msgList"),使用对象ID来访问对象
	//这里需要注意的是，IE中大小写不区分的，而Firefox中大小写严格区分
	//所以使用时按照大小写区分来书写代码
	//创建dl标记及其子标记
	var dl = document.createElement("dl");
	var dt = document.createElement("dt");
	var dd1 = document.createElement("dd");
	var dd2 = document.createElement("dd");
	//将结点插入到相应的位置
	msg.insertBefore(dl,msg.firstChild);
	dl.appendChild(dt);
	dl.appendChild(dd1);
	dl.appendChild(dd2);
	//填充留言板
	dt.innerHTML = "标题：" + document.forms[0].title.value;
	dd1.innerHTML = "作者：" + document.forms[0].author.value + "   日期:"+date;
	dd2.innerHTML = document.forms[0].content.value;
	//清空输入框内容
	document.forms[0].title.value = "";
	document.forms[0].author.value = "";
	document.forms[0].content.value = "";
}
//将留言异步提交到服务器
function ajaxSubmit(){
	//获取用户输入
	var title = document.forms[0].title.value;
	
	var author = document.forms[0].author.value;
	var content = document.forms[0].content.value;
	
	//创建XMLHttpRequest对象
	var xmlhttp;
	try{
	//IE 5.0 
		xmlhttp = new ActiveXObject('Msxm12.XMLHTTP');
	}catch(e){
		try{
		//IE 5.5 及更高版本
			xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
		}catch(e){
			try{
			//其他浏览器
				xmlhttp = new XMLHttpRequest();
			}catch(e){}
		}
	}
		xmlhttp.open("post","msgAdd.jsp",true);
	//在使用post方法提交请求时，需要设置HTTP头
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    //发送请求
	xmlhttp.send("title="+escape(title)+"&author="+escape(author)+"&content="+escape(content));
	//xmlhttp.send(null);
		//创建请求结果处理程序
	xmlhttp.onreadystatechange = function(){
		if(4==xmlhttp.readyState){
		//在测试中，可能会出现XMLHttpRequest.status的值为 0，此时表示本地调用成功
		//alert("xmlhttp.responseText1="+xmlhttp.responseText);
			if(200==xmlhttp.status){
				var date = xmlhttp.responseText;
				//alert("xmlhttp.responseText="+xmlhttp.responseText);
				addToList(date);
			}else{
				alert("error"+"xmlhttp.readyState="+xmlhttp.readyState+"xmlhttp.status="+xmlhttp.status);
			}
		}
	}
	
}
//-->
</script>
</head>
<body>
<!-- 开始显示留言 -->
<div id="msgList">
<%
while( rs.next()){
%>
<dl>
	<dt>标题：<%=rs.getString("title") %></dt>
	<dd>作者：<%=rs.getString("author") %>   日期： <%=rs.getString("date") %></dd>
	<dd><%=rs.getString("content") %></dd>
</dl>
<%} %>
</div>
<% 
	rs.close();
	statement.close();
	conn.close();
%>
<!-- 结束显示留言 -->
<div id="postMsg">
<form method="post">
<dl>
<dt>发表你的留言：</dt>
<dd>标题：<input type="text" maxlength="150" size="45" name="title" /> </dd>
<dd>作者：<input type="text" maxlength="150" size="45" name="author" /></dd>
<dd>内容 <textarea rows="10" cols="45" name="content"></textarea></dd>
<dd>
<input type="button" value="提交" onclick="ajaxSubmit()"/>
<!--
注意：提交按钮的type必须为button，而不是submit。
 -->
<input type="reset" value="重填"/>
</dd>
</dl>
</form>
</div>
</body>
</html>

三、服务器端程序设计

在Ajax应用程序中，服务器端程序接收客户端发送过来的参数并进行一定的处理，然后返回一个执行状态或客户端需要的返回值。

本留言板效果是当用户提交完信息后，页面不需要刷新，立即将显示用户先前自己提交的内容。由于留言内容是客户端页面提交的，因而客户端知道留言内容，服务器端在保存了留言内容后，并不需要返回留言内容，只需要返回一个留言提交成功的状态。有时服务器端合客户端的时间并不一定相同，所以为了统一期间，在服务器端成功保存留言内容后，返回一个服务器端的留言时间。这样的设计就减少了客户端和服务器端数据的传递量，从而提够速度。达到快速响应的效果。

服务器端页面为msgAdd.jsp，其源代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*,java.io.*,java.text.SimpleDateFormat" %>
<%@page import="java.util.Date"%>
<%
//数据库用户名和密码
String userName = "root";
String userPasswd = "111111";
//需要连接的数据库名
String dbName = "studyajax";
//表名
String tableName = "message";
//创建连接并执行查询操作
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/"+dbName,userName,userPasswd);
Statement statement = conn.createStatement();
//格式化日期
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String date = sdf.format(new Date()).toString();
String sql = "INSERT INTO " + tableName +"(title,author,date,content) values('"+request.getParameter("title")+"','"+request.getParameter("author")+"','"+ date +"','" + request.getParameter("content")+"')";
int result = statement.executeUpdate(sql);
 	response.setContentType("text/html; charset=UTF-8");
 	response.setHeader("Cache-Control", "no-cache");
	PrintWriter pout = null;
 	try {
 		pout = response.getWriter();
 		pout.print(date);
 	} catch (IOException e) {
		 e.printStackTrace();
 	}finally{
 		statement.close();
 		conn.close();
 	}	
%>