等待AJAX响应后再继续

Question

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之后所采取的步骤，以及每一步都依赖于什么。基本上，如果任何代码假设PHP文件中有任何内容，那么在回调函数中需要它。

祝你好运！