创建一个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();
}
%>