难以理解ajax调用

Having trouble understanding ajax calls

本文关键字：ajax 调用更新时间：2023-09-26

基本上，我想做的是从RSS提要中获取5个图像，然后显示它们。不幸的是，RSS项目没有指向图像的链接，所以我所做的就是从RSS提要中获取文章URL，然后使用YQL扫描文章，看看是否有图像。文章可能有也可能没有图像，可能有10篇或更多的文章，所以我必须有一个计数器来确定我什么时候得到5张图像。这就是我的问题所在，我不知道如何在ajax调用的成功部分更新计数器（我也尝试过使用数组，但没有成功）。

我看到了其他的例子，从昨天开始我就一直在尝试这样做，但我运气不好。也许还有其他更简单的方法可以做到这一点，但我不知道。如有任何帮助，我们将不胜感激。

请参阅下面的代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>La Retama</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
    $(document).bind('mobileinit',function(){
    $.mobile.changePage.defaults.changeHash = false;
    $.mobile.hashListeningEnabled = false;
    $.mobile.pushStateEnabled = false;
    });
    </script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <link rel="stylesheet" href="./my_style.css"> 
</head>
<body>  
    <div id="home" data-role="page" >
        <div id="my_header" data-role="header">
            <h1>Insert Page Title Here</h1>
        </div>
        <div data-role="main" class="ui-content">
        </div>
        <div id="my_footer" data-role="footer" data-position="fixed">
            <h1>Insert Footer Text Here</h1>
        </div>
    </div> 
</body>
<script>
    var pagina7Arr = [];
    var pagina7SSPArr = [];
    /*Getting the RSS feed*/
    $.ajax({ 
        url: 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent('http://web.paginasiete.bo/rss/feed.html?r=77'),
        dataType : 'jsonp',
        success  : function (data) {
            var myObject = data.responseData.feed.entries;
            var how_many = 0;
            for (var i=0; i < myObject.length;i++){
                var article_url = myObject[i].link;             
                var YQL_link = checkPagina7URL(article_url)     
                var YQL = "https://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20data.html.cssselect%20WHERE%20url%3D'"+YQL_link+"'%20AND%20(css%3D'.fotoNota-ext%20'%20OR%20css%3D'.fotoNota')&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
                pagina7Arr.push(YQL)
            }
            pageImages(pagina7Arr)
        }
    });
    /* Here is where I want to store the 5 images */
    function pageImages(input){
        var module = 0;
        var testarr=[];
        for (var i=0; i<input.length; i++){
            $.ajax({ 
                url: input[i],
                dataType : 'jsonp',
                success  : function (data) {
/*I would like to update a counter here or insert images to an array I can use later on*/
                    try{
                        testarr.push(data.query.results.results[0].div.img.src);
                    }catch(err){
                        try{
                            testarr.push(data.query.results.results[1].div.img.src);
                        }catch(err){
                        }
                    }
                }
            });
            console.log("array: "+testarr.length)
        }
    }
    /*Formatting the page URL to insert into YQL call*/
    function checkPagina7URL (data){
        data = data.substr(data.indexOf('.bo')+4,data.length);
        var section = data.substr(0, data.indexOf('/'));
        data = data.substr(data.indexOf('/')+1,data.length)
        var year = data.substr(0,data.indexOf('/'))
        data = data.substr(data.indexOf('/')+1,data.length);
        var month = data.substr(0,2);
        if(month.indexOf('/') != -1){
            month = data.substr(0,1);
        }else{
            month = data.substr(0,2);
        }
        data = data.substr(data.indexOf('/')+1,data.length);
        var day = data.substr(0,2);
        if(day.indexOf('/') != -1){
            day = data.substr(0,1);
        }else{
            day = data.substr(0,2);
        }
        data = data.substr(data.indexOf('/')+1,data.length);
        var page_link = data.substr(data.indexOf('/')+1,data.length);
        var result = "http%3A%2F%2Fwww.paginasiete.bo%2F"+section+"%2F"+year+"%2F"+month+"%2F"+day+"%2F"+page_link;
        return result;  
    }
</script>
</html>

当您进行$.ajax（｛｝）调用时，成功将被异步调用。因此，当您拨打此电话时：console.log（"array:"+testarr.length）

现在计算图像还为时过早，所以这里发生的事情是，您正在调用所有页面，并为所有页面获取图像。您当然可以这样做，但在计数器变为>=5之后，您必须停止调用testarr.push。（柜台检查应该在你打这种推送电话之前）

一种更有效的方法是只获取您需要的内容（尽管由于同步性，速度会较慢），也就是说，只从上一次调用的成功函数中进行后续url调用。以上应该很容易做到。

你也可以做更花哨的工作（尽管编码起来更难），做混合，异步获取5个url，然后在成功回调中看到，如果你得到了5个图像，你就停止，如果没有，就对剩余的页面url发出（5计数器）异步请求。