使用jquery / ajax检查URL是否存在

时间:2013-05-04 19:01:48

标签: javascript jquery ajax

这让我完全糊涂了。我正在尝试运行一系列Youtube ID来检查视频是否仍然存在。

我有一个数组中的所有ID,并想检查gdata api以查看我是否获得XML结果或找不到视频404消息。

我在SO上找到了一个函数来检查每个id并在表中添加一行。

var ytarray = ARRAY OF YOUTUBE IDs
var yttitles = ARRAY OF MATCHING TITLES FOR THE VIDS
var urlExists = function(url, callback){
$.ajax({
            type: 'HEAD',
            url: url,
            success: function() {
                callback(true);
            },
            error: function() {
                callback(false);
            }            
        });

    }
    var length = ytarray.length,
    for (var i = 0; i < length; i++) {
    urlExists('http://gdata.youtube.com/feeds/api/videos/'ytarray[i], function(success) {
        if (success) {
              $('#rows').append('<tr><td>'+yttitles[i]+'</td><td>'+ytarray[i]+'</td><td style="color: green">Found</td></tr>');
        } else {
              $('#rows').append('<tr><td>'+yttitles[i]+'</td><td>'+ytarray[i]+'</td><td style="color: red">Not Found</td></tr>');
        }
    });
    };
});
});

表格填写但所有行都包含最后一个视频的信息,而不是每个视频在循环中的信息。

使用警报进行测试似乎在所有for循环完成之前表格没有填写。

我想知道这是否与我没有正确处理AJAX的异步性质有关?

3 个答案:

答案 0 :(得分:2)

尽量保护我。在ajax响应之后将调用回调,直到循环结束,因此i的值将等于length。

   for (var i = 0; i < length; i++) {
          (function(i){
            urlExists('http://gdata.youtube.com/feeds/api/videos/'ytarray[i], function(success) {
                if (success) {
                      $('#rows').append('<tr><td>'+yttitles[i]+'</td><td>'+ytarray[i]+'</td><td style="color: green">Found</td></tr>');
                } else {
                      $('#rows').append('<tr><td>'+yttitles[i]+'</td><td>'+ytarray[i]+'</td><td style="color: red">Not Found</td></tr>');
                }
            });
        })(i)
     }

答案 1 :(得分:2)

我对如何以同步方式执行URL验证感到困惑。 然后我碰巧碰到了YQL,玩了一段时间,然后组成了这个:

  function isValidURL(url) {
    var encodedURL = encodeURIComponent(url);
    var isValid = false;

    $.ajax({
      url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22" + encodedURL + "%22&format=json",
      type: "get",
      async: false,
      dataType: "json",
      success: function(data) {
        isValid = data.query.results != null;
      },
      error: function(){
        isValid = false;
      }
    });

    return isValid;
  }

用法很简单:

var isValid = isValidURL("http://www.wix.com");
alert(isValid ? "Valid URL!!!" : "Damn...");

希望这可以帮助那些尝试同步验证URL的人。

答案 2 :(得分:1)

var ytarray   = ["ARRAY OF YOUTUBE IDs"],
    yttitles  = ["ARRAY OF MATCHING TITLES FOR THE VIDS"],
    urlExists = function(url){
        return $.ajax({
            type: 'HEAD',
            url : url
        });
    },
    output = function(state, i) {
        var tr  = $('<tr />'),
            td1 = $('<td />', {text : yttitles[i]}),
            td2 = $('<td />', {text : ytarray[i]}),
            td3 = $('<td />', {text : state ? 'Found' : 'Not found', 
                               style: state ? 'color: green' : 'color:red'});

        $('#rows').append( tr.append(td1, td2, td3) );
    },
    length = ytarray.length;

for (var i = 0; i < length; i++) {
    (function(k) {
        urlExists('http://gdata.youtube.com/feeds/api/videos/' + ytarray[k])
           .done(function() {
             output(true, k);
           }).fail(function() {
                output(false, k);
        });
    })(i);
}

花了一些时间来弄明白,但你需要一些闭包,以及处理异步行为的不同方式。