AJAX以错误的顺序回归
好的，所以我正在为我正在进行的项目写一个小聊天系统。 我一直在尝试在这个过程中学习AJAX，而且一切似乎都很顺利。 我的AJAX运行一个打开目录的PHP页面，AJAX从页面接收目录作为Array（DirectoryList）。 然后反复加载另一个AJAX函数，直到所有聊天日志都附加到DIV。
我的问题是ChatLogs没有按正确的顺序加载。
例如，如果我有日志：
- 1.TXT
- 2.txt
- 3.txt
- 4.txt
它们将被附加到ChatContainer DIV中：
- 2.txt
- 1.TXT
- 4.txt
- 3.txt
而不是正确的顺序。
这是我的代码：
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不能保证以您请求的顺序完成，因为服务器返回一个请求可能比下一个请求更长。 要解决这个问题，请等待它们全部完成，然后遍历原始集合并附加结果。 以下是如何使用延迟对象执行此操作。
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); }
编辑：固定大小写，其中只发送一个ajax请求