一個接一個地發送兩個ajax請求

Question

即時通訊工作在使用多個畫布的HTML5項目中，用戶使用畫布完成繪圖後我將它們另存爲圖像到服務器。 這是我所：

 function saveViaAJAX() 
     { 
     $("#dvloader").show(); 
     document.getElementById("search-result").innerHTML="saving first image..."; 

     var saveCanvasFront = document.getElementById("collage-front"); 
     var canvasDataFront = saveCanvasFront.toDataURL("image/png"); 
     var postDataFront = "canvasData="+canvasDataFront; 
     var debugConsole= document.getElementById("search-result"); 

     var saveCanvasBack = document.getElementById("collage-back"); 
     var canvasDataBack = saveCanvasBack.toDataURL("image/png"); 
     var postDataBack = "canvasData="+canvasDataBack; 

     var ajax = new XMLHttpRequest(); 
     ajax.open("POST",'index.php?option=com_canvas&format=raw&task=savecanvas',true); 
     ajax.setRequestHeader('Content-Type', 'canvas/upload'); 

     var ajax2 = new XMLHttpRequest(); 
     ajax2.open("POST",'index.php?option=com_canvas&format=raw&task=savecanvas',true); 
     ajax2.setRequestHeader('Content-Type', 'canvas/upload');  



     ajax.onreadystatechange=function() 
     { 
      if (ajax.readyState == 4) 
       { 
       document.getElementById("search-result").innerHTML="saving second image.."; 
      ajax2.send(postDataBack); 
      } 
     } 

     ajax2.onreadystatechange=function() 
     { 
     if (ajax2.readyState == 4) 
     { 

     document.getElementById("search-result").innerHTML="canvases saved successfully"; 
     setTimeout('top.location.href="index.php"', 4000) 
      $("#dvloader").hide(); 

     } 
     }  

     ajax.send(postDataFront); 
     } 

IM肯定有一個更優雅的方式來實現這一目標。我只是想確保兩個請求都是成功的。這就是爲什麼即時連續調用它們的原因。 這是正確的嗎？ 謝謝

Answer 1

這個工作對我來說

// JavaScript Document 

function saveViaAJAX() 
{ 
     if(some condition){ 
       alert("false"); 
       return false; 
      } else { 
        if (confirm('confirm')) { 
        callAjax(); 
        } 
     } 

} 

function callAjax(){ 
      document.getElementById("process").innerHTML="processing..."; 
      ajax0(); 
} 

function ajax0() 
{ 

    var postData = ""; 
    var ajax = new XMLHttpRequest(); 
    ajax.open("POST",'index.php?....',true);  
    ajax.setRequestHeader('Content-Type', 'canvas/upload'); 

    ajax.onreadystatechange=function() 
    { 
     if (ajax.readyState == 4) 
     { 
      document.getElementById("process").innerHTML="next process..."; 
      ajax1(); 

     } 
    }  

    ajax.send(postData);  

} 

function ajax1() 
{ 

    var ajax = new XMLHttpRequest(); 
    ajax.open("POST",'index.php?...',true); 
    ajax.setRequestHeader('Content-Type', 'canvas/upload'); 

    ajax.onreadystatechange=function() 
    { 
     if (ajax.readyState == 4) 
     { 
     if (ajax.status==403){ 

      document.getElementById("process").innerHTML="error: " + ajax.status + " retry..."; 
      setTimeout(ajax1(), 3000); 

      } else if (ajax.status==200 || window.location.href.indexOf("http")==-1 || ajax.responseText != 'failed'){ 

      document.getElementById("process").innerHTML="processing..."; 
      ajax2(); 
      } else { 
      document.getElementById("process").innerHTML="error: " + ajax.status; 
      } 

     } 
    }  

    ajax.send(postData);  

} 

function ajax2() 
{ 
    var canvasData = saveCanvas.toDataURL("image/png"); 
    var postData = "canvasData="+canvasData; 

    var ajax = new XMLHttpRequest(); 
    ajax.open("POST",'index.php?...',true); 
    ajax.setRequestHeader('Content-Type', 'canvas/upload'); 

    ajax.onreadystatechange=function() 
    { 
     if (ajax.readyState == 4) 
     { 
     if (ajax.status==403){ 

      document.getElementById("search-result").innerHTML="error: " + ajax.status + " retrying..."; 
      setTimeout(ajax2(), 3000); 

      } else if (ajax.status==200 || window.location.href.indexOf("http")==-1 || ajax.responseText != 'failed'){ 
       document.getElementById("search-result").innerHTML="processing...."; 
       ajax3(); 
      } else { 
       document.getElementById("search-result").innerHTML="error: " + ajax.status; 
      } 

     } 
    }  

    ajax.send(postData); 

} 



function ajax3() 
{ 

    var postData = ""; 
    var ajax = new XMLHttpRequest(); 
    ajax.open("POST",'index.php?...',true); 
    ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 

    ajax.onreadystatechange=function() 
    { 
     if (ajax.readyState == 4) 
     { 

      if (ajax.status==403){ 

      document.getElementById("search-result").innerHTML="error: " + ajax.status + 
      " retrying..."; 
      setTimeout(ajax3(), 3000); 

      } else if (ajax.status==200 || window.location.href.indexOf("http")==-1 || ajax.responseText != 'failed'){ 
       document.getElementById("process").innerHTML="success"; 
       } 
       else{ 
       document.getElementById("process").innerHTML="error:" + ajax.status ; 
       }   

     } 
    }  

    ajax.send(postData); 

} 

Answer 2

寫兩個函數的ajax請求。像這樣調用主函數。

fun main(){ 
//read the canvas code 
    ajax1(); 
    ajax2(); 
} 

fun ajax1(){ 
//your call 
} 

fun ajax2(){ 
//your call 
}