AJAX技术之初体验

最新推荐文章于 2024-08-21 21:16:19 发布

原创最新推荐文章于 2024-08-21 21:16:19 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #xmlhttprequest #function #mozilla #javascript #null

J2EE 同时被 2 个专栏收录

9 篇文章

订阅专栏

AJAX

8 篇文章

订阅专栏

这段时间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：

<%@ page language="java" import="java.util.*,java.sql.*" pageEncoding="gbk"%>

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>

<!--

-->

</head>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</form>

<hr>

<tr>

</tr>

</table>

</center>

</body>

</html>

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);

//紧接着把数据动态加到页面中，这样就在不刷新当前面的情况下更新了数据，厉害

showMemos();

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：

<%@ page language="java" import="java.util.*,java.sql.*"

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：

mysql> desc bbs;

+-----------+---------------+------+-----+---------+----------------+

+-----------+---------------+------+-----+---------+----------------+

| id | bigint(20) | NO | PRI | NULL | auto_increment |

+-----------+---------------+------+-----+---------+----------------+

先声明：这里的代码写的很烂，呵呵；因为当时想急于看看AJAX到底能实现样的功能所以就做了这个我都不想看的代码，哈哈。这里只是让大家能了解一下AJAX技术，是很皮毛的东西，希望给像我一样想了解AJAX技术的同仁解渴。

这里的代码都很简单也不规范（数据库访问竟然写在了JSP里），我想有过JDBC和JSP编程经验的人都能看懂，里面也有不少的注释，现在你就来体验一下AJAX的神奇成在吧，祝你好运……

今天算是我的AJAX之初体验，以后会不断的发表AJAX技术的文章，希望你们关注我——Henry Yan。