0

複数のキャンバスを使用する 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);
        }

これを達成するためのよりエレガントな方法があると確信しています。両方のリクエストが成功したことを確認したいだけです。これが、順番に順番に呼び出す理由です。これは正しいです ？ありがとう

4

2 に答える 2

2

これは私のために働いた

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

}
于 2012-11-30T09:01:38.013 に答える
-2

両方の ajax リクエストを 2 つの関数に書き込みます。このようにメインでこれらの関数を呼び出します。

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

fun ajax1(){
//your call
}

fun ajax2(){
//your call
}
于 2012-05-21T06:52:17.890 に答える