そこで、次のjQueryコードを使用してStack Exchange APIにリクエストを送信しようとしています。
$.ajax({
type: 'POST',
url: 'http://api.stackoverflow.com/1.1/stats',
dataType: 'jsonp',
success: function() { console.log('Success!'); },
error: function() { console.log('Uh Oh!'); }
});
しかし、FireFoxまたはChromeのいずれかでマシンでファイルを開き、リクエストを行うと、次のエラーが表示されます。
Resource interpreted as Script but transferred with MIME type application/json.
Uncaught SyntaxError: Unexpected token :
Uh Oh!
何が起こっているのか見当がつかない。 Stack Exchange APIがその応答をGzipで圧縮することを知っていますが、これは問題を引き起こすでしょうか?
SO APIが機能するようにするには、従来とは異なるパラメーターを設定する必要があります。従来のcallback
ではなく、jsonp
パラメーターを渡す必要があります。
さらに、JSONPではPOST
を実行できません。
$.ajax({
type: 'GET',
url: 'http://api.stackoverflow.com/1.1/stats',
dataType: 'jsonp',
success: function() { console.log('Success!'); },
error: function() { console.log('Uh Oh!'); },
jsonp: 'jsonp'
});
クロスドメインAJAXを使用して、従来のXMLHTTPRequestを使用することはできません。これはセキュリティ上の理由によるものです(same-Originポリシーを呼び出します)。
回避策があります。 script
タグはこの制限を受けません。これは、URLを呼び出すドキュメントにscript
タグを挿入できることを意味します。スクリプトでグローバルにアクセス可能な関数を定義し、その関数が何を呼び出すかをリモートサーバーに伝えると、サーバーはその関数の呼び出しで送信されるデータをラップするコードを渡すことができます。
ここで難しかったのは、StackOverflow APIの使用です。従来は、リクエストでcallback
引数を使用して、関数の呼び出し内容をサーバーに通知していました。ただし、StackOverflowのAPIでは、代わりにjsonp
パラメーターを使用するように求められます。
次のURLを試してください: http://api.stackoverflow.com/1.1/stats?jsonp=callme
「callme」は、コールバック関数の名前です-GLOBAL NAMESPACE(ウィンドウオブジェクト)内。
ところで、Firefoxを実行していてJSONViewアドオンをインストールしている場合は、上記のURL(および比較用のURL)を直接テストできます。
URLを呼び出した結果:
callme({
"statistics": [
...
]
})