UI設計したり、ウェブシステムを開発したりします。 

SQL見るだけクエリ#139 Ajaxを使用して非同期通信を行うための基本

記入日:2023-05-27 編集日:2023-05-27

Ajaxを使用して非同期通信を行うための基本を解説してみようと思います。

この記事を読むと(約5分)
Ajaxを使用して非同期通信を行うための方法をイメージできます。

Ajaxを使用して非同期通信

Ajax(Asynchronous JavaScript and XML)は、JavaScriptを使用して非同期通信を行うためのテクニックです。Ajaxを使用すると、Webページはサーバーと対話し、データを非同期で送受信することができます。PHPファイルに対してAjaxリクエストを送信するためのJavaScriptコードを以下に示します。

1. XMLHttpRequestオブジェクトの作成:

var xhr = new XMLHttpRequest();

2. リクエストの準備:

xhr.open("POST", "example.php", true);

- `open`メソッドの第1引数はHTTPメソッド(POSTまたはGET)です。
- `open`メソッドの第2引数はPHPファイルのURLです。
- `open`メソッドの第3引数は非同期通信を行うかどうかを示すブール値です(trueで非同期通信、falseで同期通信)。

3. レスポンスの受信時の処理を定義:

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      // レスポンスが正常に受信された場合の処理
      var response = xhr.responseText;
      // レスポンスを処理するためのコードを追加
    } else {
      // エラーが発生した場合の処理
    }
  }
};

- `onreadystatechange`イベントは、レスポンスの受信状態が変化したときに発生します。
- `readyState`プロパティが4(完了)であり、`status`プロパティが200(成功)である場合、レスポンスが正常に受信されたことを示します。
- `responseText`プロパティには、受信したレスポンスのテキストが含まれます。

4. リクエストの送信:

xhr.send();

- `send`メソッドは、リクエストをサーバーに送信します。

上記の手順に従って、PHPファイルに対してAjaxリクエストを送信することができます。PHPファイルはリクエストを受け取り、処理を実行し、レスポンスを返す必要があります。また、必要に応じてリクエストにデータを含めることもできます。

Ajaxリクエストにデータを含める例

var xhr = new XMLHttpRequest();

xhr.open("POST", "example.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      var response = xhr.responseText;
      // レスポンスを処理するためのコードを追加
    } else {
      // エラーが発生した場合の処理
    }
  }
};

var data = "name=John&age=30";  // 送信するデータを指定

xhr.send(data);

上記の例では、`data`変数に"name"と"age"の2つのパラメータを含むデータを指定しています。このデータは`xhr.send`メソッドの引数として渡されます。

リクエストメソッドがPOSTの場合、`xhr.setRequestHeader`メソッドを使用して"Content-Type"ヘッダを設定する必要があります。上記の例では、"application/x-www-form-urlencoded"という形式を指定しています。

PHPファイルでは、リクエストからデータを取得するために`$_POST`スーパーグローバル変数を使用できます。例えば、"name"と"age"の値を取得するには以下のようにします。

$name = $_POST['name'];
$age = $_POST['age'];

これにより、Ajaxリクエストを介して送信されたデータをPHPファイルで取得し、必要な処理を実行することができます。

SQLの使いどころ

サイトに大量の情報を掲載することは、ユーザーにとってとても便利なことです。しかし、情報が多すぎると、目的の情報を見つけるのが困難になります。そのため、SQLを使用することで、情報を効率的に管理することができます。

SQLを使用することで、データベース内の情報を検索したり、フィルタリングしたりすることができます。これにより、ユーザーは目的の情報をスムーズかつ簡単に見つけることができます。

また、SQLを使用することで、データを集計したり、統合したりすることもできます。これにより、ユーザーはさまざまな視点から情報を分析することができます。つまり、サイトに多くの情報を掲載することが重要である一方で、その情報を効率的かつ簡単に管理することが求められる場合には、SQLが不可欠であるといえます。

KK

機械工学を専攻。工業デザイナーとして、国内及び海外の自動車・搬送ラインの設計などに従事した後、2003年にウェブシステム会社を設立。UI設計やウェブシステムの開発、DX化のディレクションなどを行っています。