ajax连接jsp或servlet,获取MySql为数据

 当然代码并没有严格按规范写。。。数据库连接和操作的代码应该单独写出来。。。 html 页面中的JS代码也应该单独写一个JS文件，然后引入页面即可。其次，jsp中的代码写到servlet中效果是一样的。。。

 

1.html代码：

Java代码  收藏代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html>  
  3.     <head>  
  4. <script type="text/javascript" src="">  
  5. var xmlHttp;  
  6.   
  7. //创建xmlHttpRequest对象  
  8. function createXmlHttpObject()   
  9. {  
  10.     if(window.XMLHttpRequest)   
  11.     {   
  12.         xmlHttp = new XMLHttpRequest();   
  13.     }else if(window.ActiveXObject)   
  14.     {   
  15.         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");   
  16.     }   
  17.     return xmlHttp;  
  18. }  
  19.   
  20. function send()  
  21. {  
  22.     xmlHttp = createXmlHttpObject();  
  23.       
  24.     var url = "refreshAjax.jsp?time="+Math.random(); //加一个随机数，解决浏览器缓存问题      
  25.            
  26.     if(xmlHttp)  
  27.     {  
  28.         xmlHttp.onreadystatechange =callback;   //注册回调函数名,只需要函数名，不要加括号  
  29.         //设置连接信息：  
  30.         //第一个参数：表示http的请求方式，主要使用get和post  
  31.         //第二个参数：表示请求的URL地址，get方式的请求参数也在URL中  
  32.         //第三个参数：表示采用同步还是异步方式进行交互，true表示异步交互  
  33.         xmlHttp.open("GET", url, true);   
  34.           
  35.         //发送数据，开始和服务器端进行交互  
  36.         //同步方式下，send语句会在服务器端返回数据后才执行  
  37.         //异步方式下，send语句会立即执行  
  38.         xmlHttp.send(null);       
  39.     }else{  
  40.         alert("your browser does not support ajax");  
  41.         return;  
  42.     }      
  43. }  
  44.   
  45.   
  46.   
  47. //回调函数  
  48. function callback()   
  49. {   
  50.     //判断对象的状态是交互完成  
  51.     if(xmlHttp.readyState == 4)   
  52.     {  
  53.         //判断http的交互是否成功  
  54.         if(xmlHttp.status==200)  
  55.         {  
  56.             //获取服务器端返回的数据  
  57.             var xmlDoc = xmlHttp.responseXML;   
  58.               
  59.             document.getElementById("name").innerHTML = xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;          
  60.             document.getElementById("tel").innerHTML = xmlDoc.getElementsByTagName("tel")[0].childNodes[0].nodeValue;  
  61.             document.getElementById("city").innerHTML = xmlDoc.getElementsByTagName("city")[0].childNodes[0].nodeValue;          
  62.         }else{  
  63.             alert(xmlHttp.statusText);  
  64.         }  
  65.     }  
  66. }        
  67.   
  68. function refresh()  
  69. {  
  70.     window.setInterval("send()",1000); //定时刷新  
  71. }    
  72. </script>  
  73.     </head>  
  74.     <body onload="refresh()">  
  75.         <form action="">   
  76.             选择用户：   
  77.             <select name="employees" onchange="send(this.value);">  
  78.                 <option value="Tom">Tom</option>  
  79.                 <option value="Jom">Jom</option>  
  80.                 <option value="Sun">Sun</option>  
  81.             </select>  
  82.         </form>  
  83.   
  84.         用户名称：  
  85.         <span id="name"></span>  
  86.         <br>  
  87.         电话：  
  88.         <span id="tel"></span>  
  89.         <br>  
  90.         城市：  
  91.         <span id="city"></span>  
  92.         <br>  
  93.       
  94.     </body>  
  95. </html>  

 

 

2。Jsp代码：

     连接的是MySql数据库。。。

 

Java代码  收藏代码
  1. <%@ page language="java" import="java.sql.*" pageEncoding="gb2312"%>  
  2.   
  3. <%   
  4.     //这句至关重要，一定注意  
  5.     response.setContentType("text/xml;charset=gb2312");      
  6.       
  7.     StringBuffer str=new StringBuffer();  
  8.       
  9.         try {  
  10.             Class.forName("com.mysql.jdbc.Driver");  
  11.           
  12.             String url="jdbc:mysql://localhost:3306/devimonitor?";  
  13.             String userName="root";  
  14.             String password="root";  
  15.             Connection con=DriverManager.getConnection(url,userName,password);  
  16.           
  17.             Statement stmt=con.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE,ResultSet.CONCUR_UPDATABLE);  
  18.               
  19.             String sql="select * from position order by id";  
  20.             ResultSet rs=stmt.executeQuery(sql);  
  21.               
  22.             if(rs.last())   
  23.             {  
  24.                 str.append("<information>");  
  25.                 str.append("<name>");str.append(rs.getString(1).trim());str.append("</name>");  
  26.                 str.append("<tel>");str.append(rs.getString(2).trim());str.append("</tel>");  
  27.                 str.append("<city>");str.append(rs.getString(3).trim());str.append("</city>");  
  28.                 str.append("</information>");  
  29.             }  
  30.             stmt.close();  
  31.             con.close();  
  32.             rs.close();  
  33.         } catch (Exception e)   
  34.         {  
  35.             e.printStackTrace();  
  36.         }  
  37.     
  38.     out.print(str.toString());  
  39. %>  
posted @ 2013-09-15 16:54  孔圣子  阅读(964)  评论(0)  编辑  收藏  举报