天天看點
傳回

實作web頁面局部動态重新整理

 在浏覽網頁時，有時往往因為檢視局部資訊，而導緻整個網頁都需要從伺服器端重新加載一次。在傳統的web實作方式中，實作類似的效果必須進行整個頁面的重新整理。但是借助Ajax技術，可以實作對頁面中局部區域的動态重新整理，使得使用者能夠以更好的方式獲得最新的資料資訊。隻更新需要檢視的資訊，頁面中的其他資訊保持不變。局部動态更新時Ajax技術的隻要功能表現之一。

     現在建立一個執行個體，以示範使用Ajax技術局部動态更新資料。該執行個體主要是删除Access資料庫記錄。在删除過程中，隻删除指定記錄，而不影響顯示的其他待删除記錄。

1， accessConnection.java

     此類用于資料庫操作，執行删除語句，傳回查詢結果集，打開記事本，輸入下列代碼：

[html] 

view

plain

 copy

  1. package com.njue.DBManager;  
  2. import java.io.File;  
  3. import java.sql.*;  
  4. public class accessConnection {  
  5. ResultSet   r;  
  6.     public accessConnection(String delSql,String sql) throws ClassNotFoundException, SQLException {  
  7.         String   dbUr1="jdbc:odbc:driver={Microsoft Access Driver (*.mdb)};DBQ=E:"+File.separator+"dataAnalysis"+File.separator+"test.mdb";     
  8.           String   user="";     
  9.           String   password="";     
  10.           Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");     
  11.           Connection   c=DriverManager.getConnection(dbUr1,user,password);     
  12.           Statement s=c.createStatement();   
  13.           if(delSql!=null){  
  14.               s.executeUpdate(delSql);  
  15.           }  
  16.           r=s.executeQuery("SELECT   NAME   "+"FROM   test");    
  17.         //  s.close();     
  18.     }  
  19. public ResultSet getResult(){  
  20.     return r;  
  21. }  
  23. /*  
  24.  其實最重要的一條語句就是：  
  25.      String   dbUr1="jdbc:odbc:driver={Microsoft Access Driver (*.mdb)};DBQ=E:"+File.separator+"dataAnalysis"+File.separator+"test.mdb";  
  26. 這個路徑的要求是極為嚴格的，隻允許Microsoft Access Driver這三個單詞中間各有一個空格，其他地方絕不允許出現空格，還望各位道友仔細檢查。  
  27. 還有一點就是File.separator，由于不同的作業系統的分隔符可能不一樣，況且我們這裡直接用E:\dataAnalysis\test.mdb的話，你可能要再加一個反斜杠去進行轉義，為了避免麻煩，是以我們直接用File.separator自動擷取系統預設的分隔符。  
  28.      好了，就如此簡單，希望對大家有用！  
  29.  */  

2，  伺服器端代碼

聲明accessConnection.java類，調用getResult()方法得到結果集，然後使用while循環将擷取資料庫的資料儲存到字元串content中，最後将content字元串以XML檔案的形式輸出用戶端。代碼如下：

  1. <%@ page contentType="text/html; charset=utf-8" import="java.sql.*,com.njue.DBManager.*" errorPage="" %>  
  2. <%  
  3.   String id=request.getParameter("name");  
  4.   String delSql=null;  
  5.     StringBuffer content=new StringBuffer("");   
  6.   response.setContentType("text/xml");   
  7.   response.setHeader("Cache-Control","no-cache");  
  8.   content.append("<?xml version=\"1.0\"   encoding=\"UTF-8\" ?>");  
  9.   content.append("<contents>");  
  10.   if(id!=null){  
  11.   id=new   String(id.getBytes("ISO-8859-1"), "GBK");   
  12.   delSql="delete from test where NAME='"+id+"'";  
  13.   }  
  14.   try{  
  15.   ResultSet rs=new accessConnection(delSql,null).getResult();  
  16.   while(rs.next()){  
  17.      String name=rs.getString(1);  
  18.      content.append("<content>");  
  19.      content.append("<name>"+ name +"</name>");  
  20.      content.append("</content>");  
  21.      }  
  23.  catch(Exception e){  
  24.       e.printStackTrace();  
  25.    }  
  26.     content.append("</contents>");  
  27.    out.print(content);  
  28. %>  

将上述代碼儲存，我這裡儲存的名稱為index.jsp。

3， 用戶端代碼

用戶端代碼主要實作異步傳送資料的顯示樣式。打開記事本，輸入下列代碼：

  1. <%@ page contentType="text/html; charset=GBK" import="java.sql.*" errorPage="" %>  
  2. <html>  
  3. <head>  
  4.     <script type="text/javascript">  
  5.     var xmlHttp;  
  6.     var id;  
  7.     function createXMLHttpRequest(){  
  8.       if(window.ActiveXObject) {  
  9.      xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");//建立XMLHttpRequet對象  
  11.   else if (window.XMLHttpRequest) {  
  12.      xmlHttp=new XMLHttpRequest();//建立XMLHttpRequet對象  
  15.     function startRequest(ele) {  
  16.     id=ele.id;  
  17.  createXMLHttpRequest();   
  18.  xmlHttp.onreadystatechange=handleStateChange;  
  19.  xmlHttp.open("POST", "index.jsp?name="+id, true);  
  20.   xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  
  21.  xmlHttp.send(null);  
  22.  alert(str);  
  23.  }  
  24. function handleStateChange() {  
  25.   if(xmlHttp.readyState==4) {  
  26.  if(xmlHttp.status==200) {  
  27.           show();  
  31. function validate(){  
  34.  xmlHttp.open("GET", "index.jsp", true);  
  38. function show(){  
  39.    var xmlDoc=xmlHttp.responseXML;  
  40.    var yan=xmlDoc.getElementsByTagName("content");  
  41.    var ta="<table border=1 width=45% align=center id=ta><tr><td>使用者名稱</td><td>操作</td></tr>";  
  42.       for(var i=0;i<yan.length;i++){  
  43.       var y=yan[i];  
  44.       var name=y.childNodes[0].firstChild.data;  
  45.           ta+="<tr id='aa'><td width=30%>"+name+"</td>";  
  46.       ta+="<td><p id="+name+"  style='color:green;' onclick='startRequest(this)'><u>删除</u></p></td></tr>";  
  48.    ta+="</table>";  
  49.    document.getElementById("res").innerHTML=ta;  
  50.    //alert(yan.length);  
  52.     </script>  
  53.   </head>  
  54.   <body onLoad="validate()">  
  55.     <div id="res"></div>  
  56.   </body>  

将上述代碼儲存，名稱為Del.jsp。在該檔案中，createXMLRequest()函數主要是用于建立XMLHttpRequest異步對象，validate()函數項伺服器發送異步請求，該請求主要完成資料庫記錄的顯示功能。Callback()函數主要用于處理伺服器端的傳回資料，即調用show()函數用于設定資料的顯示樣式。Show()函數主要是解析伺服器端傳回的XML檔案，并解析XML檔案中的資料，最後以指定樣式顯示在目前頁。StartRequest()函數也是用于向伺服器發送異步請求，但該請求主要完成删除指定資料庫記錄。在目前網頁被加載時，就會執行validate()函數。

4， 運作效果

運作前：

删除後：

xml java 資料庫 資料格式 前端開發 資料庫連接配接 javascript sql web頁面重新整理 Web頁面 web限制頁面 web限制無法頁面 web頁面對象
上一篇: Ajax的常用技巧---實作進度條
下一篇: 基于jquery ajax 無重新整理 檔案批量上傳插件 GooUploader整合struts2實作上傳

繼續閱讀