Question

我正在尝试编写一个简单的AJAX方法，以便在不使用jQuery的情况下从Vimeo获取视频列表。我意识到我必须使用JSONP格式，因为它是一个跨域请求。但是，返回的结果始终为200 OK，并且始终为空。这是我的方法：

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

您需要了解这些数字的含义。

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状态确定 400 HTTP错误400错误请求

然后决定你从服务器那里得到什么。

Answer 2

如果你想使用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。

Answer 3

回想起来，这是一个非常糟糕的问题。这真的是两三个问题：

为什么我对Vimeo的跨域请求返回200 OK但它是空的？
为什么控制台会记录2而不是0,1,3,4或5？
除了点击实际网站之外，我还能如何测试AJAX请求？

问题一和二的答案如下，分别由Alexander和Eswar Rajesh Pinapala发布。问题三的答案是请求本地JavaScript文件。

我努力争取其他人可能会受益的一件事是当httpRequest.readyState为0或1时，httpRequest.status会抛出异常。所以这不起作用：

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方法后初始化。

使用没有jQuery的AJAX从Vimeo频道获取视频

3 个答案: