【ajax:第一回】ajaxの概要と使い方

はじめに
ajaxとは
1. 非同期処理とは
2. 代表例
ajaxを使うための環境構築
ajaxの記述方法
最後に

はじめに

DreamHanksの松下です。

今回からajaxについての解説を３回に分けて行いたいと思います。
第一回目はajaxの概要と簡単な使い方
第二回目はajaxを使ってサーバーにリクエストを投げて、サーバーからレスポンスを返す方法
第三回目は非同期処理を使って、動的にhtmlタグを生成する方法について解説します。

連載記事まとめ

ajaxとは

JavaScriptとXMLを使って非同期にサーバとの間の通信を行うことです。

非同期処理とは

同期処理とは画面遷移をした際や、リロードをしたときに初めて画面描画がされます。
要するに画面全体をローディングしないと新たに画面描画ができないということです。

非同期処理とは画面を部分的に同期するということです。

同期処理はリクエストを投げて、レスポンスが返ってこないと作業ができない。
非同期処理はリクエストを投げて、レスポンスが返ってこなくても作業ができる。

代表例

・グーグルマップ
・ツイッターの無限スクロール機能
・yahooホームページの下記の画像の赤枠部分

グーグルマップは、縮尺を拡大・縮小しても画面全体をローディングして描画していません。
拡大した分だけ非同期に画面描画されます。

ツイッターなどの無限スクロールも同じく画面全体をローディングしているのではなく
スクロールバーが一番下まで下がったときに、非同期で新たに画面描画されます。

yahooの赤枠はニュースタブから経済タブを押下したときに
画面全体をローディングしているのではなく、赤枠内だけを非同期で再描画します。

ajaxを使うための環境構築

今回はSpringのMVCモデル、ビルドツールはMavenなのでPom.xmlの設定方法を解説します。

一般的にajaxはリクエストをサーバーに送るときにjson形式でリクエストパラメータを送ります。
よって下記のdependencyをpomに記述します。

<!-- jsonの値をjavaソースでオブジェクトとして扱うため(リクエストをpathingしてくれる） -->
<dependency>
	<groupId>org.codehaus.jackson</groupId>
	<artifactId>jackson-mapper-asl</artifactId>
	<version>1.9.13</version>
</dependency>
<dependency>
	<groupId>com.fasterxml.jackson.core</groupId>
	<artifactId>jackson-databind</artifactId>
	<version>2.5.3</version>
</dependency>

<groupId>org.codehaus.jackson</groupId>

<artifactId>jackson-mapper-asl</artifactId>

</dependency>

<groupId>com.fasterxml.jackson.core</groupId>

<artifactId>jackson-databind</artifactId>

</dependency>

ajaxはjavascriptの基本的なライブラリなので、このほかに必要になってくるものは基本的にありません。

jsonとは

JavaScript Object Notationの略で、XMLなどと同様のテキストベースのデータフォーマット
であり、JavaScriptのオブジェクトの書き方を元にしたデータ定義方法です。

JavaScriptでオブジェクトを作成する際は {} や [] などの括弧を使って記述します。
そして、JSONはその記法を元にしています。
元々はJavaScriptで使われる想定で作成されたデータ構造なので、JavaScriptと非常に相性が良いです。
現在はJavaScript以外にもPythonやJava、PHPなどの幅広い言語で使われていて、
JavaScriptなどのクライアント言語とPythonなどのサーバサイド言語間のデータのやり取りで使われることが多いです。

具体例
このように｛｝内に「”key” : value, “key” : value」と記述されていたら、それはjsonです。

{ "idArray" : idArray, "checkFlgArray" : checkFlgArray }

1	{ "idArray" : idArray, "checkFlgArray" : checkFlgArray }

javaで言うmapAPIの概念とよく似ています。

ajaxの記述方法

var reqParam = {
		"idArray" : idArray,
		"checkFlgArray" : checkFlgArray
}

$.ajax({
	// http通信方式をpostに設定
	type : "POST",
	// コンテキストタイプをjsonに設定
	contentType : "application/json",
	// submitしたときの移動するメソッドのURLを設定
	url : "${pageContext.request.contextPath }/searchborad/update_result",
	// 上記で作ったreqParamを、jsonの文字列の形式にpathingする
	data : JSON.stringify(reqParam),
	// データの形式をjsonに設定
	dataType: "json"
}).then(function(resultBoradList){
　　　　　// 画面描画処理
});

var reqParam = {

"idArray" : idArray,

"checkFlgArray" : checkFlgArray

}

$.ajax({

// http通信方式をpostに設定

type : "POST",

// コンテキストタイプをjsonに設定

contentType : "application/json",

// submitしたときの移動するメソッドのURLを設定

url : "${pageContext.request.contextPath }/searchborad/update_result",

// 上記で作ったreqParamを、jsonの文字列の形式にpathingする

data : JSON.stringify(reqParam),

// データの形式をjsonに設定

dataType: "json"

}).then(function(resultBoradList){

　　　　　// 画面描画処理

});

ajaxの仕組み

$.ajax({
	// この中でhttp通信を行います
	// $.ajax({})内でサーバーにリクエストをして
　　　　// 返却されたレスポンスがresultBoradListという変数に渡されます。
}).then(function(resultBoradList){
	// そのレスポンスオブジェクトを使って
　　　　// この中で、動的に画面描画を行います。
});

$.ajax({

// この中でhttp通信を行います

// $.ajax({})内でサーバーにリクエストをして

　　　　// 返却されたレスポンスがresultBoradListという変数に渡されます。

}).then(function(resultBoradList){

// そのレスポンスオブジェクトを使って

　　　　// この中で、動的に画面描画を行います。

});

リクエストパラメータの設定方法

var reqParam = { "idArray" : idArray, "checkFlgArray" : checkFlgArray }

1	var reqParam = { "idArray" : idArray, "checkFlgArray" : checkFlgArray }

reqParamという変数に{ “idArray” : idArray, “checkFlgArray” : checkFlgArray }という文字列を代入します。

その後JSON.stringify()というメソッドを使い、reqParamをjsonの文字列の形式にpathingします。

ajaxの設定について

$.ajax({})内にajaxを使用する際の設定をjson方式で行います。

設定する項目は順番に下記のものとなります。
・httpの方式
⇒postやgetなどのhttp通信方式を設定します。

・コンテキストタイプの設定
⇒application/jsonを設定します。
このコンテキスト（データ）はapplication（バイナリデータ）のjson方式だよ。
とサーバーに教えます。

・urlの設定
⇒URLを使いサーバー内のサーブレットメソッドにリクエストを送ります。

・dataの設定
⇒リクエストパラメータを設定します。

・dataTypeの設定
⇒リクエストパラメータのデータの形式をjsonで送ると設定する。

コンテキストタイプでjsonを設定しているのに、またdataTypeをjsonに設定するの？
片方記述しておけばいいのでは？コンテキストタイプこの$.ajax内の設定項目もjsonであり、それをapplication/jsonだとサーバー側に教えるdataType
こちらは先ほど作ったリクエストパラメータであるreqParamがjsonだということをサーバーに教える。両方ともjsonでサーバーに送るので、ややこしいですが
それぞれ設定している項目の違いがあります。

後続関数について

非同期の状態遷移には以下のパターンがあります。

unresolved -> 初期状態。後続の処理は実行されない。
resolved　-> 通信が成功した状態
rejected -> 通信が失敗した状態

この非同期処理の状態が変化したときに関数を実行するためのメソッド。
これを後続関数といいます。

then() -> 引数を２つもち、resolvedになったときと、rejectedになったとき2つの処理を実行する。
done() -> 状態がresolvedになったときの処理を実行する。
fail() -> 状態がrejectedになったときの処理を実行する。
always() -> 状態がresolvedになったときと、rejectedになったとき両方で実行する。

今回使いどころについては省略いたしますが、それぞれの用途に合わせて
then/done/fail/alwaysを使います。

.then(function(resultBoradList){}

).then(function(resultBoradList){
    // 動的にhtmlタグを生成する
});

).then(function(resultBoradList){

// 動的にhtmlタグを生成する

});

この.then()という後続関数にfunctionを定義して、画面描画処理を記述します。
サーバーから返却されたレスポンスオブジェクトの変数名resultBoradListを使って
動的にhtmlタグを生成していきます。

最後に

今回はajaxの概要と使い方について解説を行いました。

次回はajaxを使ったHTTP通信方法。
ajaxを使ってサーバーにどのようにリクエストが送られるのか？
サーバーからどのようにレスポンスが返されるのかを解説いたします。

お読みいただきありがとうございました。