首頁 > 開發者 > Ajax

利用Ajax實現頁面局部重新整理

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
2個檔案 1個Html檔案,一個Servlet

html 代碼為:

<html>
<script>
  var xmlHttp;
 
  window.onload=function(){
   //alert("111");
  doStart();
  }
 
  function createXMLHttpRequest(){
   // alert("222");
  if(window.ActiveXObject){
   xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   else if(window.XMLHttpRequest){
   xmlHttp=new XMLHttpRequest();
   }
   }
  
   function doStart(){
   // alert("doStart");
   createXMLHttpRequest();
   var url="dyupdate.yy";
  
     xmlHttp.open("GET",url,true);
    xmlHttp.onreadystatechange=startcallback;
    xmlHttp.send(null);
    }
   
    function startcallback(){
     // alert("startcallback");
     if(xmlHttp.readyState==4){
        if(xmlHttp.status==200){
         //alert("正常");
            setTimeout("pollServer()",5000);
            refreshTime();
        }
        else{
        alert(xmlHttp.status);
    }
  }}

   
 function pollServer(){
// alert("pollServer");
    createXMLHttpRequest();
    var url="dyupdate.yy" 
     xmlHttp.open("GET",url,true);
    xmlHttp.onreadystatechange=pollcallback;
    xmlHttp.send(null);
    }
     function pollServer2(ob){
 // alert(ob);
    createXMLHttpRequest();
    var url="dyupdate.yy&task="+ob; 
     xmlHttp.open("GET",url,true);
    xmlHttp.onreadystatechange=pollcallback2;
    xmlHttp.send(null);
    }
   function pollcallback2(){ }
   
  function pollcallback(){
   // alert("pollcallback");
     if(xmlHttp.readyState==4){
        if(xmlHttp.status==200){
         //alert("11");
         
           var message=xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
           alert(message);
           if(message!=""){
           var new_row=createRow(message);
           var table=document.getElementById("dyupdatearea");
           var table_body=table.getElementsByTagName("tbody").item(0);
          
           var first_row=table_body.getElementsByTagName("tr").item(1);
           table_body.insertBefore(new_row,first_row);
           setTimeout("pollServer()",5000);
           refreshTime();
           }
        else{
       doStart();
    }}
    else{
    alert(xmlHttp.status);
    }
    }
  }
   
   function createRow(message){
   // alert("createRow");
     var row=document.createElement("tr");
     var cell=document.createElement("td");
     var cell_data=document.createTextNode(message);
    
     cell.appendChild(cell_data);
     row.appendChild(cell);
     return row;
     }

function refreshTime(){
  //alert("refreshTime");
 var time_span=document.getElementById("time");
 var time_var=time_span.innerHTML;
 var int_val=parseInt(time_var);
 var new_int_val=int_val-1;
 
 if(new_int_val>-1){
  setTimeout("refreshTime()",1000);
  time_span.innerHTML=new_int_val;
 }else{
  time_span.innerHTML=5;
 }
}
</script>
<body>
 <h1>利用Ajax</h1>
 <input type="button" value="載入" id="go" onClick="doStart();" />
   <p>
    頁面將在<span id="time">5</span>秒後重新整理
  </p>
  <table id="dyupdatearea" align="left" border="1">
   <tbody>
    <tr id="row0">
     <td></td>
    </tr>
   </tbody>
   
   <input type="text" id="55" name="text" />
   <input type="button" value="提交" onClick="pollServer2(document.getElementById('55').value)" />
   

  </table>
 </body>
</html>  
  

Servlet代碼為:

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import java.util.LinkedList;

import javax.servlet.ServletException;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.RequestDispatcher;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ajax extends HttpServlet{
 int counter;
 private  static LinkedList list=new LinkedList();
public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
  //response.setC("UTF-8");
 if(list.size()>0)
 {
  System.out.println(list.getFirst().toString());
 }
  System.out.println("已經執行了");
  //int no=1;
 
  String res="";
  String task=request.getParameter("task");
  if(task!=null&&!"".equals(task))
  list.add(task);
  String message="12";
  //String reNo="<count>0</count>"; 

 
//   if(task.equals("reset")){
//    counter=1;
//  }else{
//   switch(counter){
//    case 1:message="1";break;
//    case 2:message="2";break;
//    case 3:message="3";break;
//    case 4:message="4";break;
//    case 5:message="5";break;
//    default:message="done";
//   }
//   counter++;
//  }
 
  if(list.size()>0){
 message=list.removeLast().toString();
   }
   res="<message>"+message+"</message>";
  PrintWriter out=response.getWriter();
 
  response.setContentType("text/xml; charset=UTF-8");
 
  response.setHeader("Cache-Control","no-cache");
  out.println("<response>");
  out.println(res);
  out.println("</response>");
  out.close();
  }

//public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
//   String text=(String)request.getParameter("text");
//   response.setContentType("text/xml; charset=UTF-8");
//   if(text!=null)
//   {
//    queue.add(text);
//   }
////     RequestDispatcher rd=this.getServletContext().getRequestDispatcher("/ajax.html");
////     rd.forward(request,response);
//}
 }

 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
ajax manual ajax payload w3s ajax ajax websocket ajax datagrid ajax settimeout ajax controls
相關文章
ajax入門指南（二）
ajax使用_雜類
jQuery ajax 檔案下載_ajax
AJAX各種實現方式比較_ajax
AJAX入門--- XMLHttpRequest對象的屬性和方法
解決spring-security session逾時 Ajax 請求沒有重新導向的問題

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More