这段时间AJA这个名词在WEB界真是叫的太响了,说白了AJAX技术也是老技术新用,利用非常成熟的JavaScript加上其他的css,xml等技术结合起来达到了降低服务端负担、增强用户体验的功能,真佩服。
我是在公司做OA(办公自动化系统)系统的,我感觉用户体验要加强一些,最近公司论坛上说以后会用AJAX来增强用户体验,我就先给自己打打基础学一下AJAX技术,前几天看了一些技术文章就写一个小程序来体验一把AJAX技术的优点。
这个小例子是一个论坛,实现的功能就是当用户增加一个主题的时候在不刷新当前页面(经常刷新页面是对服务器加压的主要原因)情况下动态加载数据。费说不多说了,让我们开始AJAX初体验之旅吧。
首先是一个common.js文件:
function showMemos() ... {
var f = document.forms[0];
var userNameValue = f.username.value;
var memoValue = f.memo.value;
if(userNameValue!="" && memoValue != "") ...{
// 从最终的TextNode节点开始,慢慢形成<tbody>结构
var username = document.createTextNode(userNameValue);
var memo = document.createTextNode(memoValue);
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var tr = document.createElement("tr");
var tbody = document.createElement("tbody");
td1.appendChild(username);
td2.appendChild(memo);
tr.appendChild(td1);
tr.appendChild(td2);
tbody.appendChild(tr);
var parNode = document.getElementById("memoTable");
//parNode.insertBefore(tbody,parNode.firstChild);
parNode.appendChild(tbody); //将节点tbody加入节点尾部
}
}
// 最核心的一个function,用于后台发送请求到服务器
var http_request = false ;
function send_request(url) ... {//初始化、指定处理函数、发送请求的函数
http_request = false;
//开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest) ...{ //Mozilla 浏览器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) ...{//设置MiME类别
http_request.overrideMimeType("text/xml");
}
}
else if (window.ActiveXObject) ...{ // IE浏览器
try ...{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) ...{
try ...{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) ...{}
}
}
if (!http_request) ...{ // 异常,创建对象实例失败
window.alert("不能创建XMLHttpRequest对象实例.");
return false;
}
http_request.onreadystatechange = processRequest;
// 确定发送请求的方式和URL以及是否同步执行下段代码
http_request.open("GET", url, true);
http_request.send(null);
}
// 处理返回信息的函数
function processRequest() ... {
if (http_request.readyState == 4) ...{ // 判断对象状态
if (http_request.status == 200) ...{ // 信息已经成功返回,开始处理信息
alert(http_request.responseText);
} else ...{ //页面不正常
alert("您所请求的页面有异常。");
}
}
}
论坛首页——index.jsp:
<% ...
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
< html >
< head >
< base href ="<%=basePath%>" >
< title > 论坛首页 </ title >
< meta http-equiv ="pragma" content ="no-cache" >
< meta http-equiv ="cache-control" content ="no-cache" >
< meta http-equiv ="expires" content ="0" >
< meta http-equiv ="keywords" content ="keyword1,keyword2,keyword3" >
< meta http-equiv ="description" content ="This is my page" >
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</ head >
< body onload ="javascript:loadData();" >
< center >
< form name ="reg" method ="post" action ="" >
< table border ='1' width ="60%" >
< tr >
< td > 用户名 </ td >
< td >
< input name ="username" type =text maxlength =20 >
</ td >
</ tr >
< tr >
< td > 内容 </ td >
< td >
< textarea name ="memo" row =5 maxlength =1000 ></ textarea >
</ td >
</ tr >
</ table >
< input type =button value ="提交" onclick ="javascript:add();" >
</ form >
< hr >
< h1 > 论坛帖子 </ h1 >
< table id ='memoTable' border ="1" width ="80%" >
< tr >
< th width ="20%" > 用户名 </ th >
< th > 内容 </ th >
</ tr >
</ table >
</ center >
</ body >
</ html >
< script type ="text/javascript" > ...
function loadData()...{
<%
Connection conn = null;
ResultSet rs = null;
Statement stmt = null;
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection("jdbc:mysql:///ajax?characterEncoding=gbk", "root", "root");
conn.setAutoCommit(false);
stmt = conn.createStatement();
String sql = "select user_name,memo from bbs";
System.out.println(sql);
rs = stmt.executeQuery(sql);
while(rs.next())...{
String un = rs.getString("user_name");
String memo = rs.getString("memo");
System.out.println(un + " " + memo);
%>
addData('<%=un%>','<%=memo%>');
<% }
try...{
rs.close();
stmt.close();
conn.close();
} catch(Exception e)...{
e.printStackTrace();
}
%>
}
function add()...{
var userName = document.forms[0].username;
var memo = document.forms[0].memo;
if(userName.value == "")...{
alert("请输入用户名");
userName.focus();
return false;
} else if(memo.value == "")...{
alert("请输入内容");
memo.focus();
return false;
}else ...{
send_request("add.jsp?username=" + userName.value + "&memo=" + memo.value);
//紧接着把数据动态加到页面中,这样就在不刷新当前面的情况下更新了数据,厉害
userName.value = "";
memo.value = "";
}
}
function showMemos() ...{
var f = document.forms[0];
var userNameValue = f.username.value;
var memoValue = f.memo.value;
if(userNameValue!="" && memoValue != "") ...{
// 从最终的TextNode节点开始,慢慢形成<tbody>结构
var username = document.createTextNode(userNameValue);
var memo = document.createTextNode(memoValue);
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var tr = document.createElement("tr");
var tbody = document.createElement("tbody");
td1.appendChild(username);
td2.appendChild(memo);
tr.appendChild(td1);
tr.appendChild(td2);
tbody.appendChild(tr);
var parNode = document.getElementById("memoTable");
//parNode.insertBefore(tbody,parNode.firstChild);
parNode.appendChild(tbody); //将节点tbody加入节点尾部
}
}
function addData(name1,memo1)...{
// 从最终的TextNode节点开始,慢慢形成<tbody>结构
var usernameNode = document.createTextNode(name1);
var memoNode = document.createTextNode(memo1);
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var tr = document.createElement("tr");
var tbody = document.createElement("tbody");
td1.appendChild(usernameNode);
td2.appendChild(memoNode);
tr.appendChild(td1);
tr.appendChild(td2);
tbody.appendChild(tr);
var parNode = document.getElementById("memoTable");
//parNode.insertBefore(tbody,parNode.firstChild);
parNode.appendChild(tbody); //将节点tbody加入节点尾部
}
var http_request = false;
function send_request(url) ...{//初始化、指定处理函数、发送请求的函数
http_request = false;
//开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest) ...{ //Mozilla 浏览器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) ...{//设置MiME类别
http_request.overrideMimeType("text/xml");
}
}
else if (window.ActiveXObject) ...{ // IE浏览器
try ...{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) ...{
try ...{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) ...{}
}
}
if (!http_request) ...{ // 异常,创建对象实例失败
window.alert("不能创建XMLHttpRequest对象实例.");
return false;
}
//http_request.onreadystatechange = processRequest;
// 确定发送请求的方式和URL以及是否同步执行下段代码
http_request.open("GET", url, true);
http_request.send(null);
}
// 处理返回信息的函数
function processRequest() ...{
if (http_request.readyState == 4) ...{ // 判断对象状态
if (http_request.status == 200) ...{ // 信息已经成功返回,开始处理信息
alert(http_request.responseText);
} else ...{ //页面不正常
alert("您所请求的页面有异常。");
}
}
}
</ script >
用于把主题加到数据库的JSP——add.jsp:
pageEncoding="gbk" %>
<% ...
try {
Class.forName("com.mysql.jdbc.Driver");
Connection conn = DriverManager.getConnection("jdbc:mysql:///ajax?characterEncoding=gbk", "root", "root");
conn.setAutoCommit(false);
Statement stmt = conn.createStatement();
String userName = request.getParameter("username");
String memo = request.getParameter("memo");
System.out.println(userName);
String sql = "";
if (userName != null && memo != null) {
sql = "insert into bbs (user_name,memo) values('" + userName + "','" + memo + "')";
}
System.out.println(sql);
stmt.execute(sql);
stmt.close();
conn.commit();
conn.close();
} catch (SQLException ex) {
ex.printStackTrace();
}
%>
还有我们的数据表——bbs:
+ -- ---------+---------------+------+-----+---------+----------------+
| Field | Type | Null | Key | Default | Extra |
+ -- ---------+---------------+------+-----+---------+----------------+
| id | bigint ( 20 ) | NO | PRI | NULL | auto_increment |
| user_name | varchar ( 50 ) | NO | | | |
| memo | varchar ( 2000 ) | NO | | | |
+ -- ---------+---------------+------+-----+---------+----------------+
先声明:这里的代码写的很烂,呵呵;因为当时想急于看看AJAX到底能实现样的功能所以就做了这个我都不想看的代码,哈哈。这里只是让大家能了解一下AJAX技术,是很皮毛的东西,希望给像我一样想了解AJAX技术的同仁解渴。
这里的代码都很简单也不规范(数据库访问竟然写在了JSP里),我想有过JDBC和JSP编程经验的人都能看懂,里面也有不少的注释,现在你就来体验一下AJAX的神奇成在吧,祝你好运……
今天算是我的AJAX之初体验,以后会不断的发表AJAX技术的文章,希望你们关注我——Henry Yan。