jQ_AJAXと通信

07AJAXと通信

AJAX（Asynchronous JavaScript and XML）は、ウェブページがサーバーとの間でデータを非同期に交換し、ページをリロードせずに部分的に更新できる技術です。これにより、ウェブアプリケーションのパフォーマンスが向上し、ユーザー体験がスムーズになります。

例えば、レストランでの通常の注文プロセスを考えてみましょう。ウェイターが注文を受けてキッチンに伝え、料理が一度に全てテーブルに運ばれるまで待つ必要があります。これは同期処理に似ています。一方で、AJAXを使ったウェブページでは、まるで「タップ式注文システム」を使用しているレストランのように、各料理を個別に注文し、準備ができ次第すぐに受け取ることができます。これは非同期処理に相当し、各料理を待たずに次々と受け取ることができるため、体験が流動的で効率的になります。

jQueryでのAJAXの基本

上記の処理をjQueryでは簡単に実装することができます。

jQueryでは主に$.ajax()メソッドを使用してAJAXリクエストを行います。

これは柔軟性が高く、様々なオプションをカスタマイズできるメソッドです。他にも、より簡略化された$.get(), $.post()などのメソッドがあります。これは後ほど説明いたします。

書き方は下記の通りです。これはJSONPlaceholderを利用した例になります。

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>AJAX Demo with JSON Placeholder</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="load-button">データをロード</button>
    <div id="data-container">ここにデータが表示されます。</div>

    <script>
        $(document).ready(function() {
            $('#load-button').click(function() {
                $.ajax({
                    url: '{
  "id": 1,
  "name": "Leanne Graham",
  "username": "Bret",
  "email": "Sincere@april.biz",
  "address": {
    "street": "Kulas Light",
    "suite": "Apt. 556",
    "city": "Gwenborough",
    "zipcode": "92998-3874",
    "geo": {
      "lat": "-37.3159",
      "lng": "81.1496"
    }
  },
  "phone": "1-770-736-8031 x56442",
  "website": "hildegard.org",
  "company": {
    "name": "Romaguera-Crona",
    "catchPhrase": "Multi-layered client-server neural-net",
    "bs": "harness real-time e-markets"
  }
}', // JSON Placeholderからユーザー情報を取得
                    type: 'GET', // リクエストのタイプ
                    dataType: 'json', // 期待するレスポンスのデータタイプ
                    success: function(data) {
                        // リクエストが成功した時の処理
                        // JSON Placeholderから返されるデータに基づき、ユーザーの名前とメールを表示
                        $('#data-container').html('<p>名前: ' + data.name + '</p><p>メール: ' + data.email + '</p>');
                    },
                    error: function() {
                        // リクエストが失敗した時の処理
                        $('#data-container').html('<p>データのロードに失敗しました。</p>');
                    }
                });
            });
        });
    </script>
</body>
</html>

・「https://jsonplaceholder.typicode.com/users/1」の出力
{
  "id": 1,
  "name": "Leanne Graham",
  "username": "Bret",
  "email": "Sincere@april.biz",
  "address": {
    "street": "Kulas Light",
    "suite": "Apt. 556",
    "city": "Gwenborough",
    "zipcode": "92998-3874",
    "geo": {
      "lat": "-37.3159",
      "lng": "81.1496"
    }
  },
  "phone": "1-770-736-8031 x56442",
  "website": "hildegard.org",
  "company": {
    "name": "Romaguera-Crona",
    "catchPhrase": "Multi-layered client-server neural-net",
    "bs": "harness real-time e-markets"
  }
}

・出力結果

処理のポイントは以下になります。また、今回のようにJSONとの連携された事例は頻繁に利用されます。

1. jQueryの利用
jQueryの読み込み: <script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>により、jQueryライブラリが読み込まれています。これにより、AJAXリクエストの実行やDOMの操作が簡単に行えます。
2. DOMの準備完了の待機
DOM Readyイベント: $(document).ready(function() {…});は、HTMLドキュメントが完全に読み込まれ、DOMが操作可能な状態になったときに実行される関数を定義します。
3. イベントハンドラの設定
クリックイベントの割り当て: $(‘#load-button’).click(function() {…});は、IDがload-buttonのHTML要素（この場合はボタン）がクリックされたときに関数を実行するように設定しています。
4. AJAXリクエストの実行
AJAXの設定と実行: $.ajax({…});は、指定された設定で非同期リクエストを実行します。主要なプロパティには以下が含まれます：
url: リクエストを送信するURL。ここではJSON PlaceholderのAPIエンドポイントが指定されています。
type: HTTPメソッドの指定。ここではGETが使われており、データの取得を意味します。
dataType: レスポンスとして期待するデータの形式。’json’が指定されているため、JSON形式のデータを期待しています。
5. 成功とエラーのハンドリング
成功時の処理: success関数は、リクエストが成功した際に実行されます。ここで、dataパラメータからユーザーの名前とメールアドレスを取り出し、それをdata-containerというIDを持つdiv要素に表示しています。
エラー時の処理: error関数は、リクエストが失敗した場合に実行されます。この関数では、エラーメッセージをdata-containerに表示しています。
6. データの表示
HTML更新: 成功時のsuccess関数内で、取得したデータをHTML要素に挿入しています。これにより、ページのリロードなしに情報が動的に更新されます。

GETとPOSTリクエスト

使用頻度の高いGETやPOST通信に関してはそれぞれメソッドが用意されており、以下のように簡単に記述することができます。

`$.get()`メソッド

$.get()メソッドは、HTTP GETリクエストを簡単に実行するためのメソッドです。これはサーバーからデータを取得する際に使用され、主にデータを読み込む場合に適しています。$.get()は次のように使用します：

javascriptCopy code// $.get()の基本的な使用法
$.get("server.php", function(data) {
    // コールバック関数：リクエストが成功した場合に実行される
    console.log("受け取ったデータ:", data);
}).fail(function() {
    // リクエストが失敗した場合に実行される
    console.error("エラーが発生しました");
});

この例では、”server.php”からデータを取得し、取得できた場合はそのデータをコンソールに表示します。何らかのエラーが発生した場合にはエラーメッセージがコンソールに表示されます。

`$.post()`メソッド

$.post()メソッドは、HTTP POSTリクエストを簡単に実行するためのメソッドです。このメソッドはサーバーにデータを送信する際に使用され、フォームデータの送信やデータの更新に適しています。$.post()の使用法は以下の通りです：

javascriptCopy code// $.post()の基本的な使用法
$.post("server.php", { name: "Taro", age: 30 }, function(data) {
    // コールバック関数：リクエストが成功した場合に実行される
    console.log("サーバーからの応答:", data);
}).fail(function() {
    // リクエストが失敗した場合に実行される
    console.error("エラーが発生しました");
});

この例では、”server.php”に対してnameとageのデータをPOSTメソッドで送信し、サーバーからの応答をコンソールで表示しています。同じく、エラー処理も含まれています。

07AJAXと通信

jQueryでのAJAXの基本

GETとPOSTリクエスト

$.get()メソッド

$.post()メソッド

コメント

コメントを残す コメントをキャンセル

`$.get()`メソッド

`$.post()`メソッド

コメントを残すコメントをキャンセル