カテゴリ : Ajax

Ajaxのjsonp・callbackの仕組みについて解説します。

ajax

こんにちわ!Ajaxを始めて最初にぶつかる壁は、jsonとjsonpの理解ではないでしょうか?

Ajaxで外部APIを実行したい場合は、とりあえずjsonpを使えば動きます。しかし何故動くのかについては、jsonpのcallbackについて正しい理解が無いと、AjaxとAPIの連携の仕組みまでは分かりません。
今回はjsonpcallbackについて紹介します。
続きを読む

Ajaxで値を複数送信する方法

ajax

AjaxでAPI(サーバサイド)へ複数個の値を送信する方法を紹介します。
AjaxでAPI(サーバサイド)へ値を渡す方法は、以前「AjaxでAPIにJSON形式の値を送信する方法」「Ajaxで文字列配列を送信する方法」を紹介しました。
今回は、複数個の値をAPI(サーバサイド)へ渡す方法を紹介します。
実際の開発では、1つの値を渡す場面よりも複数個の値を渡す場面の方が多いと思います。
続きを読む

Ajaxで文字列配列を送信する方法

ajax

AjaxでAPIにJSON形式の値を送信する方法を紹介しました。
今回は文字列配列をAPI(サーバサイド側)に渡す方法を紹介します。
チェックボックスの値等は、文字列ではなく、配列でAPI(サーバサイド側)に渡すことがほとんどです。
本格的なAPIをつくるうえで、パラメータの受け渡しは重要です。本ブログを参考して頂けると幸いです。
続きを読む

Ajax通信時にログを画面表示するデバッグ方法を紹介します

ajax

1つの画面で複数のAPIへ通信していると、どんな操作でAPIが呼ばれるのかがわかりにくくなってきます。
特に開発途中であれば、Ajaxのリクエストとレスポンスは常に表示しておいた方がバグの早期発見につながります。
alertをいれてデバッグする手法も多いと思いますが、alertをいれるとボタンクリックなど余計な動作が入ったり、alertウィンドウを閉じると出力している内容が消えたりと不便です。
今回は、画面上にAjaxのリクエストとレスポンスを表示する方法を紹介します。
続きを読む

AjaxでAPIにJSON形式の値を送信する方法

ajax

Ajaxで引数をAPI側(サーバサイド側)に渡す場面も多いと思います。
渡すパラメータが単純な「key=value」形式であれば、URLの後ろに「key&value」とURLパラメータ形式でつけておけば問題ありません。
特にJSON等の複雑な形式であれば、単純なURLパラメータではなく、ajaxのdataを使うことによって、どんなパラメータを送信しているのかが一目でわかり、ソースの可読性があがります。
続きを読む

Ajaxの通信エラー情報を表示する方法

ajax

HTTP通信でエラーになったのか、サーバサイドでエラーになったのか、原因を切り分けをしていくには、エラー情報をきちんと取ることからはじまると思います。
Ajaxを使い始めたころは、HTTP通信のエラー情報の取得がうまくいかなくて試行錯誤していました。
今回は非同期通信中にエラーが発生した時のエラー情報参照方法について解説します。
続きを読む

Ajaxで通信中にローディング画像を表示する方法

ajax

Ajaxで非同期通信中に、クルクル回る画像が表示されているのを見かけたことのある人も多いのではないでしょうか。
あのクルクル回る画像はローディング画像ともいいます。今回は、ローディング画像の表示方法を解説します。
もちろんAjax通信中だけローディング画像を表示させておいて、Ajax通信終了時には消すような実装とします。
続きを読む

Ajaxで外部APIへ通信する方法

ajax

コチラではローカルファイル(json)を読み込み、jsonをパースするAjaxを紹介しました。

今回は、クロスドメインの外部のAPIへアクセスする方法を紹介していきます。
jQueryのバージョンによってAjaxの構文が少し変わります。このあたりも各バージョン毎の構文を紹介していきます。
続きを読む

Ajaxをネスト(入れ子)にしてJSONを読み込む方法

ajax

前回はローカルファイル(json)を読み込み、jsonをパースするAjaxを紹介しました。
今回は前回と同じようにJSON形式のファイルを読み込み、パースします。前回との違いは、Ajaxをネスト(入れ子)にしてローカルファイルを2回読み込んでいます。
ajaxの入れ子は簡単ですがソースが読みにくくなります。今回紹介するソースをひな型として使って頂ければ幸いです。
続きを読む