这是一个用于留言板留言提交与读取的简单实例,不包括回复、编辑与删除等其它管理功能。 本实例的目的在于用一个简单的例子展示如果在java web应用中,用javascript开发Ajax应用。
一、web页面 msbord.jsp
1、本页面用于留言显示
2、本页面提供留言功能,并利用httpxmlrequest提交给servlet保存数据并使用javascript对页面显示进行调整。
3、本例子没有对httpxmlrequest提交后的返回数据进行处理的实例展示。
<%
...
@ page language="java" contentType="text/html; charset=gb18030"
pageEncoding="gb18030" %>
<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
<% ... @ page import="java.sql.*" %>
< jsp:useBean id ="DataSql" scope ="page" class ="edu.scnu.cn.common.DataSql" ></ jsp:useBean >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb18030" >
< title > 留言薄 </ title >
< style > ...
body{...}{ font-size:12px;text-align:center;}
dl {...}{ margin:0;}
dt {...}{ background-color:#666;color:#fff;margin:1px;padding:0 3px;}
dd {...}{ margin:3px;}
div {...}{ margin:auto;line-height:150%;text-align:left;width:400px;border:1px solid #666;}
#msgInput {...}{ margin-top:10px;}
dd.button {...}{ text-align:center;}
dd.button.input{...}{ margin:0 20px;}
</ style >
< script type ="text/javascript" > ...
function addToList()...{
var msgList=document.getElementById("msgBox");
var dl=document.createElement("dl");
var dt=document.createElement("dt");
var dd=document.createElement("dd");
var dd2=document.createElement("dd");
var dd3=document.createElement("dd");
msgList.insertBefore(dl,msgList.firstChild);
dl.appendChild(dt);
dl.appendChild(dd);
dl.appendChild(dd2);
dl.appendChild(dd3);
dt.innerHTML="主 题:"+subject.value;
dd.innerHTML="留 言 人:"+author.value;
dd2.innerHTML="内 容:"+content.value;
pageEncoding="gb18030" %>
<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
<% ... @ page import="java.sql.*" %>
< jsp:useBean id ="DataSql" scope ="page" class ="edu.scnu.cn.common.DataSql" ></ jsp:useBean >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb18030" >
< title > 留言薄 </ title >
< style > ...
body{...}{ font-size:12px;text-align:center;}
dl {...}{ margin:0;}
dt {...}{ background-color:#666;color:#fff;margin:1px;padding:0 3px;}
dd {...}{ margin:3px;}
div {...}{ margin:auto;line-height:150%;text-align:left;width:400px;border:1px solid #666;}
#msgInput {...}{ margin-top:10px;}
dd.button {...}{ text-align:center;}
dd.button.input{...}{ margin:0 20px;}
</ style >
< script type ="text/javascript" > ...
function addToList()...{
var msgList=document.getElementById("msgBox");
var dl=document.createElement("dl");
var dt=document.createElement("dt");
var dd=document.createElement("dd");
var dd2=document.createElement("dd");
var dd3=document.createElement("dd");
msgList.insertBefore(dl,msgList.firstChild);
dl.appendChild(dt);
dl.appendChild(dd);
dl.appendChild(dd2);
dl.appendChild(dd3);
dt.innerHTML="主 题:"+subject.value;
dd.innerHTML="留 言 人:"+author.value;
dd2.innerHTML="内 容:"+content.value;