Ajaxで別ドメインにあるjsonの内容を取得したい

Question

表題の通り、別ドメインにあるjson(https://xxx/hoge.json)をAjaxで取得したいと考えています。

取得させたいjsonのURL　：　https://xxx/hoge.json?callback=hoge
※取得元は「http」です。

jsonの中身

/**/hoge(
  {"item":"hogehoge"},
  …
)

使用したコード(jQuery)

  $.ajax({
    url: 'https://xxx/hoge.json',
    type: 'GET',
    dataType: 'jsonp',
    jsonpCallback: 'hoge'
  })
  .done(
    function(data1,textStatus,jqXHR) {
      $("#out1").html(jqXHR.status); //jqXHR.statusを表示
      $("#out2").html(textStatus); //textStatusを表示
      $("#out4").html(data1["item"]);

  }).fail(
    function(jqXHR, textStatus, errorThrown) {
      $("#out1").html(jqXHR.status); //jqXHR.statusを表示
      $("#out2").html(textStatus); //textStatusを表示
      $("#out3").html(errorThrown); //errorThrownを表示
    });

発生している問題・エラーメッセージ

jqXHR.status : 200
textStatus : parsererror
errorThrown : Error: hoge was not called

callback名は一致(/**/が余分ですが)している認識なのですが、
「hoge was not called」になってしまうのは何故なのでしょうか？
また、表題の件を実現するより良い方法があればご教示いただきたく存じます。

Comments

[退会済みユーザー]

JSONP を利用しているようですが、それで要求をかける先は JSONP に対応している（JSON 文字列をコールバックの引数として返してくれる）ということは間違いないのですか？

[CHERRY]

API側は公開されている一般的なサービスでしょうか？ それとも自作されたAPIですか？

[madoka9393]

＞要求をかける先はJSONPに対応しているか⇒私に知識がないのでなんともなのですが、対応していただくようにお願いしたので大丈夫だと思います。

[madoka9393]

＞API側は公開されている一般的なサービスでしょうか？⇒自作…ではありませんが、一般的なものではなく独自のものになります。

Answer 1

上の質問に対する私のコメントで、

JSONP を利用しているようですが、それで要求をかける先は JSONP に対応している（JSON 文字列をコールバックの引数として返してくれる）ということは間違いないのですか？

と聞きましたが、多分そうなってなくて、JSON 文字列がそのまま返ってきているのではないかと思います。つまり、以下の記事の「NGケース」で説明されているようになっているのではないかということです。

Ajax通信(jsonp)でエラー「was not called」が出た時の対処方法
http://javatechnology.net/ajax/jsonp-was-not-called/

質問の「使用したコード(jQuery)」では jsonpCallback: 'hoge' と hoge をコールバックの名前として指定しているので、質問の「json の中身」のコードに書いてあったように以下の応答を期待しているのだと思います。

hoge( {"item":"hogehoge"}, … )

しかしながら、要求をかける先は JSONP に対応してなくて、JSON 文字列 {"item":"hogehoge"}, … しか返さないので、「hoge was not called」というエラーになったのだと思われます。

Fiddler などのキャプチャツールを使って、応答を調べてみてください。

【追伸】

以下の記事も読んでもらえると嬉しいです。ASP.NET MVC アプリですが、サーバー側でどういう対応が必要かが書いてあります。呼び出す側の注意点も書いたつもりです。

jQuery.ajax で JSONP
http://surferonwww.info/BlogEngine/post/2017/05/03/jsonp-by-using-jquery-ajax.aspx

Comments

[madoka9393]

ありがとうございます。
リンク先内容参照の上、もう少し確認してみます。

[madoka9393]

解決しました。
ご指摘の通り、要求先の対応が不十分であることが原因でした。
要求先のjsonを修正していただき、期待通りの値が取得できることが確認できました。

[退会済みユーザー]

まず一番最初にやるべきことは、上にも書きましたが、Fiddler などのキャプチャツールを使って応答を調べることだと思います。

上の質問者さんのコメントで「対応していただくようにお願いしたので大丈夫だと思います。」とのことですが、それでホントに大丈夫かどうかわかるはずです。

Answer 2

クライアント側にhogeという名前の関数を定義していないからじゃないでしょうか？

function hoge(json) {
  console.log(json);
}

Answer 3

まず、 Ajax（XMLHttpRequest）の仕様として、同一ドメインでないサーバーとの通信はセキュリティエラーとするため基本的に通信できないということを知っておきましょう。

【参考】クロスドメインとは

といっても、別サーバーからデータを取得したい場合もあるためこれを実現するための方法があります。
ひとつはJSONPによる通信です。
gihyo.jp - JSONP入門

もうひとつはサーバー側で別ドメインのクライアントに対して通信を許可してもらうCORSを対応してもらうことです。

どちらにしても、セキュリティ問題に対応するための制約なのでサーバー側で対応する必要があります。

Comments

[otn]

タイトルだけでなく、質問本文も読みましょう。

[euledge]

すみません、早とちりでした。