ajaxとJSPテクノロジーによるWebページのフォームのローカルリフレッシュ(ページ全体をリフレッシュせずにフォームデータのみをリフレッシュ)

Web開発ではローカルリフレッシュの必要性がある場合があり,ページ全体のリフレッシュがネットワーク速度に制限されている場合を克服する利点がある.
1.MySQLデータテーブルは次のとおりです(簡単な例).
表名:stu_info
stuId                 int                    PK    NN
stuName        varchar(45)              NN
stuDesc          varchar(45)       
2.新規wk.jsp、コードは以下の通りです.
  

  
      
      
      
      
    var XMLHttpReq;  
        //  XMLHttpRequest           
        function createXMLHttpRequest() {  
            if(window.XMLHttpRequest) { //Mozilla      
                XMLHttpReq = new XMLHttpRequest();  
            }  
            else if (window.ActiveXObject) { // IE     
                try {  
                    XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");  
                } catch (e) {  
                    try {  
                        XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");  
                    } catch (e) {}  
                }  
            }  
        }  
        //        
        function sendRequest() {  
            createXMLHttpRequest();  
            var url = "ajax.jsp";  
            XMLHttpReq.open("GET", url, true);  
            XMLHttpReq.onreadystatechange = processResponse;//        
            XMLHttpReq.send(null);  //       
        }  
        //           
        function processResponse() {  
            if (XMLHttpReq.readyState == 4) { //         
                if (XMLHttpReq.status == 200) { //         ，        
                    DisplayHot();  
                    setTimeout("sendRequest()", 1000);  
                } else { //       
                    window.alert("          。");  
                }  
            }  
        }  
        function DisplayHot() {  
      	  var yan1 = XMLHttpReq.responseXML.getElementsByTagName("id");
          var yan = XMLHttpReq.responseXML.getElementsByTagName("name");
          var yan2 = XMLHttpReq.responseXML.getElementsByTagName("description");
          	var ta = "";
            for(var i=0;i<yan.length;i++){
            	var id = yan1[i].firstChild.nodeValue;
             	var name = yan[i].firstChild.nodeValue;  
             	var desc = yan2[i].firstChild.nodeValue;
             ta+="<tr align=left><td><table><td width=100>"+id+"</td><td width=200>"+name+"</td><td width=200>"+desc+"</td></table></td></tr>"; 
           // document.getElementById(res).innerHTML = name;    
          //  res = res +i.toString();  
           }
            document.getElementById("res").innerHTML = ta;
} 
      
      
      
      
    
    
    
 
   

      
    

 3.新しいConn.jsp、コードは以下の通りです.
 

 
   
  
4.新建ajax.jsp,代码如下：
 
  
 
 
  
 
 
"); 
  out.println(""); 
    while(rs.next()){ 
    String id=rs.getString("stuId"); 
    int stuId = Integer.parseInt(id);
    String stuName=rs.getString("stuName"); 
     String stuDesc=rs.getString("stuDesc"); 
    System.out.println(stuId);
     //out.println(""); 
     out.println("" +stuId+ ""); 
     out.println("" +stuName+ ""); 
     out.println("" +stuDesc+ ""); 
     //out.println(""); 
     } 
   out.println(""); 
   out.close(); 
  } 
catch(Exception e){ 
      e.printStackTrace(); 
   } 
%> 
  
5.上記3ページをプロジェクトの同じフォルダの下に置くwkを実行する.jspでフォームstu_が得られますinfoのデータ.
(PS:ここでは簡単な例ですが、スタイルなどは自分で追加して修正することができます.間違いがあればご指摘ください.)