タグ : Ajax

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を紹介しました。
Ajaxの一般的な使い方としては、ローカルファイルへのアクセスではなく、外部サイトへアクセスするためにAjaxを利用します。今回は外部APIへアクセスするために必要最低限となる、簡単なコードを紹介します。今後Ajaxを実装する際に参考にして頂ければ幸いです。
続きを読む

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

ajax

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

Ajaxを使って非同期通信する。(ローカルファイルの読み込み)

ajax

ajaxはサーバ間通信を非同期で通信するためによく使われているイメージがあります。ローカルファイルをわざわざ非同期で読み込む必要は現実的にはあまりないと思います。(ファイルサイズが大きければ別ですが)
ただし通信先をローカルファイルにすることで複雑になりがつなajaxのロジックがより理解しやすくなると思います。
続きを読む

JSONICを使ってRESTFullなAPIを作ろう

spring

JSONを返却するAPIですが、最近ではすっかりメジャーになった印象を持ちます。

JSONICを使うことで、オブジェクトをJson化することが非常に楽になります。
今回は、JSONICを使って、JSONを返却するAPIを作成する手順を紹介します。
続きを読む