使用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。