[Ajax] Ajax+Jsp+Mysql 实现数据的存取

课程需要，写了一个简单的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;
}

 

 

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实例》中的类

 

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! " );
%> ;

 

//说明：mysqlcont.mysql类就是另一篇随笔《Java操作Mysql实例》中的类

 

4. main.jsp

< html >
   < 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="read" onClick=getUserInfo(document.getElementById('uid').id)>  

  < / body>
< / html>

 

 

 End....