【JavaScript】JQueryによる非同期処理(ajax)【Java版】

Pocket

こやま

JavaScript で非同期処理の使い方を紹介します！

コンボボックスの内容を連動させたり、入力値の関連情報を DB から取得する際に非同期処理(ajax)を使用します。

同期処理でも実装できますが、ページの全情報をリクエストしなくても良い場合は、非同期処理の方が効率が良いです。

非同期処理のメリット

①処理中もユーザーが画面操作できる

　ユーザーは応答を待っている間、他の処理を行うことができます。

②通信量を減らすことができる

　同期処理は画面の全情報をサーバーに送信しますが、非同期処理は一部の情報のみ送信することができます。

非同期処理のデメリット

①処理が複雑になる

　同期処理の場合は、処理が一本道（直列処理）なので、処理順が分かりやすいです。

　非同期処理の場合は、並列処理となるため、動作が分かりにくくなります。
　また、考慮することも多くなるため、不具合が混入しやすくなります。

非同期処理のメリット・デメリットを理解したところで、サンプルプログラムを紹介します！

JavaScript

function getEmpInfo(empCode) {

    // 社員コードが未入力の場合、クリアする
       if (empCode == "") {
           $("#empName").val();
           $("#empSex").val();
           $("#empDept").val();
           return;
       }

    // サーバー処理のメソッド名、パラメータを設定
    var param = {
        method  : 'getEmpInfo',
        empCode : empCode
    };

    // 非同期処理
    $.ajax({
        url : "xxxS01Action.do", type:'GET', cache:false, async:false, data:params, dataType:'json',
        success : funtion(result) {
        
            // 社員コードに該当する社員情報が見つからない場合
            if (result.jsonList1.length == 0) {
                return;
            }

            // 社員コードに該当する社員情報が見つかった
            var empInfo = result.jsonList1[0];

            // 画面表示
            // 氏名
            $("#empName").val(empInfo.empName);
            // 性別
            $("#empSex").val(empInfo.empSex);
            // 部署
            $("#empDept").val(empInfo.empDept);
        }
    });
}

function getEmpInfo(empCode) {

// 社員コードが未入力の場合、クリアする

if (empCode == "") {

$("#empName").val();

$("#empSex").val();

$("#empDept").val();

return;

}

// サーバー処理のメソッド名、パラメータを設定

var param = {

method : 'getEmpInfo',

empCode : empCode

};

// 非同期処理

$.ajax({

url : "xxxS01Action.do", type:'GET', cache:false, async:false, data:params, dataType:'json',

success : funtion(result) {

// 社員コードに該当する社員情報が見つからない場合

if (result.jsonList1.length == 0) {

return;

}

// 社員コードに該当する社員情報が見つかった

var empInfo = result.jsonList1[0];

// 画面表示

// 氏名

$("#empName").val(empInfo.empName);

// 性別

$("#empSex").val(empInfo.empSex);

// 部署

$("#empDept").val(empInfo.empDept);

}

});

}

画面に入力された内容で、サーバー処理（社員コードで社員情報を DB から検索）を呼び出すサンプルです。

13行目でサーバー処理のメソッド名、19行目で呼び出す Java ファイルを指定しています。

28行目～は取得した社員情報を画面表示しています。

JSP(HTML)

<html>
<head></head>
<body>
<table id="listTable" cellspacing="0" cellpadding="0">
    <thead>
        <tr>
            <th>社員コード</th>
            <th>氏名</th>
            <th>性別</th>
            <th>部署</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!-- 非同期処理の呼び出し -->
                <input type="text" id="empCode" onchange="getEmpInfo(this.value);" />
            </td>
            <td width="100px" nowrap>
                <label id="empName" />
            </td>
            <td width="100px" nowrap>
                <label id="empSex" />
            </td>
            <td width="100px" nowrap>
                <label id="empDept" />
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>

<html>

<body>

<thead>

<tr>

<th>社員コード</th>

</tr>

</thead>

<tbody>

<tr>

<td>

</td>

</td>

</td>

</td>

</tr>

</tbody>

</table>

</body>

</html>

Java

package th.co.senori.web;

import java.util.List;
import java.util.Locale;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.log4j.Logger;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import org.springframework.beans.factory.annotation.Autowired;

/**
 * XXX-S01 のアクションクラス
 * 
 */
public class XXXS01Action {

	/** SQL */<br />	@Autowired<br />	private SqlSessionTemplate sqlSessionTemplate;

	/**
	 * 「社員コード」入力 : 社員情報の取得
	 * 
	 * @param amapping アクションマッピング情報
	 * @param aform    アクションフォーム情報
	 * @param request  リクエスト情報
	 * @param response レスポンス情報
	 * @return フォワード情報
	 */
	public ActionForward doGetModelList(ActionMapping amapping,
										ActionForm aform,
										HttpServletRequest request,
										HttpServletResponse response) {
		
		
		// 画面フォーム情報を取得
		XXXS01Form form = (XXXS01Form) aform;
		
		// 社員コードを取得<br />		String inputEmpCode = form.getTxbInputEmpCode();

		// 社員情報を取得
		List<EmpInfo> results = (List<EmpInfo>)sqlSessionTemplate.selectList("XXXS01.getEmpInfo", inputEmpCode);
	
		// JSON リターン<br />		PrintWriter out = response.getWriter();<br />		response.setContentType("application/json");<br />		response.setCharacterEncoding("UTF-8");<br />		<br />		JSONSerializer serializer = new JSONSerializer();<br />		String strResult = serializer.serialize(results);<br />		out.print(strResult);<br />		out.flush();
		
		return null;
	}
}

package th.co.senori.web;

import java.util.List;

import java.util.Locale;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.apache.log4j.Logger;

import org.apache.struts.action.ActionForm;

import org.apache.struts.action.ActionForward;

import org.apache.struts.action.ActionMapping;

import org.springframework.beans.factory.annotation.Autowired;

/**

* XXX-S01 のアクションクラス

public class XXXS01Action {

/** SQL */<br /> @Autowired<br /> private SqlSessionTemplate sqlSessionTemplate;

/**

* 「社員コード」入力 : 社員情報の取得

* @param amapping アクションマッピング情報

* @param aform アクションフォーム情報

* @param request リクエスト情報

* @param response レスポンス情報

* @return フォワード情報

public ActionForward doGetModelList(ActionMapping amapping,

ActionForm aform,

HttpServletRequest request,

HttpServletResponse response) {

// 画面フォーム情報を取得

XXXS01Form form = (XXXS01Form) aform;

// 社員コードを取得
String inputEmpCode = form.getTxbInputEmpCode();

// 社員情報を取得

List<EmpInfo> results = (List<EmpInfo>)sqlSessionTemplate.selectList("XXXS01.getEmpInfo", inputEmpCode);

// JSON リターン
PrintWriter out = response.getWriter();
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");

JSONSerializer serializer = new JSONSerializer();
String strResult = serializer.serialize(results);
out.print(strResult);
out.flush();

return null;

}