课程需要，写了一个简单的Ajax数据存取操作，后台用的是Jsp，数据库是Mysql...
1. Functions.js
代码
var xmlHttp
/*读取数据*/
function getUserInfo(uid)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("您的浏览器不支持AJAX！");
return;
}
var url="data.jsp";
url=url+"?uid="+uid;
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if (xmlHttp.readyState==4)
{
alert(xmlHttp.responseText);
}
}
/*保存数据*/
function saveUserInfo(uid)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("您的浏览器不支持AJAX！");
return;
}
var url="savedata.jsp";
var info="postdate..";
var postdate="uid="+uid+"&info="+info;
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
alert("data posted!");
}
};
xmlHttp.open("POST",url,true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(postdate);
}
/*创建Request对象*/
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch(e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
/*读取数据*/
function getUserInfo(uid)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("您的浏览器不支持AJAX！");
return;
}
var url="data.jsp";
url=url+"?uid="+uid;
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if (xmlHttp.readyState==4)
{
alert(xmlHttp.responseText);
}
}
/*保存数据*/
function saveUserInfo(uid)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("您的浏览器不支持AJAX！");
return;
}
var url="savedata.jsp";
var info="postdate..";
var postdate="uid="+uid+"&info="+info;
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
alert("data posted!");
}
};
xmlHttp.open("POST",url,true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(postdate);
}
/*创建Request对象*/
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch(e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
2. data.jsp
代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.io.*" %>
<%@ page import="mysqlcont.mysql"%>
<%@ page import="java.sql.*"%>
<%!
public static mysql sql = new mysql();
%>
<%
String uid = request.getParameter("uid").trim();
int id = Integer.parseInt(uid);
sql.select("select info from tablename where id="+id);
ResultSetMetaData meta = sql.rs.getMetaData();
while (sql.rs.next()) {
out.println(sql.rs.getString(1));
}
%>;
//说明：mysqlcont.mysql类就是另一篇随笔《Java操作Mysql实例》中的类
<%@ page import="java.io.*" %>
<%@ page import="mysqlcont.mysql"%>
<%@ page import="java.sql.*"%>
<%!
public static mysql sql = new mysql();
%>
<%
String uid = request.getParameter("uid").trim();
int id = Integer.parseInt(uid);
sql.select("select info from tablename where id="+id);
ResultSetMetaData meta = sql.rs.getMetaData();
while (sql.rs.next()) {
out.println(sql.rs.getString(1));
}
%>;
//说明：mysqlcont.mysql类就是另一篇随笔《Java操作Mysql实例》中的类
3. savedata.jsp
代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.io.*" %>
<%@ page import="mysqlcont.mysql"%>
<%@ page import="java.sql.*"%>
<%!
public static mysql sql = new mysql();
%>
<%
String uid = request.getParameter("uid").trim();
String info = request.getParameter("info").trim();
int id = Integer.parseInt(uid);
sql.update("update tablename set cloname='"+info+"' where id="+id);
out.println("update succeed!");
%>;
<%@ page import="java.io.*" %>
<%@ page import="mysqlcont.mysql"%>
<%@ page import="java.sql.*"%>
<%!
public static mysql sql = new mysql();
%>
<%
String uid = request.getParameter("uid").trim();
String info = request.getParameter("info").trim();
int id = Integer.parseInt(uid);
sql.update("update tablename set cloname='"+info+"' where id="+id);
out.println("update succeed!");
%>;
//说明：mysqlcont.mysql类就是另一篇随笔《Java操作Mysql实例》中的类
4. main.jsp
<html>
<head>
<script type="text/javascript" src="Functions.js"></script>
</head>
<body>
<head>
<script type="text/javascript" src="Functions.js"></script>
</head>
<body>
<input type=text id="uid">
<input type=text id="info">
<input type=button id="save" onClick=saveUserInfo(document.getElementById('uid').id)>
<input type=button id="save" onClick=saveUserInfo(document.getElementById('uid').id)>
<input type=button id="read" onClick=getUserInfo(document.getElementById('uid').id)>
</body>
</html>
</html>
End....