🔄 Vol.11.18 非同期通信（AJAX）とStruts2の連携方法【フロント連携編】

> フロントエンドとバックエンドの非同期通信（AJAX）をStruts2でどう実装するか？  
> jQueryを使った実用的な例をベースに、JSONとのやり取りまでカバーします。

---

## ✅ 1. AJAXとは？

**AJAX（Asynchronous JavaScript + XML）** とは、ページをリロードせずにサーバと通信する仕組みです。

- ページの一部だけを更新したいときに便利！
- JSONやXML形式でデータのやり取りが可能

---

## ✅ 2. Struts2でAJAXを扱う方法とは？

Struts2では、以下のような構成でAJAX通信を受け取ることができます：

- フロント：JavaScript（jQueryなど）でリクエスト送信
- バック：Struts2アクションがJSONレスポンスを返す
- `struts2-json-plugin` を使用してJSONに対応

---

## ✅ 3. 必要なライブラリ（Mavenの場合）

```xml
<dependency>
  <groupId>org.apache.struts</groupId>
  <artifactId>struts2-json-plugin</artifactId>
  <version>2.5.31</version>
</dependency>
✅
```

---

### ✅ 4. struts.xml の設定（JSONを返すAction）
```jsp
<action name="checkUser" class="com.example.CheckUserAction">
  <result name="success" type="json"/>
</action>
```

---

### ✅ 5. アクション側の実装例（CheckUserAction.java）

```java
public class CheckUserAction extends ActionSupport {

    private String username;
    private boolean available;

    public String execute() {
        // デモ："admin" は使用中、それ以外は使用可能
        available = !"admin".equalsIgnoreCase(username);
        return SUCCESS;
    }

    // 出力用（JSONに含めたい値はすべてgetterが必要）
    public boolean isAvailable() {
        return available;
    }

    // 入力用
    public void setUsername(String username) {
        this.username = username;
    }
}

```

---

### ✅ 6. フロント側（JSP）の jQuery 実装例

```html
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

ユーザー名: <input type="text" id="username">
<span id="result"></span>

<script>
  $('#username').on('blur', function() {
    const name = $(this).val();

    $.ajax({
      url: 'checkUser',
      type: 'POST',
      data: { username: name },
      dataType: 'json',
      success: function(response) {
        if (response.available) {
          $('#result').text('このユーザー名は利用可能です').css('color', 'green');
        } else {
          $('#result').text('このユーザー名は既に使われています').css('color', 'red');
        }
      }
    });
  });
</script>

```


---

### ✅ 7. ポイント：JSONとして返す条件
- `struts2-json-plugin` を使うと `type="json"` が使える

- 出力するデータには **getter** が必要

- JSONのキー名はJavaのプロパティ名に対応

---

### ✅ 8. 実務でのユースケース例

| ユースケース          | 内容                 |
| --------------- | ------------------ |
| ✅ 入力補完          | 商品名、ユーザー名などのサジェスト  |
| ✅ フォーム入力チェック    | メールアドレスの重複確認など     |
| ✅ リアルタイムバリデーション | 入力内容に応じてエラーメッセージ表示 |
| ✅ 一部だけのUI更新     | コメントや通知の更新など       |


---

### ✅ 9. セキュリティ・注意点

| 対策項目      | 内容                                   |
| --------- | ------------------------------------ |
| CSRF対策    | トークンをリクエストに含める（Struts2トークンインターセプター等） |
| 入力バリデーション | サーバ側でも入力チェックを必ず実装すること                |
| レスポンス制限   | JSONに含めるデータは最小限に。重要情報は返さない           |


---

### ✅ 10. まとめ

| 要点                                           | 内容 |
| -------------------------------------------- | -- |
| Struts2では `struts2-json-plugin` を使ってJSONを返せる |    |
| `type="json"` を指定して非同期用アクションを作成              |    |
| jQueryやFetch APIと連携して、非同期にUIを更新可能            |    |
| 実務ではバリデーションや補完に非常に有効な手法                      |    |


---

### ▶️ 次回予告：Vol.11.19 セキュリティ対策（CSRF, XSS, パラメータ偽装）を徹底理解！
Struts2での安全なWebアプリケーション開発のために、絶対に押さえておきたいセキュリティ対策を解説します。

---

### 🧭 関連記事（Vol.11.xxxシリーズ）
| 連番           | タイトル                                                  | 内容分類              |
| ------------ | ----------------------------------------------------- | ----------------- |
| [Vol.11.0](https://qiita.com/juehara-crypto/items/a0cc66893cb499a6e23a)     | Struts2が提供してくれる便利機能まとめ9選                              | 導入＆概要             |
| [Vol.11.1](https://qiita.com/juehara-crypto/items/0a584da537059dd43a7c)     | 自動注入とステートレスActionの仕組み                                 | フレームワーク内部理解       |
| [Vol.11.2](https://qiita.com/juehara-crypto/items/c69962826bb29639c351) | **UX改善に効く！アクション層設計と入力制御の極意（プロローグ）**                   | UX設計・アクション層総論     |
| [Vol.11.2.1](https://qiita.com/juehara-crypto/items/9ca115073e6f928c7f71)   | 【実践編】Struts2アクション層の役割と設計パターン（Command型 / UIアクション分離など）  | アクション設計パターン       |
| [Vol.11.2.2](https://qiita.com/juehara-crypto/items/88b7634a64b1ad564668)   | 【UX重視】戻るボタン・キャンセル処理の設計手法と「戻り先管理」のスマート実装               | 戻り先制御とUX設計        |
| [Vol.11.2.3](https://qiita.com/juehara-crypto/items/c5165c92a4366fd1962b)   | 【設計ノウハウ】多画面遷移時のパラメータ受け渡し・保持戦略（セッション vs hidden vs URL） | パラメータ多重管理         |
| [Vol.11.2.4](https://qiita.com/juehara-crypto/items/06162659215cca86de28)   | 【実践ガイド】ユーザー操作を考慮したアクション遷移設計（リダイレクト vs フォワードの使い分け）     | UX遷移設計／Result制御   |
| [Vol.11.2.5](https://qiita.com/juehara-crypto/items/b538b50eaa9c263a31bb)   | 【トラブル防止】アクション層の共通処理とメンテナブルなBaseAction設計               | アクション共通化／保守性      |
| [Vol.11.3](https://qiita.com/juehara-crypto/items/913de7c942a9242201e8)     | Struts2の defaultStack とは？Interceptorの中身を詳しく追ってみる      | Interceptor       |
| [Vol.11.3.2](https://qiita.com/juehara-crypto/items/ede8d3c2a9b147f6161e)     | 🔧 Vol.11.3.2 独自Interceptorの作り方と使い所 _Struts2のカスタマイズを“実践で使えるレベル”に一歩進めよう_     | Interceptor       |
| [Vol.11.4](https://qiita.com/juehara-crypto/items/253142d13fe5f604610f)     | 入門者のための「パラメータ自動バインディング」完全理解ガイド                        | 自動バインディング         |
| [Vol.Vol.11.4.1](https://qiita.com/juehara-crypto/items/4fd8ed2a8be317f6e1bd)     | 入門者のための自動バインディング実践パターン集                        | 自動バインディング         |
| [Vol.11.5](https://qiita.com/juehara-crypto/items/6ef7a87a54163d81a9ba)     | Struts2の構成理解が“実務レベル”へと進化する決定版         | 設定ファイル構造          |
| [Vol.11.5.1](https://qiita.com/juehara-crypto/items/df407b24101e92a02eab)     | Struts2の“画面遷移の全体像”を理解するためのマイルストーン記事         | 設定ファイル構造          |
| [Vol.11.6](https://qiita.com/juehara-crypto/items/bfbdc2203acac7ba3f19)     | ActionSupport の便利メソッドと国際化対応                           | ユーティリティ / i18n    |
| [Vol.11.7](https://qiita.com/juehara-crypto/items/ed8f0977c23ee8c8b959)     | validate() / input 戦略とUX設計                            | 開発スタイルの違い    
| [Vol.11.8](https://qiita.com/juehara-crypto/items/bb2b23612c22fa9bf50b)     | アノテーションベースの設定 vs XML定義の比較                             | 開発スタイルの違い         |
| [Vol.11.9](https://qiita.com/juehara-crypto/items/6163ad6c9308cc8dda6d)     | バリデーション完全解説（XML / アノテーション）                            | バリデーション（※Vol.8補完） |
| [Vol.11.10](https://qiita.com/juehara-crypto/items/207cb3d7f0a889c54df9)     | Struts2の「OGNL」ってなに？しくみと使い方をやさしく解説                     | 式言語OGNL解説         |
| [Vol.11.11](https://qiita.com/juehara-crypto/items/c313ea56f97984756c05)    | ModelDriven インターフェースの使いどころと注意点                        | Model駆動開発         |
| [Vol.11.12](https://qiita.com/juehara-crypto/items/de7a17d53e53d6466f17)    | SessionAware と RequestAware でセッション/リクエスト管理            | セッション管理           |
| [Vol.11.13](https://qiita.com/juehara-crypto/items/539bd5bae75a8e154753)    | Resultタイプ完全解説（dispatcher / redirect / stream など）      | 遷移パターン理解          |
| [Vol.11.14](https://qiita.com/juehara-crypto/items/142d9aa2c623c5eb70bc)    | Vol.11.14 ValueStackの中身を理解する – 画面とActionの橋渡し役                 | Action            |
| [Vol.11.15](https://qiita.com/juehara-crypto/items/84f024816d0cf2212cb6)    | Interceptorチェーンを自作してみよう（ログ / 認証フィルタ）                 | Interceptor            |
| [Vol.11.16](https://qiita.com/juehara-crypto/items/ff3ad75f9ee45fcd0f8f)    | エラー処理と例外ハンドリングの実践パターン                                 | ハンドリング設計          |
| [Vol.11.17](https://qiita.com/juehara-crypto/items/0d8d5101ff39b34b4704)    | Struts2でファイルアップロード機能を実装する方法                           | 実装系Tips           |
| [Vol.11.19](https://qiita.com/juehara-crypto/items/dd6cf06d3100c9204d1f)    | セキュリティ対策（CSRF, XSS, パラメータ偽装）                              | セキュリティ対策           |
| [Vol.11.20](https://qiita.com/juehara-crypto/items/9442d9f4705f1c6c4da1)    | 複数フォームを安全に扱う！セッション管理と動的フォームの考え方                              | セッション管理           |
| [Vol.11.21](https://qiita.com/juehara-crypto/items/78eb217727b7c97f228a)    | Struts2でJSONを返す！REST API連携と非同期通信の基本設計                              | セッション管理           |
| [Vol.11.22](https://qiita.com/juehara-crypto/items/424155ee0e567a36b9a1)    | 本番環境構成とセキュリティ設計（Apache+Tomcat+Struts2連携）                             | 外部公開           |

---