Ajax通信(jsonp)でエラー「was not called」が出た時の対処方法

ajax

Ajaxを使って、外部APIにアクセスする時で、「jQuery1900668XXXXXXXXXX_136XXXXXXXX was not called」のようなエラーが出たことはないでしょうか。

なんだか数字の羅列がすごくて、何が原因なのか一見するとよく分からないエラーです。
このエラーに遭遇した方は、ほとんどの場合、サーバサイド側(API)を自分で作成した場合ではないでしょうか。
原因は、サーバサイド側(API)にあります。
今回は、このエラーが発生する原因と解決方法を紹介します。

[スポンサーリンク]

Ajaxのエラーの取得方法は、過去に記事を書きました。こちらを参考にして下さい。
Ajaxの通信エラー情報を表示する方法

この章でやること

「... was not called」の原因と対処方法を紹介します。

「was not called」が発生する原因

「was not called」が発生する原因は、サーバ側(API)からクライアント側(Ajax)へレスポンスが正常に返却出来ていないことにあります。
Ajax通信する場合、クライアント側(Ajax)は以下のようなレスポンスを期待しています。


jQuery1900668XXXXXXXXXX_136XXXXXXXX ({ "message" : "success" })

NGケース

感の良い人はお気付きかもしれませんが、JSONの先頭に「jQuery19・・・」が無いと、「... was not called」が発生します。
これではダメです。


{ "message" : "success" }

()が無い場合もダメです。


jQuery1900668XXXXXXXXXX_136XXXXXXXX { "message" : "success" }

OKケース

「jQuery19・・・」を先頭に入れて、json部分は()で囲いましょう。


jQuery1900668XXXXXXXXXX_136XXXXXXXX ({ "message" : "success" })

サーバサイド側(API)で、どうやって「jQuery....」を設定するの?

以前callbackについての記事を書きました、こちら見てもらうと、「jQuery....」パラメータをサーバサイド側(API)で取得・設定する方法がわかると思います。
Ajaxのjsonp・callbackの仕組みについて解説します。

java(springフレームワーク)限定の話ですが、「jQuery....」パラメータの設定方法で、サーバサイド側(API)のプログラム実装方法について詳しく書いています。
JSONICを使ってRESTFullなAPIを作ろう

さいごに

Ajax通信(jsonp)の「was not called」エラーは、原因は単純なバグなことが多いです。
サーバサイド側(API)の開発時には気付かず、APIとAjax(jQuery)を結合した時によく発覚します。
実装する時に気を付けましょう!
それでは!