人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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からアクセスし、戻り値として上記のような文字列を得る為にはどのようにコーディングしたら良いでしょうか?

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

●質問者: かすかべぼうえいたい
●カテゴリ:ウェブ制作
✍キーワード:API JavaScript JSON URL Ustream
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● うぃんど
●23ポイント

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+...

◎質問者からの返答

windofjuly さんありがとうございます。

試してみましたが上記のコードでsendでエラーが出てしまいました。

Wikipediaにあるコードも試してみましたがどうも上手く行きません。

引き続き回答を募集いたします。


2 ● pretaroe
●23ポイント

http://www.openspc2.org/JavaScript/Ajax/Ajax_study/chapter03/006...

こんな感じで簡単に取得できます。

Javascript JSON で探せばいろいろな処理が見つかると思いますよ。

◎質問者からの返答

pretaroeさんありがとうございます。

どこをどう参照して切り出せばいいのかがわからないので

コピペで動くようなコードを記載していただけると助かります。

引き続き回答を募集いたします。


3 ● Cherenkov
●51ポイント ベストアンサー

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を使うと便利だと思います。





回答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が必要になります。

◎質問者からの返答

Cherenkov さんありがとうございます。

詳しい説明を頂いた為に解決する事ができました。

ありがとうございました。


4 ● tama213
●5ポイント

JSONPという手法を使うべきでしょう

http://labs.s-koichi.info/blog/archives/2009/06/12/1833-94.php

◎質問者からの返答

tama213 さんありがとうございます。

参考にします。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ