好了，所以我写了一个项目，我工作的一个小聊天系统。我一直在努力学习AJAX的过程中，和一切似乎进展顺利。我的AJAX运行，打开目录的PHP页面，和AJAX接收目录后面的页面为一个数组（DirectoryList）。然后，它一遍又一遍地加载另一个AJAX功能，直到所有的聊天记录都附加到DIV。

我的问题是，ChatLogs正确的顺序不会被加载。

例如，如果我有日志：

它们将被追加到ChatContainer DIV为：

而不是正确的顺序。

下面是我的code：

  VAR ChatList =新的Array（）;
VAR磷;
VAR DirectoryList =新的Array（）;
VAR ChatString ='';

功能loadChat（变量）{
    VAR REQ =新XMLHtt prequest（）;
    req.onreadystatechange =功能（）{
        如果（req.readyState == 4和＆安培; req.status == 200）{
            DirectoryList = JSON.parse（req.responseText）;
            VAR P =变量;
            而（P＆LT; D​​irectoryList.length）{
                loadLog（对）;
                p ++;
            }
        }
    }

    // END REQ1

    //邮政聊天DIV

    功能loadLog（对）{
        $获得（聊天/日志/+ DirectoryList [P]，功能（数据2）{
            ChatList.push（数据2）;
            $（'＃ChatContainer）追加（数据2）。
        }）;
    }

    //结束
    req.open（GET，过程/ ReadChatLogs.php，真）
    req.send（空）;
}

loadChat（0）;
 

解决方案

阿贾克斯不能保证以相同的顺序，你要求他们，因为服务器可能需要更长的时间才能返回比它的下一个请求来完成。要解决这个问题，等到他们都做，然后遍历原始集合和追加的结果。下面是你如何能做到这一点与延迟对象。

  VAR ChatList =新的Array（）;
VAR磷;
VAR DirectoryList =新的Array（）;
VAR ChatString ='';

功能loadChat（变量）{
    VAR REQ =新XMLHtt prequest（）;
    req.onreadystatechange =功能（）{
        如果（req.readyState == 4和＆安培; req.status == 200）{
            DirectoryList = JSON.parse（req.responseText）;
            VAR P =变量;
            变种defArr = []; //存储引用递延对象
            而（P＆LT; D​​irectoryList.length）{
                defArr.push（loadLog（对））;
                p ++;
            }
            $ .when.apply（$，defArr）.done（函数（）{//应用处理程序时，所有完成
                //处理情况，只有一个Ajax请求被送到哪里
                变参=参数;
                如果（$ .TYPE（参数[0]）！=阵）{
                    ARGS = [];
                    的args [0] =参数;
                }
                //遍历和输出中的结果。
                VAR outHTML =;
                $。每个（参数，函数（我）{
                    outHTML + =的args [I] [0];
                    ChatList.push（参数[I] [0]）;
                }）;
                $（＃ChatContainer）追加（outHTML）。
            }）;
        }
    }

    // END REQ1

    //邮政聊天DIV

    功能loadLog（对）{
        返回$获得（聊天/日志/+ DirectoryList [P]）;
    }

    //结束
    req.open（GET，过程/ ReadChatLogs.php，真）
    req.send（空）;
}
 

编辑：固定的情况下，只有一个Ajax请求被发送

Okay, so I am writing a little chat system for a project I'm working on. I've been trying to learn AJAX in the process, and all seems to be going well. My AJAX runs a PHP page that opens a directory, and AJAX receives the directory back from the page as an Array (DirectoryList). It then loads another AJAX function over and over until all of the chat logs are appended to the DIV.

My problem is that the ChatLogs are not loaded in the right order.

For example, if I had the Logs:

They would be appended to the ChatContainer DIV as:

Instead of the correct order.

Here's my code:

var ChatList = new Array();
var p;
var DirectoryList = new Array();
var ChatString = '';

function loadChat(variable) {
    var req = new XMLHttpRequest();
    req.onreadystatechange = function () {
        if (req.readyState == 4 && req.status == 200) {
            DirectoryList = JSON.parse(req.responseText);
            var p = variable;
            while (p < DirectoryList.length) {
                loadLog(p);
                p++;
            }
        }
    }

    //END REQ1

    //Post Chat to DIV

    function loadLog(p) {
        $.get('chat/log/' + DirectoryList[p], function (data2) {
            ChatList.push(data2);
            $('#ChatContainer').append(data2);
        });
    }

    //End
    req.open('GET', 'process/ReadChatLogs.php', true)
    req.send(null);
}

loadChat(0);

Ajax is not guaranteed to finish in the same order that you request them because the server may take longer to return one request than it does the next. to solve this, wait until they are all done, then loop over the original collection and append the results. Below is how you could do that with deferred objects.

var ChatList = new Array();
var p;
var DirectoryList = new Array();
var ChatString = '';

function loadChat(variable) {
    var req = new XMLHttpRequest();
    req.onreadystatechange = function () {
        if (req.readyState == 4 && req.status == 200) {
            DirectoryList = JSON.parse(req.responseText);
            var p = variable;
            var defArr = []; // store references to deferred objects
            while (p < DirectoryList.length) {
                defArr.push(loadLog(p));
                p++;
            }
            $.when.apply($,defArr).done(function(){ // apply handler when all are done
                // handle case where only one ajax request was sent
                var args = arguments;
                if ($.type(args[0]) != "array") {
                    args = [];
                    args[0] = arguments;
                }
                // loop over and ouput results.
                var outHTML = "";
                $.each(args,function(i){
                    outHTML += args[i][0];
                    ChatList.push(args[i][0]);
                });
                $("#ChatContainer").append(outHTML);
            });
        }
    }

    //END REQ1

    //Post Chat to DIV

    function loadLog(p) {
        return $.get('chat/log/' + DirectoryList[p]);
    }

    //End
    req.open('GET', 'process/ReadChatLogs.php', true)
    req.send(null);
}

Edit: fixed case where only one ajax request is sent