`

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技术实现的一个互动性的留言簿应用。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. 三层...

Magicbox
Global site tag (gtag.js) - Google Analytics