`

ajax留言本

    博客分类:
  • ajax
 
阅读更多
java bean代码:
package com.bean;

public class Message {
	private int id;
	
	private String name;
	
	private String message;
	
	private String postdate;
	
	public Message(int id ,String name, String message, String postdate){
		this.id = id;
		this.name = name;
		this.message = message;
		this.postdate = postdate;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getMessage() {
		return message;
	}

	public void setMessage(String message) {
		this.message = message;
	}

	public String getPostdate() {
		return postdate;
	}

	public void setPostdate(String postdate) {
		this.postdate = postdate;
	}

	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}
	
}


数据库访问代码:
package com.dbAccess;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;

import com.bean.Message;

public class DB {

	private String username = "root";

	private String password = "admin";

	private String url = "jdbc:mysql://localhost:3306/guestbook";

	private String driver = "com.mysql.jdbc.Driver";

	private Connection connection = null;

	private Statement statement = null;

	private ResultSet resultSet = null;
	
	private Message msg = null;
	
	private String queryString ="select * from message";
	
	public boolean openConnection(){
		boolean b = false;
		try{
			Class.forName(driver).newInstance();
			connection = DriverManager.getConnection(url,username,password);
			b = true;
		}catch(Exception e){
			e.printStackTrace();
			b = false;
		}
		return b;
	}

	@SuppressWarnings("unchecked")
	public List query(){
		List list = new ArrayList();
		int id = 0;
		String name = null;
		String message = null;
		String postdate = null;
		try{
			this.openConnection();
			statement = connection.createStatement();
			resultSet = statement.executeQuery(queryString);
			while(resultSet.next()){
				id = resultSet.getInt("id");
				name = resultSet.getString("name");
				message = resultSet.getString("message");
				postdate = resultSet.getString("postdate");
				msg = new Message(id,name,message,postdate);
				list.add(msg);
			}
		}catch(Exception e){
			e.printStackTrace();
		}finally{
			this.closeResultSet();
			this.closeStatement();
			this.closeConnection();
		}
		return list;
	}
	
	public boolean insert(String sqlString){
		boolean b = false;
		try{
			this.openConnection();
			statement = connection.createStatement();
			statement.execute(sqlString);
			b = true;
		}catch(Exception e){
			e.printStackTrace();
			b = false;
		}
		return b;
	}

	public void closeConnection(){
		try{
			if(connection!=null){
				connection.close();
			}
		}catch(Exception e){
			e.printStackTrace();
		}
	}

	public void closeStatement(){
		try{
			if(statement!=null){
				statement.close();
			}
		}catch(Exception e){
			e.printStackTrace();
		}
	}

	public void closeResultSet(){
		try{
			if(resultSet!=null){
				resultSet.close();
			}
		}catch(Exception e){
			e.printStackTrace();
		}
	}

	public Connection getConnection() {
		return connection;
	}

	public void setConnection(Connection connection) {
		this.connection = connection;
	}

	public Statement getStatement() {
		return statement;
	}

	public void setStatement(Statement statement) {
		this.statement = statement;
	}

	public ResultSet getResultSet() {
		return resultSet;
	}

	public void setResultSet(ResultSet resultSet) {
		this.resultSet = resultSet;
	}

	public Message getMsg() {
		return msg;
	}

	public void setMsg(Message msg) {
		this.msg = msg;
	}
	
}



servlet代码:
package com.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Calendar;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

import com.dbAccess.DB;

@SuppressWarnings("unchecked")
public class GuestBook extends HttpServlet {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response)
	throws ServletException, IOException {
		String action = request.getParameter("action");
		if(action.equals("getAll")){
			getAll(request,response);
		}else if(action.equals("addNew")){
			addNew(request,response);
		}
	}

	protected void getAll(HttpServletRequest request, HttpServletResponse response)
	throws ServletException, IOException {
		DB db = new DB();
		List list = db.query();
		PrintWriter out = response.getWriter();
		JSONArray jsonArray = JSONArray.fromObject(list);
		out.println(jsonArray);
		out.flush();
		out.close();
	}

	protected void addNew(HttpServletRequest request, HttpServletResponse response)
	throws ServletException, IOException {
		String name = request.getParameter("name");
		String message = request.getParameter("message");
		Calendar calendar = Calendar.getInstance();
		
		String postdate = calendar.get(Calendar.YEAR)+"-"+(calendar.get(Calendar.MONTH)+1)+"-"+calendar.get(Calendar.DATE);
		String sqlString = "insert into message(name ,message , postdate) values('"+name+"','"+message+"','"+postdate+"')";
		DB db = new DB();
		db.insert(sqlString);
		PrintWriter out = response.getWriter();
		out.println(1);
		out.flush();
		out.close();
	}
}


css样式文件:
@charset "utf-8";
/* CSS Document */
* {
	margin:0;
	padding:0;
}
html {
	background-color:#eee;
	height:100%;
}
body {
	padding:15px;
	font-size:11px;
	width:500px;
	background-color:#fff;
	height:100%;
	font-family:Tahoma;
	border-left:20px solid #ccc;
}
ul {
	list-style:none;
	border-top:1px solid #999;
	height:350px;
	overflow-x:auto;
	overflow-y:scroll;
}
span {
	font-weight:bold;
	font-size:12px;
}
span.date {
	margin-left:10px;
	font-weight:normal;
	font-size:11px;
}
li {
	border-bottom:1px dashed #666;
	line-height:20px;
}
form {
	margin-top:10px;
	border-top:1px solid #999;
}
label {
	display:block;
	line-height:20px;
	font-weight:bold;
	cursor:pointer;
	background-color:#999;
	color:#fff;
	margin:3px 0;
	padding-left:5px;
	width:100%;
}
#txtName , #txtContent {
	width:100%;
	font-size:11px;
}
#btnSubmit {
	display:block;
	margin-top:3px;
	border:1px solid #666;
	padding:2px 5px;
	width:100%;
}
.msgBox {
	font-size:11px;
}


javascript代码:
1、guestbook.js
  
var url ='guestBook';

function init(){
	document.getElementById('btnSubmit').onclick = submitMessage;
	readMessages();
}

function readMessages(){

	var options = {
		method:'GET',
		parameters:'action=getAll',
		onLoading:function(){
		document.getElementById('loadingMsg').style.display = '';
		},
		onSuccess:function(x){
			var resBook = x.responseText;
			try{
				var messages = resBook;
				var messages = eval('('+resBook+')');
				
				for(var i = 0;i < messages.length; i++){
					displayMessage(messages[i]);
				}
				document.getElementById('loadingMsg').style.display = 'none';
				//document.getElementById('btnSubmit').disabled = false;
				doScroll();
			}catch(e){
				
			}
		},
		onFailure:function(){
			document.getElementById('loadingMsg').style.display = 'none';
			window.alert('request failure.');
		}
	};
	ajaxRequest(url,options);
}

function displayMessage(data){
	
	var name = data.name;
	var date = data.postdate;
	var message = data.message;
	var span = document.createElement('span');
	var nameText = document.createTextNode(name);
	span.appendChild(nameText);
	var dateSpan = document.createElement('span');
	var dateText = document.createTextNode(date);
	dateSpan.appendChild(dateText);
	dateSpan.className = 'date';
	var p = document.createElement('p');
	var contentText = document.createTextNode(message);
	p.appendChild(contentText);
	var li = document.createElement('li');
	li.appendChild(span);
	li.appendChild(dateSpan);
	li.appendChild(p);
	document.getElementById('msgList').appendChild(li);
}

function submitMessage(){
	
	var name = document.getElementById('txtName').value;
	var message = document.getElementById('txtContent').value;
	
	var options = {
		method:'GET',
		parameters:'action=addNew&name='+escapeHTML(name)+'&message='+escapeHTML(message),
		onLoading:function(){
		document.getElementById('submitMsg').style.display='';
		document.getElementById('btnSubmit').disabled = true;
		},
		onSuccess:function(x){
			var resBack = x.responseText;
			if(resBack == 1){
				var date = new Date();
				var postDate = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();
				var msg = {
					name:name,
					message:message,
					postdate:postDate
				}
				displayMessage(msg);
				doScroll();
			}else{
				alert('Submit  failure.');
			}
			document.getElementById('submitMsg').style.display = 'none',
			document.getElementById('btnSubmit').disabled = false;
		},
		onFailure:function(){
			document.getElementById('submitMsg').style.display = 'none';
			document.getElementById('btnSubmit').disabled = true;
			alert('request failure.');
		}
	};
	ajaxRequest(url,options);
}

function doScroll(){
	var height = document.getElementById('msgList').offsetHeight;
	var totalHeight = document.getElementById('msgList').scrollHeight;
	document.getElementById('msgList').scrollTop = totalHeight-height;
}

function escapeHTML(str){
	str = str.replace('<','&lt;');
	str = str.replace('>','&gt');
	return str;
}

window.onload = init;


2、ajaxRequest.js代码:
var url ='guestBook';

function init(){
	document.getElementById('btnSubmit').onclick = submitMessage;
	readMessages();
}

function readMessages(){

	var options = {
		method:'GET',
		parameters:'action=getAll',
		onLoading:function(){
		document.getElementById('loadingMsg').style.display = '';
		},
		onSuccess:function(x){
			var resBook = x.responseText;
			try{
				var messages = resBook;
				var messages = eval('('+resBook+')');
				
				for(var i = 0;i < messages.length; i++){
					displayMessage(messages[i]);
				}
				document.getElementById('loadingMsg').style.display = 'none';
				//document.getElementById('btnSubmit').disabled = false;
				doScroll();
			}catch(e){
				
			}
		},
		onFailure:function(){
			document.getElementById('loadingMsg').style.display = 'none';
			window.alert('request failure.');
		}
	};
	ajaxRequest(url,options);
}

function displayMessage(data){
	
	var name = data.name;
	var date = data.postdate;
	var message = data.message;
	var span = document.createElement('span');
	var nameText = document.createTextNode(name);
	span.appendChild(nameText);
	var dateSpan = document.createElement('span');
	var dateText = document.createTextNode(date);
	dateSpan.appendChild(dateText);
	dateSpan.className = 'date';
	var p = document.createElement('p');
	var contentText = document.createTextNode(message);
	p.appendChild(contentText);
	var li = document.createElement('li');
	li.appendChild(span);
	li.appendChild(dateSpan);
	li.appendChild(p);
	document.getElementById('msgList').appendChild(li);
}

function submitMessage(){
	
	var name = document.getElementById('txtName').value;
	var message = document.getElementById('txtContent').value;
	
	var options = {
		method:'GET',
		parameters:'action=addNew&name='+escapeHTML(name)+'&message='+escapeHTML(message),
		onLoading:function(){
		document.getElementById('submitMsg').style.display='';
		document.getElementById('btnSubmit').disabled = true;
		},
		onSuccess:function(x){
			var resBack = x.responseText;
			if(resBack == 1){
				var date = new Date();
				var postDate = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();
				var msg = {
					name:name,
					message:message,
					postdate:postDate
				}
				displayMessage(msg);
				doScroll();
			}else{
				alert('Submit  failure.');
			}
			document.getElementById('submitMsg').style.display = 'none',
			document.getElementById('btnSubmit').disabled = false;
		},
		onFailure:function(){
			document.getElementById('submitMsg').style.display = 'none';
			document.getElementById('btnSubmit').disabled = true;
			alert('request failure.');
		}
	};
	ajaxRequest(url,options);
}

function doScroll(){
	var height = document.getElementById('msgList').offsetHeight;
	var totalHeight = document.getElementById('msgList').scrollHeight;
	document.getElementById('msgList').scrollTop = totalHeight-height;
}

function escapeHTML(str){
	str = str.replace('<','&lt;');
	str = str.replace('>','&gt');
	return str;
}

window.onload = init;


html页面代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>index.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
       <link type="text/css" rel="stylesheet" href="css/style.css">
       <script type="text/javascript" src="script/ajaxRequest.js"></script>
       <script type="text/javascript" src="script/guestbook.js"></script>
	</head>

	<body>
		<h1>
			Guest book
			<span id="loadingMsg" style="display: none" class="msgBox">(loading...)</span>
		</h1>
		<ul id="msgList"></ul>
		<form name="fmMsg" id="fmMsg" action="?" method="post">
			<h2>
				Message
				<span id="submitMsg" style="display: none" class="msgBox">(loading...)</span>
			</h2>
			<label for="txtName">
				name
			</label>
			<input name="txtName" type="text" id="txtName" value="guest"
				onfocus="this.select();">
			<label for="txtContent">
				Message
			</label>
			<textarea rows="4" name="txtContent" id="txtContent"
				onfocus="this.select();">something to say...</textarea>
			<input type="button" value="click here to submit your message!"
				id="btnSubmit" >
		</form>
	</body>
</html>
分享到:
评论

相关推荐

    原创ajax留言本原创ajax留言本

    【标题】"原创ajax留言本"所涉及的知识点主要集中在使用AJAX技术实现的一个互动性的留言簿应用。AJAX(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。通过AJAX,...

    非常简洁的ajax留言本实例

    【Ajax留言本实例详解】 Ajax(Asynchronous JavaScript and XML)技术是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。这个“非常简洁的Ajax留言本实例”是一个典型的使用Ajax实现的交互式应用,旨在...

    AJAX留言本源码

    【标题】:“AJAX留言本源码” 这个标题指出我们关注的是一个使用AJAX技术实现的留言本系统。AJAX,全称为Asynchronous JavaScript and XML(异步JavaScript和XML),是一种在无需重新加载整个网页的情况下,能够...

    ajax 留言本,基于 DOJO + PHP + MYSQL

    在1.3版本中,DOJO主要特性包括模块化系统(dojo.require),强大的DOM操作API,动画效果,以及对异步请求的支持,这些在“ajax 留言本”中都是不可或缺的,尤其是通过dojo.xhrGet或dojo.xhrPost方法进行AJAX通信。...

    PHP+AJAX留言本

    【PHP+AJAX留言本】是一个典型的Web应用程序,它结合了PHP服务器端脚本语言和AJAX(异步JavaScript和XML)技术,为用户提供了一种无需刷新页面即可发送和接收数据的互动体验。这个项目的核心功能是让用户在网站上...

    AJAX留言本--简易版

    【标题】"AJAX留言本--简易版"指的是一个基于AJAX技术的简单留言板应用程序,它使用了ASP(Active Server Pages)服务器端脚本技术来处理数据交互,并结合客户端的AJAX实现页面无刷新更新。 【描述】"ASP+AJAX简易...

    三层Ajax留言本源码

    【标题】:“三层Ajax留言本源码” 这个项目是一个基于Ajax技术实现的三层架构的留言本应用。三层架构是软件开发中的一个经典设计模式,它将应用分为数据访问层(DAL)、业务逻辑层(BLL)和表示层(UI)。这种架构...

    最新AJAX留言本代码

    【AJAX留言本代码详解】 AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。在这个“最新AJAX留言本代码”中,我们可以看到如何利用AJAX实现一个交互性更强...

    asp.net ajax留言本课件ppt

    ASP.NET AJAX 留言本是一个使用微软的ASP...综上所述,ASP.NET AJAX留言本是一个集成了用户管理、内容发布、互动交流和个性化定制的综合应用,通过AJAX技术提高了用户体验,同时利用ASP.NET框架提供了稳定的后端支持。

    asp+ajax留言本系统(可用)

    在"asp+ajax留言本系统"中,ASP可能被用来处理用户提交的留言数据,包括存储、检索和显示留言。 1. **ASP工作原理**:当用户在浏览器中请求一个ASP页面时,服务器会解析该页面中的脚本代码,执行相应的逻辑,并将...

    Ajax留言本2.0.rar

    Ajax留言本2.0是一款基于ASP.NET技术构建的交互式应用程序,它利用Ajax(Asynchronous JavaScript and XML)技术实现页面的无刷新更新,为用户提供更流畅、更快捷的浏览体验。Ajax的核心在于通过JavaScript与服务器...

    vs2005+ajax留言本

    【标题】"vs2005+ajax留言本"是一个基于Visual Studio 2005(简称VS2005)开发的Web应用程序,利用了Ajax(Asynchronous JavaScript and XML)技术来实现一个互动式的留言本功能。这个例子旨在展示如何在ASP.NET环境...

    asp ajax留言本 程序结构清析易懂

    【标题】:“asp ajax留言本 程序结构清析易懂” 【解析】: ASP (Active Server Pages) 是微软开发的一种服务器端脚本环境,用于创建动态网页或Web应用程序。Ajax(Asynchronous JavaScript and XML)则是一种在不...

    [聊天留言]原创PHP+AJAX留言本_gbook.zip

    【标题】:“[聊天留言]原创PHP+AJAX留言本_gbook.zip”指的是一个压缩包文件,其中包含了一个基于PHP和AJAX技术实现的在线聊天或留言本系统。这个系统可能是一个开源项目或者是一个教学示例,用于帮助开发者学习...

    .net2.0+ajax留言本

    这个.NET 2.0 + AJAX留言本项目展示了如何结合传统Web开发框架和现代Web交互技术,创建一个功能完善的Web应用。对于学习.NET开发和AJAX技术的初学者,这是一个宝贵的实践案例,有助于理解这些技术的实际应用和交互...

    ASP.NET短小精悍Ajax留言本(无广告)

    【ASP.NET短小精悍Ajax留言本(无广告)】是一个基于ASP.NET技术构建的Web应用程序,它利用Ajax(Asynchronous JavaScript and XML)技术实现了页面的动态无刷新更新,为用户提供流畅、高效的交互体验。这个留言本...

    三层AJAX留言本源码

    这是一个基于ASP.NET技术的三层架构实现的Ajax留言本系统,主要使用了Visual Studio 2005作为开发环境,数据库管理则采用了SQL Server 2005。下面将详细讲解这个系统的架构、功能以及实现的关键知识点。 **1. 三层...

Global site tag (gtag.js) - Google Analytics