PHPやJavaでAjaxを実装する方法

2021-04-28

今回は、Ajax通信の基本的な実装方法について説明します。

自作アプリにAjax通信を使いたくて検索しても、「Ajaxとは」について一生懸命説明していたり、余計なコードがあってどれが必要な記述なのか分からなかったりして苦労しました。

この記事では記述の簡単なjQueryを用いて必要最低限のコードを示すことで、Ajaxを実装できるようにします。サンプルコードではPHPを使い、ユーザーが入力した言葉を画面に表示する処理を例に説明していきます。

普通のPOST送信だと

Ajaxにするとデータのやりとりがどう変わるのかを比較するために、まずは普通のPOST送信の記述例を示します。手っ取り早くAjaxのコードを見たい方は飛ばしてください。

index.php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


<?php 
  session_start();
?>
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>普通のPOST送信だよ</title>
</head>
<body>
  <form action="logic.php" method="post">
    <input type="text" name="words">
    <input type="submit" value="送信">
  </form>
  <p><?php if(!empty($_SESSION['words'])) echo $_SESSION['words']; ?></p>
</body>
</html>

（PHPのコードがなぜかコメント扱いされていますが、必要なので記述してください。）

logic.php

1
2
3
4
5
6


<?php 
if(!empty($_POST)){
  session_start();
  $_SESSION['words'] = $_POST['words'];
}
header("Location:index.php");

普通だと、

　1.formタグのaction属性でデータの送信先(logic.php)を指定
　2.POST送信された値を送信先で受け取る
　3.セッションにデータを保存
　4.元のページ(index.php)で、セッションからデータを取り出して表示

などといった流れになるかと思います。その際、ページ全体を更新するので、画面が一度白くなります。

Ajaxだと

今度はAjaxを使うとどのような流れになるかを見ていきます。

index.php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <title>Ajaxだよ</title>
</head>
<body>
  <input type="text" id="words">
  <button id="send">送信</button>
  <p id="display"></p>
  <script>
    $(function(){
      $('##send').on('click',function(){

        //送信するデータを変数に入れる
        let words = $('##words').val();

        //1.通信に必要な情報
        $.ajax({
          type:"POST", //POST送信であること
          url:"logic.php", //送信先のファイル
          data:{"words":words}, //送信するデータ
          dataType:"json" //データの形式。jsonが多い。

        //2.通信が成功した時の処理
        }).done(function(result){
          $('##display').html(result);

        //3.通信が失敗した時の処理
        }).fail(function(){
          alert("読み込み失敗");
        })
      })
    })
  </script>
</body>
</html>

Ajax通信を使いたいときは、
　1.通信に必要な情報
　2.通信が成功した時の処理
　3.通信が失敗した時の処理
を書きます。

21行目は、引用符で囲んだ部分(“words”)がデータにつける名前(キー)で、コロンの右側(words)が15行目で変数に入れた実データです。送信先のファイルで、$_POST[‘words’]といった形で取り出すことができます。

2.では、返ってきたデータがfunction()の引数に入るので、<p id="display"></p>の中身を、返ってきたデータに書き換える処理にしています。

ligic.php

1
2
3
4
5


<?php
  $words = $_POST['words'];
  header("Content-type: application/json; charset=UTF-8");
  echo json_encode($words);
  exit;

受け取る側のファイルでは、まず送信されてきた値を$wordsという変数に入れています。
次に、header関数でデータタイプをjsonに指定します。
そして、$wordsの値をjson_encode()でjson形式に変換して送り返し、exit;で明示的にphpの処理を終えます。

こうして、ページ全体を更新することなく、一部分をサクサクと書き換えることができるようになります。

実際のアプリなどでは、送信先のファイルでデータベース処理を行うことが多いと思います。
ex）
・いいねボタンを押したらDBのいいねを増やし、画面の数字も増やす。
・会員登録時に入力されたIDをDBから瞬時に検索し、使用可否を画面に表示する。

Javaだと

JSP/サーブレットで作ったアプリにAjaxを使いたかったので、PHPで動いたコードを元にJavaでの書き方を模索しました。

いいねボタンを押したら送信先でいいねを増やす処理をして、返ってきた数字を画面に表示させるコードです。
main.jsp

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


<script>
  $(function(){
    $('.likebtn').on('click',function(){
      let likebtn = $(".likebtn").val();
      $.ajax({
        type:"GET",
        url:"Main", //「.java」はいらない
        data:{likebtn:likebtn} //キーに引用符はいらない
      }).done(function(result){
        $(".ev").html(result);
      }).fail(function(){
        alert("読み込み失敗");
      })
    })
  })
</script>

送信先のコードは長いので、見たい方はgithubを見てください。 Ajaxを使わない場合はフォワードで元のページに戻ってきましたが、PHPのecho()のように、out.print()にいいね数を入れることでデータが返ってきます。

まとめ

最初はなんとなくとっつきにくいAjaxですが、

・データのやりとりをJavaScriptがやってくれること
・やりとりするデータの形式はjsonが多いこと

がつかめれば、使いこなせるようになると思います。
ぜひ使ってみてください！

前へ次へ