2011-03-10 4 views
4

XMLやJSONを扱うAPIにアクセスするウェブページ用の埋め込み可能なウィジェットを作成したいと思います(これらの2つのフォーマットの中から選択できます)。私がしたいのは、ユーザーがコードブロックを選択してウェブサイトに貼り付けてもらうことです。Twitter WidgetsJavascript外部JSON/XMLを取得するためのウィジェット...どのように?

クロスドメインのセキュリティ上の問題のため、ロードするためのajax呼び出しを行うことはできませんこれらの外部データセットは、iFrameを使用するだけですか?私は、ユーザーがCSSを介して変更することができるように、出力の柔軟性が少しあるものを好むだろう。

ホストサイトでクロスドメイン権限を開く以外に何かできることはありますか?

答えて

2

jsonpを参照してください。

一般的に、単純化しすぎ実装、ちょうどそれがどのように機能するかを説明するためには、次のようになります。

クライアント上:サーバー上の

var s = document.createElement("script"); 
    s.src = "http://yoursever.com/path/to/server/page?r=mySpecialCallback" 
    document.body.appendChild(s); 

    function mySpecialCallback(data){ 
     //do stuff with data that server returned 

    } 

、例えばASPXで

<%=Request["r"]%>({name: "Don-Joy", age: 34 }); 

かPHPで

<?php $_GET['r']?>({name: "Don-Joy", age: 34 }); 

制限:

1 - 投稿なし。 GETのみ。サーバーに送信されるデータは、URLに収まるものに限定されます。

2 - サーバーの応答は純粋なJSONではありません。コールバック関数でラップする必要があります。例 - rクエリ文字列パラメータを使用します。

楽しいを持っている

+0

3 - (私は意味 - 別の制限) - すべてのサーバの応答 - エラーを含む - は、彼らが

1

JSONPはあなたの友人です。動的に追加されたリンクスクリプトでデータを返信するだけです。

その後
var script = document.body.appendChild(document.createElement("script")); 
script.type = "text/javascript"; 
script.src = "http://yourserver/yourhandler?parameters=values"; 

は、あなたのマシン上のデータサーバ側に要求:

まず、データ要求は、のようなものを経由してサーバーにクライアントによって送信されます。応答をJavaScriptとして返します。次のようなものがあります。

DataResponse({ /* data here */ }); 

このスクリプトは、先に作成されたスクリプト要素に読み込まれます。 DataResponse()が要求側のクライアントで呼び出されます。

関連する問題