一个简单的循环执行ajax的例子

前台页面

 

 <script type="text/javascript">
 
   var index = 0;//处理行  
        var n = 0;//总行数  
        var xmlhttp; 
        var oT;//table  
        function showAjax() { 
            oT = document.getElementById("table1"); 
            n = oT.getElementsByTagName("tr").length; 
            doSend(); 
        } 
        function doSend() { 
            //插入该行的一列  
            oT.rows[index].insertCell(1); 
            oT.rows[index].cells[1].innerHTML = "开始处理"; 
             
            xmlhttp = createXMLHttpRequest();//异步返回  
            xmlhttp.onreadystatechange = callback; 
            xmlhttp.open("post", "ajax", true); 
            xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
            xmlhttp.send("val=" + oT.rows[index].cells[0].innerHTML);//发送该行信息  
        } 
        function callback() { 
            if (xmlhttp.readyState == 4) { 
                if (xmlhttp.status == 200) { 
                    oT.rows[index].cells[1].innerHTML = xmlhttp.responseText;//异步返回值  
                    index++;//下一行  
                    if (index < n) { 
                        setTimeout("doSend()", 2000); 
                    } 
                } 
            } 
        } 
        function createXMLHttpRequest() { 
            http_request = false; 
            if (window.XMLHttpRequest) { 
                http_request = new XMLHttpRequest(); 
            } 
            else if (window.ActiveXObject) { 
                try { 
                    http_request = new ActiveXObject("Msxml2.XMLHTTP"); 
                } catch (e) { 
                    try { 
                        http_request = new ActiveXObject("Microsoft.XMLHTTP"); 
                    } catch (e) { http_request = false; } 
                } 
            } 
            return http_request; 
        }  
 
  
  </script>

 

table表格

 

 
    <form id="form1" action="server"> 
    <div> 
        <table id="table1"> 
           <tr><td>r1</td></tr> 
           <tr><td>r2</td></tr> 
           <tr><td>r3</td></tr> 
           <tr><td>r4</td></tr> 
           <tr><td>r5</td></tr> 
           <tr><td>r6</td></tr> 
           <tr><td>r7</td></tr> 
           <tr><td>r8</td></tr> 
           <tr><td>r9</td></tr> 
           <tr><td>r10</td></tr> 
           <tr><td>r11</td></tr> 
           <tr><td>r12</td></tr> 
           <tr><td>r13</td></tr> 
           <tr><td>r14</td></tr> 
           <tr><td>r15</td></tr> 
        </table> 
        <input id="Button1" type="button" value="开始异步" οnclick="showAjax();" /> 
    </div> 
    </form> 
   

 

后台action  name:ajax

 

public String execute() {
  //context.Response.ContentType = "text/plain";
  HttpServletRequest req = ServletActionContext.getRequest();
  HttpServletResponse res = ServletActionContext.getResponse();
  res.setContentType("text/html");
  res.setCharacterEncoding("GBK");
  PrintWriter out = null;
   
  try {
   out= res.getWriter();
  } catch (IOException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }
        //让程序延迟  
         int wuyong = 0; 
        for(int i=0 ;i<1000;i++) 
        { 
            for (int j = 0; j < 1000; j++) 
            { 
                for (int k = 0; k < 100; k++) 
                { 
                    wuyong++; 
                    if (wuyong == 1000000) 
                    { 
                        wuyong = 0; 
                    } 
                } 
            } 
        } 
        //处理返回  
      
        out.print("处理完毕");
        return null;
 }

 

页面效果：执行完一行继续执行下一行

 

 

 

参考资料:http://blog.csdn.net/xj150145223/article/details/5420411