使用AJAX無需jQuery從Vimeo頻道獲取視頻

Question

我正在嘗試編寫一個簡單的AJAX方法，以便從Vimeo獲取不使用jQuery的視頻列表。我意識到我必須使用JSONP格式，因爲它是一個跨域請求。但是，返回的結果始終爲200，並且始終爲空。這裏是我的方法：

var httpRequest = new XMLHttpRequest(); 

httpRequest.open("GET", "http://vimeo.com/api/v2/channel/staffpicks/videos.json?callback=?", true); 
httpRequest.send(); 

httpRequest.onreadystatechange = function() { 
    if (httpRequest.readyState == 0) { 
     console.log("0"); 
    } 
    if (httpRequest.readyState == 1) { 
     console.log("1"); 
    } 
    if (httpRequest.readyState == 2) { 
     console.log("2"); 
    } 
    if (httpRequest.readyState == 3) { 
     console.log("3"); 
    } 
    if (httpRequest.readyState == 4 && httpRequest.status == 200) { 
     console.log("4"); 
    } 
    if (httpRequest.readyState == 4 && httpRequest.status == 404) { 
     console.log("5"); 
    } 
}; 

控制檯日誌2，但不爲0，1，3，4或5。它總是隻是2

順便說一句，這並不一定是一個Vimeo請求。我使用Vimeo URL的唯一原因是因爲我不知道如何測試AJAX請求，而不是擊中實際站點。

Answer 1

回想起來，這是一個非常糟糕的問題。這實際上是兩三個問題：

1. 爲什麼我的跨域請求Vimeo返回200確定，但它是空的？
2. 爲什麼控制檯記錄2但不是0,1,3,4或5？
3. 我該如何測試一個AJAX請求，而不是打一個實際的站點？

問題一和問題二的答案如下，分別由Alexander和Eswar Rajesh Pinapala發佈。問題三的答案是請求本地JavaScript文件。

有一件事我與別人掙扎可能從中受益是httpRequest.status拋出異常時httpRequest.readyState爲0或1。所以這不起作用：

httpRequest.onreadystatechange = function() { 
    alert(httpRequest.readyState + httpRequest.status); 
};​ 

這裏是什麼工作我：

try { 
    httpRequest = new XMLHttpRequest(); 
    console.log("0"); 

    httpRequest.open(options.method, options.url, true); 
    console.log("1"); 

    httpRequest.send(); 
} catch (err) { 
    console.log(err.name + ': ' + err.message + ' (line ' + err.lineNumber + ')'); 

    return false; 
} 

httpRequest.onreadystatechange = function() { 
    if (httpRequest.status === 404) { 
     this.onreadystatechange = null; 

     return false; 
    } 

    if (httpRequest.readyState === 2) { 
     console.log("2"); 
    } else if (httpRequest.readyState === 3) { 
     console.log("3"); 
    } else if (httpRequest.readyState === 4) { 
     console.log("4"); 

     return true; 
    } 
}; 

原因包裹構造，開放，發送在try ... catch語句的方法是使你可以捕捉從壞的文件名或某事產生的任何錯誤。在它進入onreadystatechange函數之前，它們會被炸燬。 onreadystatechange屬性只在調用send方法後才被初始化。

Answer 2

您需要了解這些數字的含義。

readyState屬性指示請求的當前狀態。它返回一個4字節的整數。

此屬性爲只讀，並具有以下定義的值

UNINITIALIZED(0) 
The object has been created, but has not been initialized (the open method has not been called). 
LOADING(1) 
The object has been created but the send method has not been called. 
LOADED(2) 
The send method has been called and the status and headers are available, but the response is not. 
INTERACTIVE(3) 
some data has been received. You can get the partial results using the responseBody and the responseText properties. 
COMPLETED(4) 
All the data has been received, and is available. 

嘗試

httpRequest.onreadystatechange = function() { 
    alert(httpRequest.readyState + httpRequest.status); 

};​ 

的狀態：

200狀態OK 400 HTTP 400錯誤的請求

ans然後決定你從他的服務器收到什麼。

Answer 3

如果你想使用JSONP，你需要以不同的方式做，或者Cross Origin Policy不會讓請求通過。

// Define a callback function 
var log = function(videos){ 
    console.log(videos); 
}; 

// Get the JSONP response and insert it in your DOM 
var script = document.createElement('script'); 
script.src = "http://vimeo.com/api/v2/channel/staffpicks/videos.json?callback=log"; 
document.getElementsByTagName('head')[0].appendChild(script); 

通常用JSON請求你：

[ { id: 0, title: "this is a title" } ] 

但是，當你發送JSONP請求你擺脫你提供的回調函數包裝的響應：

log([ { id: 0, title: "this is a title" } ]) 

此刻，您將此響應插入到DOM中，您的回調函數可以完成其工作（來自Javacript的簡單函數調用）。

這是working example。