Ajaxとは？jQueryで非同期通信を行う方法

Ajaxとは非同期通信を行う仕組みのことです。

Asynchronous JavaScript + XML の略だそうです。

Asynchronous は非同期という意味なので、JavaScript を使って非同期通信を行うということです。XMLは分かりません(笑)

非同期通信というのは、WEBページをリロードせずにHTTP通信を行うということです。

通常のHTTP通信は、リンクなどで画面遷移を行うときですが、このとき一度画面が一瞬消えて次の画面のHTMLをロードしページが開きます。

このときchromeだったら更新ボタンが×になったりタブのファビコンの部分がくるくる回っていたりします。

これをせずにHTTP通信を行い結果を得るということです。

jQueryでAjaxを使う場合の基本

jQueryでAjaxを使う場合、用途ごとにいくつかメソッドが用意されています。

例えばGETリクエストによってAjax送信する場合は $.get(); を使い、外部のHTMLを読み込む場合は $.load(); などがあります。

しかし、汎用的に全てのことに対応する $.ajax(); というのがあるのでこれだけ知っていれば僕は充分だと思います。

オプション部分も入れたサンプルは次に説明します。

Ajaxのサンプルコード

解説は次に。

サンプルコードの解説

type

typeはHTTP通信の種類を指定します。

FormをAjaxで送信する場合はPOSTを指定します。

何も指定しないと “GET” になります。

url

送信先のURLです。

data

urlで指定した送信先へ送るデータです。

このように{}で囲みカンマ区切りでデータを指定して送ります。

formの入力データをそのままセットする場合には、$(“form”).serialize() のように書けば通常のPOST送信のように遅れます。

dataType

Ajaxを実行後に受け取るデータのタイプを指定します。

データのタイプには上記のようなものがあります。

何も指定しなければAjaxが自動的に判断します。

何も受け取らない場合には false を指定します。

async

非同期通信をするかどうかの指定が出来ます。

何も指定しないと true (非同期通信) になります。

Ajaxを利用する場合は通常非同期通信だと思いますし、僕はこの行すらいつも省略しています。

beforeSend

Ajax送信を開始する前に行う処理を記載します。

例えばボタンの二重押下防止に、ボタンをロックしたりします。

complete

応答結果が正常・エラーに関係なく実行されます。

例えばロックしたボタンを元に戻す処理などを行います。

success

正常にAjax通信が行われた場合の処理です。

何かしらAjax処理後のデータを受け取った場合はここで処理します。

error

Ajax通信が異常終了した場合の処理です。

この場合のエラーは入力チェックなどのシステム仕様的なエラーでは無く、システムの不具合により正常に処理が終了できなかった場合のエラーのことです。

システム管理者にエラーログをメール送信したりします。

外部HTMLを読み込みページに埋め込むサンプル

別のHTMLファイルに定義したHTMLを読み込み、読み込み元ページに埋め込むサンプルを作成しました。

HTML

JS

sample020sub.html

#btna のボタンを押すと sample020sub.html を読み込み、#idname の中に埋め込みます。

このとき、#inner は消えてなくなります。

まとめ

AjaxとはJavaScriptを使い非同期で通信する仕組みのことです。

Ajaxの実行には以下の ajax() を利用します。