2013-05-04 35 views
1

這讓我完全困惑。我試圖通過一系列的YouTube ID來檢查視頻是否仍然存在。檢查與jquery/ajax存在的網址

我有一個數組中的所有ids,並希望檢查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的異步性質?

回答

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); 
} 

花了一些時間才能體現出來,但你需要一些關閉,並處理異步行爲以不同的方式。

+0

這就像一個夢一樣!我不認爲我會爲自己工作。你在這裏做的任何解釋都會非常有用。 – DaveR 2013-05-04 19:23:41

+1

剛給了它一個小小的結構,在循環中添加了一個clousure,並且從ajax函數返回了延期的承諾,按照它的意圖使用它。 – adeneo 2013-05-04 19:25:11

2

嘗試保存我。回調將在ajax響應之後調用,直到循環完成,i的值將等於長度。

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) 
    } 
+0

我得到「意外標識符」。這是指我嗎? – DaveR 2013-05-04 19:11:17

+0

@DaveR不能說,只是把你的代碼放在一個匿名函數裏面 – Anoop 2013-05-04 19:12:51

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..."); 

希望這可以幫助任何人試過驗證網址,同步。