0

jQuery を使用せずに Vimeo からビデオのリストを取得するための単純な AJAX メソッドを作成しようとしています。これはクロスドメイン リクエストであるため、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 リクエストをテストする方法を知らないからです。

4

3 に答える 3

1

JSONP を使用する場合は、別の方法で行う必要があります。そうしないと、クロス オリジン ポリシーがリクエストを通過させません。

// 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 からの単純な関数呼び出し)。

これは実際の例です。

于 2012-06-26T16:44:07.847 に答える
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 ステータス OK 400 HTTP エラー 400 不正な要求

次に、サーバーから何を受け取るかを決定します。

于 2012-06-26T16:36:41.103 に答える
0

振り返ってみると、これはかなり悪い質問です。それは本当に2つか3つの質問です：

  1. Vimeoへのクロスドメインリクエストが200OKを返すのに、空であるのはなぜですか？
  2. コンソールが2をログに記録するのに、0、1、3、4、または5をログに記録しないのはなぜですか？
  3. 実際のサイトにアクセスする以外に、AJAXリクエストをテストするにはどうすればよいですか？

質問1と2の回答は以下のとおりで、それぞれAlexanderとEswarRajeshPinapalaによって投稿されました。質問3の答えは、ローカルのJavaScriptファイルをリクエストすることです。

他の人が恩恵を受けるかもしれないという私が苦労したことの1つは、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ステートメントでコンストラクター、open、sendメソッドをラップする理由は、ファイル名の誤りなどに起因するエラーをキャッチできるようにするためです。これらは、onreadystatechange関数に入る前に爆発します。onreadystatechangeプロパティは、sendメソッドが呼び出された後にのみ初期化されます。

于 2012-07-30T03:07:00.690 に答える