AJAX 获取多个 XML 文件时的回调

Question

我正在尝试更好地了解回调的工作原理。

在这个例子中，我想使用 AJAX 获取两个或更多 XML 个文件，然后从中提取我需要的内容，然后将该数据存储在 XML 之外的数组中=20=]打电话。我想使用 "dataExt" 数组绘制 google 图表，但我无法正确实现回调。我想我的脑袋还不够大！

这是我的代码片段。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>

   // List of xml files.
   var xmlFeed = ['rss-feed1.xml', "rss-feed2.xml"];

  // An array to store each "dataString" from each XML file.
   var dataExt = [];

    for(var i = 0; i < xmlFeed.length; i++) {

        $.ajax({
        type: "GET",
        dataType: "xml",
        async: true,
        url: xmlFeed[i],
        contentType: "text/xml; charset=UTF-8",
        success: function(xml){

            var content = $(xml).find("content");
            var dataString = (content.text());
            console.log(dataString);

            // Need to push "dataString" to "dataExt" array.
            // dataExt = dataExt.push(dataString); <-- this doesn't work 

            }  

        }) // close ajax    
    } // close loop

    console.log(dataExt[0]);
    console.log(dataExt[1]);

</script>

Answer 1

在原始示例中，控制台日志在请求完成之前触发。

希望这个例子是你的意思：

function getXml(file, successCallback){
    $.ajax({
        type: "GET",
        dataType: "xml",
        async: true,
        url: file,
        contentType: "text/xml; charset=UTF-8",
        success: successCallback

        }) // close ajax  
    }

    function sc(xml){
            var content = $(xml).find("content");
            var dataString = (content.text());
            console.log(dataString);

            // Need to push "dataString" to "dataExt" array.
            // dataExt = dataExt.push(dataString); <-- this doesn't work 

           // do whatever else you want next

    }

    pages ['1.xml', '2.xml'].forEach(function(v, i){
        getXml(v, sc);
    })

Answer 2

当您发出 AJAX 请求时，立即调用 $.ajax() returns。它不会等待内容通过网络返回。在您的示例中，console.log() 语句在回调完成之前被调用。

您想要的是在从各种请求中获取您需要的所有数据后执行的单个回调。为此，您需要在您正在进行的各种 AJAX 调用之间进行某种同步。 jQuery 本身并不能很好地支持这一点。

你可以自己滚这个。然而，这是一个非常常见的设计问题，已经编写了整个库来处理它。

对 Promise 模式进行一些谷歌搜索。完成后，请查看 Q 库，它是该模式的几个实现之一。他们为您完成了同步多个 AJAX 请求的大部分艰苦工作。

示例：

function xmlPromise(name) {
    return Q.promise(function (resolve, reject, notify) {
        $.ajax({
            type: "GET",
            dataType: "xml",
            async: true,
            url: name,
            contentType: "text/xml; charset=UTF-8"
        })        
       .done(function (data) {
           resolve(data);
        }).fail(function () {
            reject();
        });
    });
};

var promises = [ xmlPromise('1.xml'), xmlPromise('2.xml') ];

var results = [];

Q.allSettled(promises).then(function(responses) {
    console.log(responses[0].value);
    console.log(responses[1].value);

    results.push(responses[0].value);
    results.push(responses[1].value);
});

在此示例中，xmlPromise() 函数根据您要获取的 URL 为您创建一个承诺对象。这个承诺表示将在未来某个时间完成的一个工作单元。当您在承诺 returns 中创建的 AJAX 调用成功时，它会调用 resolve() 方法，让 Q 知道承诺已经实现，数据可以使用了。

一旦构建了 promise，我们将它们的数组传递给 Q.allSettled()，这实际上会触发请求。因为这些请求是异步的，所以它们是并行执行的。一旦所有承诺都已解决或被拒绝，Q 将调用您传递给 then() 方法的函数，并传递 AJAX 调用的结果。

AJAX 获取多个 XML 文件时的回调

AJAX callbacks when getting multiple XML files

javascript

xml

ajax

callback