web-dev-qa-db-ja.com

JSONP要求がエラーを返します：「Uncaught SyntaxError：Unexpected token：」

そこで、次の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で圧縮することを知っていますが、これは問題を引き起こすでしょうか？

javascriptajaxjquerystackexchange-api
25
theabraham

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パラメーターを使用するように求められます。

21
lonesomeday

次のURLを試してください： http://api.stackoverflow.com/1.1/stats?jsonp=callme

「callme」は、コールバック関数の名前です-GLOBAL NAMESPACE（ウィンドウオブジェクト）内。

ところで、Firefoxを実行していてJSONViewアドオンをインストールしている場合は、上記のURL（および比較用のURL）を直接テストできます。

URLを呼び出した結果：

callme({
  "statistics": [
...
  ]
})
4
Mörre