创建一个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="提交" onclick="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();
}
%>
- 描述: 最终运行效果
- 大小: 29.1 KB
分享到:
相关推荐
利用php,mysql,ajax写的简易留言本,对于想快速了解ajax的朋友可以参考下.因为采用了mysql,如果想在自己的网站上架设自己独特的留言本,可以参考下.
JAJX+ASP无刷新留言本,还不错的。
反正闲着也是闲着,前些日子做的一个基于AJAX技术的ASP留言本。使用了access数据库,界面很简洁,结构清晰,采用dojo技术
Ajax留言本,Access数据库,数据库操作采用的是SqlHelper,意在练习AJAX技术,实现了无刷新留言,无刷新载入动画列表,以及发表留言框的动画移动等,留言时可以选择表情、头像和性别,并采用验证码进行校验,后台...
无库留言本,ASP留言本程序简单但功能强大用Ajax无刷新实现快速翻页 简介: 小巧的留言本,很容易整合添加到你现有的网站程序中, 留言采用AJAX无刷新的载入方式, 适合初学者学习与修改
基于.Net和AJAX技术的留言本
Ajax留言本,Access数据库,数据库操作采用的是SqlHelper,意在练习AJAX技术,实现了无刷新留言,无刷新载入动画列表,以及发表留言框的动画移动等,留言时可以选择表情、头像和性别,并采用验证码进行校验,后台...
利用ajax制作的最简单的留言本,含有源代码,其中利用了php,css,以及script、db.sql.
留言板简单功能,实验用户留言,管理员管理留言
MVC3+Razor+AJAX留言回复实例MVC3+Razor+AJAX留言回复实例MVC3+Razor+AJAX留言回复实例MVC3+Razor+AJAX留言回复实例MVC3+Razor+AJAX留言回复实例(Q群号:152088818 本群只为有经验的.NET开发者开放提供一个技术交流...
Ajax JSP留言本实例,只是实现了基本的留言功能,主要是想表现Ajax在JSP中的应用,学习JSP环境中的Ajax技术,是一个范例程序。
采用ASP+AJAX+ACCESS数据库编写,提供给个人用户和非商业用户免费使用。未经作者许可,不得用于任何商业行为,否则责任自负。...4、留言本的验证码功能,防止机器人群发软件的留言。 5、管理员密码设定功能。
vs2008己来一年多了 AJAX的应用可以说是VS2008的一个重要组成部分 ... 直正用VS2008自带的AJAX控件的...无刷新提交并保存,并用gridview显示出来,gridview 实现无刷新分页 我想这一个例子足够用在很多方面了 ......
刚开始学习设计模式时自己写的一个。内附简单文档、流程图、数据库配置,原程序用的是Oracle 9i,配置SQL Server的文件压缩包里也有的。另外代码是注释过的,已经生成javadoc可供参考。
留言板采用 xingTemplate jquery TXT 实现的ajax留言版,很酷的功能。 因为是文本数据库,所以无需安装,上传即可使用. 在xingTemplate推出一段时间之后,受到很多支持的人,也提出了一些宝贵的意见,为了大家更...
第8章 留言本。 第9章 分页模块。 第10章 文件上传显示进度条功能。 第11章 相册模块。 第12章 Ajax小偷模块。 第13章 聚合搜索功能。 第14章 无限级级联菜单。 第15章 内文广告系统。 第16章 聊天室开发。 第17章 ...
多个采用 jquery+Ajax无刷新交互的方式来实现的评论留言实例,欢迎下载。
对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。【沟通交流】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。鼓励下载和使用,并欢迎大家互相学习,共同进步...
留言板采用xingTemplate+jquery+TXT实现的ajax留言版,很酷的功能。 因为是文本数据库,所以无需安装,上传即可使用. 在xingTemplate推出一段时间之后,受到很多支持的人,也提出了一些宝贵的意见,为了大家更直观的...
对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。【沟通交流】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。鼓励下载和使用,并欢迎大家互相学习,共同进步...