UstreamのAPIをjavascriptで利用しようと思っています。

APIの使い方は、指定のパラメータを含んだURLをブラウザのアドレスバーに入力するとJSON形式のアウトプットがブラウザに表示されるというスタイルです。

例えば、
http://api.ustream.tv/json/channel/xxxx/getValueOf/status?key=xxxx

という文字列をアドレスバーに打ち込んでアクセスすると

{"results":"offline","msg":null,"error":null,"processTime":true,"version":"mashery-r10"}

という文字列がブラウザに表示されます。
このAPIにjavascriptからアクセスし、戻り値として上記のような文字列を得る為にはどのようにコーディングしたら良いでしょうか？

ご存知の方がいらっしゃいましたらご教示ください。

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ログインして回答する

ベストアンサー

Cherenkov2011/03/29 19:00:50
満足51pt
JSONPとクロスドメインの制限は以下のページがわかりやすいです。

これでできる！クロスブラウザJavaScript入門：第11回　JSONP入門｜gihyo.jp … 技術評論社

Data API - Documentation | Ustream Developer Network

ustreamのドキュメントに明記されていませんでしたが、callbackパラメータによるJSONPが使えるようなので、一番シンプルにやるならこうです。

xxxxという名前のchannnelの情報を取得しています。（この場合はkeyもいらないみたいですね）

JSONPの場合、callbackパラメータで指定した関数を実行してくれるので事前に仕込んでおきます。

DEMO: http://jsfiddle.net/LNYAX/
```
<html>
<head>
<script>
function hoge(json) {
  console.log(json);
  alert(json.url);
}
</script>
<script src="http://api.ustream.tv/json/channel/xxxx/getInfo/status?key=your_key&callback=hoge"></script>
</head>
<body>
</body>
</html>
```
scriptタグ以外の方法はjQueryで$.ajaxや$.getJSONを使うと便利だと思います。
- jQuery で JSONP ２通り - てっく煮ブログ
- jQuery.getJSON( url, data, callback ) - jQuery 日本語リファレンス
回答1の方法は、ustream側がAccess-Control-Allow-Originを許可していないと使えない。

404 Blog Not Found:Ajax - Goodbye, JSONP. Hello, Access-Control-Allow-Origin

回答2のリンク先のようにローカルファイルをXMLHttpRequestで読み込むならば同一生成元ポリシーに引っかかりませんが、質問のように外部のAPIから取得する場合は上記と同じくAccess-Control-Allow-Originが必要になります。
スター
- かすかべぼうえいたい 2011/03/29 22:44:24
  
  Cherenkov さんありがとうございます。
  
  詳しい説明を頂いた為に解決する事ができました。
  
  ありがとうございました。

その他の回答

うぃんど2011/03/29 14:36:27
満足23pt
javascriptによる非同期通信の単純な例
```
xhr = new XMLHttpRequest();
xhr.open("GET", "http://api.ustream.tv/json/channel/xxxx/getValueOf/status?key=xxxx", false);
xhr.send(null);

alert(xhr.responseText);
```
下記も参照

http://ja.wikipedia.org/wiki/XMLHttpRequest

　

XMLHttpRequestを直接利用して自力でJSONを扱う方法以外に、

jqueryなどのjavascriptライブラリを使う方法もありますので参考まで

http://semooh.jp/jquery/api/ajax/jQuery.getJSON/+url%2C+data%2C+...
スター
- かすかべぼうえいたい 2011/03/29 17:20:10
  
  windofjuly さんありがとうございます。
  
  試してみましたが上記のコードでsendでエラーが出てしまいました。
  
  Wikipediaにあるコードも試してみましたがどうも上手く行きません。
  
  引き続き回答を募集いたします。

その他の回答を読む

この質問へのコメント

コメントはありません

この質問への反応（ブックマークコメント）

質問の情報

登録日時: 2011-03-29 13:06:53
終了日時: 2011-03-29 22:45:22
回答条件: 1人1回まで

この質問のカテゴリ

ウェブ制作

UstreamのAPIをjavascriptで利用しようと思っています。

ベストアンサー

Cherenkov2011/03/29 19:00:50
満足51pt

かすかべぼうえいたい 2011/03/29 22:44:24

その他の回答

うぃんど2011/03/29 14:36:27
満足23pt

かすかべぼうえいたい 2011/03/29 17:20:10

pretaroe2011/03/29 17:06:10
満足23pt

かすかべぼうえいたい 2011/03/29 17:31:57

tama2132011/03/29 20:00:15
満足5pt

かすかべぼうえいたい 2011/03/29 22:44:26

この質問へのコメント

この質問への反応（ブックマークコメント）

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

UstreamのAPIをjavascriptで利用しようと思っています。

ベストアンサー

Cherenkov2011/03/29 19:00:50 満足51pt

かすかべぼうえいたい 2011/03/29 22:44:24

その他の回答

うぃんど2011/03/29 14:36:27 満足23pt

かすかべぼうえいたい 2011/03/29 17:20:10

pretaroe2011/03/29 17:06:10 満足23pt

かすかべぼうえいたい 2011/03/29 17:31:57

tama2132011/03/29 20:00:15 満足5pt

かすかべぼうえいたい 2011/03/29 22:44:26

この質問へのコメント

この質問への反応（ブックマークコメント）

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

Cherenkov2011/03/29 19:00:50
満足51pt

うぃんど2011/03/29 14:36:27
満足23pt

pretaroe2011/03/29 17:06:10
満足23pt

tama2132011/03/29 20:00:15
満足5pt