jsonpとjsonを扱う時のエラー確認
jsonpとjsonでやる非同期通信
GoogleMAPとかでも使用されている技術で、ようは自動的にデータをよみだしてわざわざページの移動を挟まなくても良いようにする技術。 これが非常に今のフロントサイドで良く使われていると思う(偏見です)。 かくいう私も使う事になったので今回はつまづいたところを。
非同期通信について
ブラウザ上に動きを見せる事なく、こっそりと通信をおこなう技術の事。 例えば天下のGoogleMAPで使用されており、マップをスクロールやズームで動かすとページを移動とかせずにヌルヌルと動かしていると思うがまさにそれこそが非同期通信である。 特定の位置までくるとか、時間経過とかイベントを設定して非同期通信で必要なデータを取得しておく事でまるでロードの時間を感じさせないようにするのが主な使用法だと思う。
json と jsonp
この二つの違いは文字が一文字違うとかでは無くて別物です。 jsonは同じドメイン内でのデータのやり取りに使用するデータの形式？で jsonpは違うドメイン同士でのデータのやり取りに使用するデータの形式？ というのが今のところの私の解釈。 イメージしづらいと思うので例を出すと、 この私のサイトであるhttp://39mamon.comのドメインの中にあるAPIと同じドメインの中にあるフィアルでやり取りする場合はjsonで http://39mamon.comのドメインの中にあるファイルとTwitterAPIとやり取りする場合はjsonpになる。
すこし簡単に説明するなら 同じサーバー内でおこなわれるやり取りならjsonで、 違うサーバー同士でおこなわれるやり取りならjsonpになる。
APIとは
色々定義があるので私の現在の解釈的には そのurl(API)にアクセスする事で、何らかの処理をしたりして何かのデータのみを返り値として渡してくるプログラムの事だと思ってる。 代表例というか、twitterAPIとか。
Ajaxとは
JQueryのライブラリにある非同期通信用の関数群？の事。 jsonを扱う時には必ずお世話になるし、とても便利で分かりやすい。 Ajaxを使う事で、apiのurlと数カ所設定するだけでデータをとって来れる優れもの。
使い方
ここで紹介するもの以外にも指定できる要素はあるので、それについては追々。とりあえず公式の日本語訳リファレンスを置いておく。 http://semooh.jp/jquery/api/ajax/jQuery.ajax/options/
呼び出したいAPIやjsonなのかjsonpなのかによってurlや所々変化するのでそこは適宜変更する事。
[javascript] var json_data = {}; //APIに送りたいデータ。連想配列で作って、json形式に変換してから渡そう $.ajax({ type : 'get', //getかpostで送信出来る url : url, //対象APIのurlやパス。パスなら相対でも絶対でも可能。urlでならurlパラメータを付けてやる事も出来る data : JSON.stringify(jsondata), //先頭らへんで作った、送信したいデータが連想配列なのでjson形式に変換してやる contentType: 'application/json', //APIがjsonなのかjsonpのどちらかを指定する dataType : 'json', //APIがjsonなのかjsonpのどちらかを指定する //jsonpCallback: '', //jsonpの時のみ指定する。だが不要な場合もある。必要な場合はAPI側で指定されているコールバック関数名を記述する scriptCharset: 'utf-8', //文字コードの指定。大抵utf-8で安定 success : function(data) { //APIとの通信に成功してデーターが取得できた場合に実行される return; }, error : function(XMLHttpRequest, textStatus, errorThrown) { //APIとの通信に失敗した時に実行される。 alert("XMLHttpRequest : " + XMLHttpRequest.status + "\n" + "textStatus : " + textStatus + "\n" + "errorThrown : " + errorThrown.message); //この様な記述をする事で、APIとの通信に失敗した時にエラーレポートを表示してくれる。 } }); [/javascript]
type
単純にgetかpostかを指定する。 送信するパラメータが見られたく無いときはpostを指定しよう。 またgetの場合は url に直接urlパラメータを記述して、後述の data の指定を省略する事も出来る。
url
こちらも単純にAPIや非同期通信をおこないたいurlを指定する。 また、urlパラメータを指定できそちらで引数を渡すことも可能。
data
APIに引数として渡したいデータを指定する。 注意点として、json形式のデータではないと動作しないのでjavascript内でデータを生成した場合には必ずjsonに変換する処理を挟んで渡す事。
contentType
APIのtypeがjsonなのかjsonpのどちらなのか指定する。 ココも正しく登録しないと動作しないので注意する事。
dataType
APIから帰ってくるデータ達がどちらの形式なのか指定する。 jsonならjsonだし、jsonpならjsonpなのでキチンと指定する事。さもないと正常に動作しない。
jsonpCallback
jsonpのみ出来る。 jsonpでは通常コールバック関数を利用して結果をクライアント(実行したファイル)に値を返してくるので、通常のjsonで不要。 また、jsonpでコールバック関数を指定しなくても良い物もあるので、使用するapiからコールバック関数名を調べて記述する。
scriptCharset
success
APIとの通信に成功した時に実行される処理達。 ここは無名関数なので注意。さらに、引数でdataを指定してるけど、これは取得してきたデータの事を指しているのでこの関数内で利用して目的の処理を記述する。 また、このdataはjsonのオブジェクトになっているので形式をjavascript基準の配列に直して操作する方が良いと思う。
error
APIとの通信に失敗した時に実行される処理達。 ここも success と同じく無名関数。さらに引数に様々な値を渡す事でエラーの原因を調査したりなんて事も出来る。
エラーの原因を調べる
errorの中で特定の引数を使う事で、エラーの原因を調べる事が出来る。 というか、この記事でこれが書きたかった。
[javascript] function(XMLHttpRequest, textStatus, errorThrown) { alert("XMLHttpRequest : " + XMLHttpRequest.status + "\n" + "textStatus : " + textStatus + "\n" + "errorThrown : " + errorThrown.message); } [/javascript]
さっきの例文のerror部分を切り抜いただけだが、この関数をerror時に実行すると、 httpのステータス、エラーの説明が取得できる。 Ajaxはそのまま使った場合非同期通信をおこなうので通常エラーが発生して通信に失敗しても何も言わないし見えないので、調べるにはこのように自分でキチンと処理を記述する必要がある。
