Ajax留言本实现

最新推荐文章于 2021-08-05 15:11:28 发布

free_dog

最新推荐文章于 2021-08-05 15:11:28 发布

阅读量369

点赞数

分类专栏： Ajax 文章标签： Ajax IE CSS MySQL 应用服务器

Ajax 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

创建一个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="提交" οnclick="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();
 	}	
%>

free_dog

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Ajax留言本实现

创建一个Ajax应用程序的步骤做一总结：第一步：创建XMLHttpRequest对象。第二步：使用XMLHttpRequest对象的Open方法创建请求。第三步：使用XMLHttpRequest对象的send方法发送请求。第四步：使用XMLHttpRequest对象的onreadystatechange事件来捕获请求状态信息。我们以一个完整留言板应用程序...
复制链接

扫一扫

专栏目录