続行する前にAJAXの応答を待つ

Question

これは何度も尋ねられますが、私が見つけた答えはありません。基本的には、他の多くの関数から呼び出せるAJAX関数があります。私の問題は、ロードされた要素（イベントリスナーの追加など）でコードを実行する必要がある場合です。もちろん、スクリプトは "document.getElementById（...）is null"というエラーを受け取ると、要素のロードが完了するのを待たない。 私はコールバックを試みましたが、何も変更しません。 同期AJAXを試しました。それは老朽化しています。動作しませんでした。 レスポンスデータでJavaScriptを実行しようとしました。ここの誰かが知っておくべきであるように、動作しません。

だから私は何かが欠けている。ページをリロードせずに動的データを読み込む別の方法はありますか？コードを強制的に待機させる方法はありますか？これに対する解決策は何ですか？

動作しませんマイコード：

function ajax_call(page, target_tag, data) 
{ 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() 
    { 
     if (xhttp.readyState == 4 && xhttp.status == 200) 
     { 
      target_tag.innerHTML = xhttp.responseText; 
     } 
    }; 
    xhttp.open("POST", page); 
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    xhttp.send(data); 
} 

function edit_gallery(gallery) 
{ 
    var target_tag= document.createElement("div"); 
    target_tag.style.position= "fixed"; 
    target_tag.style.top= "10px"; 
    target_tag.style.backgroundColor= "#FFFFFF"; 
    target_tag.style.padding= "10px"; 
    target_tag.style.margin= "0px auto"; 
    target_tag.id= "gallery_edit_window"; 

    document.getElementsByTagName("BODY")[0].appendChild(target_tag); 
    ajax_call("/everythingapps/imagegallery/edit_gallery.php", target_tag, gallery); 
    document.getElementById('gallery_save_btn').addEventListener('click', function() {save_gallery();}); 
} 

function save_gallery() 
{ 
    alert('test'); 
} 

だから私の問題は、コードのこの公園である：

ajax_call("/everythingapps/imagegallery/edit_gallery.php", target_tag, gallery); 
document.getElementById('gallery_save_btn').addEventListener('click', function() {save_gallery();}); 

ので、任意のアイデア？ JSライブラリはありません。

編集：コールバックでいくつか試行しました。正直なところ私はそれらを理解するのが難しいです。ここに私の最後の試みがあります：

function testing(callback) 
{ 
    callback("/everythingapps/imagegallery/edit_gallery.php", target_tag, gallery) 
} 
testing(ajax_call); 
document.getElementById('gallery_save_btn').addEventListener('click', function() {save_gallery();}); 

Answer 1

コールバックは、サーバーから応答を受け取った後に呼び出されることを前提としています。あなたはそれを後方に持っています。実際には、コールバック関数をajax_callの引数として渡す必要があります。 onreadystatechangeイベントでは、サーバー応答を受信するとコールバックを呼び出します。このよう

：

function ajax_call(page, target_tag, data, callbackFn) 
{ 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() 
    { 
     if (xhttp.readyState == 4 && xhttp.status == 200) 
     { 
      target_tag.innerHTML = xhttp.responseText; 
      callbackFn(); //INVOKE THE CALLBACK FUNCTION 
     } 
    }; 
    xhttp.open("POST", page); 
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    xhttp.send(data); 
} 

あなたがajax_call関数を呼び出すときに、あなたがあなたの要素を更新してしまう最後の引数としてコールバック関数に渡します。

ajax_call("/everythingapps/imagegallery/edit_gallery.php", target_tag, gallery, function() { 
    //ajax call has completed so now we can update the element 
    document.getElementById('gallery_save_btn').addEventListener('click', function() {save_gallery();}) 
}); 

追加の変更あなたは物事をもっと柔軟にして、あなたのAjaxコールをより一般的なものにすることは、サーバー応答をコールバック関数に渡すことです。更新したいターゲットが複数ある場合は、これを実行します。

callbackFn(xhttp.responseText); //INVOKE THE CALLBACK FUNCTION WITH DATA 

次に、あなたは、引数としてtarget_tagを排除し、これを行うことができます：

ajax_call("/everythingapps/imagegallery/edit_gallery.php", gallery, function(data) { 
    //ajax call has completed so now we can update TWO ELEMENTS 
    target_tag.innerHTML = data; 
    document.getElementById('gallery_save_btn').addEventListener('click', function() {save_gallery();}) 
}); 

Answer 2

だからここで起こっていくつかあります。

まず、コールバック。彼らは難しいことができます！私は彼らの周りにあなたの頭を上げるのが最も良いことを発見しました。それは、状況のコードを抽象化することによって、コード内で何が起こっているのかを視覚化することです。以下を取ってください（私と一緒にご負担ください）：

Amazonで靴下を買っています。一度あなたが欲しい靴下を手に入れたら、町の周りに身に着けて、派手に見えるようになるでしょう。だからあなたはあなたのコンピュータ上にいて、あなたが望む最も美しいソックスを見つけて、「購入」をクリックします。バム！彼らは2日間でここにいます。

これは素晴らしいですが、今は何ですか？あなたは次の2日間あなたの人生で乗りたい！それらの靴下があなたのドアに来たら、あなたはそれらを置くでしょう - それまで、それはいつものようにビジネスです。

コールバックはこれと似ています。彼らは（アマゾンの注文靴下のような）何かを行い、彼らが要求したものが戻ってくるまであなたのコードを凍結する代わりに、コードが動きます。コールバックは、定義上、非同期呼び出しが行われるたびにプログラムが実行するタスクのセットです（この例では、コールバックはソックスを履き、町の周りに着ることになります）。

これは事実です：あなたが戻ってくるデータに依存するすべてのもの（例では、あなたのドアに来る靴下）がコールバック機能に残っていることを確認する必要があります。

1）彼らはジム 2）ジム 3）ジムから帰る途中でそれらを着用でそれらを着用して駆動着用：このばかげた例を続行するには、あなたはあなたの靴下で次の操作を実行したいとしましょう

あなたは新しいソックスに関連するこのリストを作成します。リストの共通テーマは何ですか？あなたはに靴下を持っています！それらがなければ、あなたはこれらのことのいずれかを行うことができませんでした（少なくとも、リストにどのように指定されているか）。

この長い応答はどのようにコードと関連していますか？さて、あなたがAJAX呼び出しを行った後のステップと、各ステップが依存するステップを見てみましょう。基本的に、PHPファイルの中に何かがあると仮定しているコードがあれば、コールバック関数でそのコードを必要とします。

運が良かった！