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);
        }

我确定有更优雅的方式来实现这一目标。我只是想确保两个请求都成功。这就是为什么我要一个接一个地串行调用它们。它是否正确？谢谢

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
}

一个接一个地发送两个ajax请求

2 个答案: