AJAX技术之初体验

最新推荐文章于 2022-11-19 13:15:10 发布

mgqy

最新推荐文章于 2022-11-19 13:15:10 发布

阅读量1k

点赞数

分类专栏： J2EE AJAX 文章标签： ajax xmlhttprequest function mozilla javascript null

本文链接：https://blog.csdn.net/mgqy/article/details/1672955

版权

J2EE 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

AJAX

8 篇文章 0 订阅

订阅专栏

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

< 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" >

<!--

-->

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

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

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。

mgqy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AJAX技术之初体验

这段时间AJA这个名词在WEB界真是叫的太响了，说白了AJAX技术也是老技术新用，利用非常成熟的JavaScript加上其他的css,xml等技术结合起来达到了降低服务端负担、增强用户体验的功能，真佩服。我是在公司做OA（办公自动化系统）系统的，我感觉用户体验要加强一些，最近公司论坛上说以后会用AJAX来增强用户体验，我就先给自己打打基础学一下AJAX技术，
复制链接

扫一扫