PHP ::: 2 个 AJAX 调用 ::: 2 个响应 ::: 按顺序

Question

这个问题已经被问过好几次了，但已经得到了很好的解决。

在我看来，一个糟糕的实现是：

使用像 mootools 或 jquery 这样的库

在请求之间使用某种延迟，例如 setTimeout("doNext()",3000);

具体来说，我想要实现的目标就是这个。

<div onClick="javascript:one();two();"></div>

one() 和two() 是AJAX

one() 必须出现在two() 之前

Answer 1

two(); 必须在 one() 中的 ajax 成功处理程序中调用。例如：

html:

<div onClick="javascript:one();"></div>

javascript:

function one() {
    $.ajax({
        ...
        success: function() {
            setTimeout(two,3000);
        }
    });
}

function two() {
    $.ajax({
        ...
    });
}

Answer 2

试试这个！

function one() {
    $.ajax({
        ...
        aysnc:false,
    });
}

function two() {
    $.ajax({
        ...
        aysnc:false,
    });
}

Answer 3

我同意 scessor 的观点，即第二个函数应该在第一个函数内执行 - 如果成功的话。这是我的 AJAX 函数，没有任何 jquery 或其他需要的：

    function ajax_call_1(divId, params)
    {
        if (window.XMLHttpRequest){
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else{
            // code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange=function(){
            if (xmlhttp.readyState==4 && xmlhttp.status==200){
                if(divId!='')
                    document.getElementById(divId).innerHTML=xmlhttp.responseText;
                else{
                    // do something else
                }
                ajax_call_2('html_id', 'parameters_to_be_send')
            }
        }
        xmlhttp.open("POST", "script_url", true); //file
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.setRequestHeader("Content-length", params.length); //length
        xmlhttp.setRequestHeader("Connection", "close"); 
        xmlhttp.send(params); //parameters
    }

第二个函数是相同的，但没有成功时的函数调用：

        function ajax_call_2(divId, params)
        {
            if (window.XMLHttpRequest){
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else{
                // code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }

            xmlhttp.onreadystatechange=function(){
                if (xmlhttp.readyState==4 && xmlhttp.status==200){
                    if(divId!='')
                        document.getElementById(divId).innerHTML=xmlhttp.responseText;
                    else{
                        // do something else
                    }
                }
            }
            xmlhttp.open("POST", "script_url", true); //file
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xmlhttp.setRequestHeader("Content-length", params.length); //length
            xmlhttp.setRequestHeader("Connection", "close"); 
            xmlhttp.send(params); //parameters
        }

ajax_call_1 函数参数是：

divId ：将要调用的 html 元素的 id保存 AJAX 调用后的结果

params ：应与请求一起发送的参数，即 id、名称或您需要发送的某种其他值。

说实话这两个函数的复用性不太好。我正在将它们更改为更加抽象，以便它们可以用于每 2 个同时进行的 AJAX 调用，但目前它们做得很好。