【jQuery】Ajax作成の基本と作成例について[Part1]

Ajaxとは？
Ajaxを作成する（url・type・data・success）
Ajaxリクエスト作成例
success関数とcomplete関数の違い
まとめ

Ajaxとは？

Ajaxは、Asynchronous JavaScript and XML（非同期的なJavaScriptとXML）の略称で、Webページをリロードすることなく、サーバーと通信して動的にコンテンツを更新するための技術です。

Ajaxを使用することにより、ユーザーがページをリロードしなくても、データの更新や追加を実行することができます。

以下、具体例を見ていきます。

Ajaxを作成する（url・type・data・success）

jQueryを使ってAjaxを作成するには、まずjQueryライブラリをHTMLページに読み込む必要があります。※バージョンなど適時変更が必要です。

<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>

jQueryを読み込んだら、以下の手順に従って、Ajaxを作成することができます。

$.ajax()関数を使用して、Ajaxリクエストを作成します。この関数は、url、type、data、successなどのパラメータを指定することができます。
urlパラメータには、Ajaxリクエストを送信するURLを指定します。
typeパラメータには、Ajaxリクエストのタイプを指定します。一般的なタイプは、GETとPOSTです。
dataパラメータには、Ajaxリクエストに含めるデータを指定します。例えば、フォームの入力値などが該当します。
successパラメータには、Ajaxリクエストが成功した場合に実行する関数を指定します。この関数には、Ajaxリクエストの結果が引数として渡されます。
errorパラメータには、Ajaxリクエストが失敗した場合に実行する関数を指定します。この関数には、Ajaxリクエストのエラーが引数として渡されます。
beforeSendパラメータには、Ajaxリクエストが開始される前に実行する関数を指定します。この関数は、Ajaxリクエストの進行状況を示すために、loadingアニメーションなどを表示することができます。
completeパラメータには、Ajaxリクエストが完了した後に実行する関数を指定します。この関数は、Ajaxリクエストの完了後に実行する必要があるタスクがある場合に使用されます。

Ajaxリクエスト作成例

以下は、jQueryを使ってAjaxリクエストを作成する例です。

$.ajax({
  url: "test.html",
  type: "GET",
  data: { name: "John", age: 30 },
  beforeSend: function() {
    // loadingアニメーションの表示
  },
  success: function(result) {
    // Ajaxリクエストが成功した場合に実行する処理
    console.log(result);
  },
  error: function(error) {
    // Ajaxリクエストが失敗した場合に実行する処理
    console.log(error);
  },
  complete: function() {
    // Ajaxリクエストが完了した場合に実行する処理
    // loadingアニメーションの非表示
  }
});

上記の例では、urlに”test.html”が指定され、GETリクエストが作成されています。また、dataには、オブジェクト形式で”name”と”age”の値が指定されています。

[rml_read_more]

beforeSend関数では、Ajaxリクエストが開始される前にloadingアニメーションを表示するように指定されています。

success関数では、Ajaxリクエストが成功した場合に、結果をコンソールに出力するように指定されています。

error関数では、Ajaxリクエストが失敗した場合に、エラーをコンソールに出力するように指定されています。

complete関数では、Ajaxリクエストが完了した場合に、loadingアニメーションを非表示にするように指定されています。

success関数とcomplete関数の違い

success関数とcomplete関数は、どちらもAjaxリクエストが完了した後に実行される関数ですが、それぞれの役割は異なります。

success関数は、Ajaxリクエストが成功した場合に実行される関数です。つまり、サーバーからの応答が正常に返された場合に、この関数が実行されます。success関数では、サーバーからの応答データを引数として受け取ることができます。このデータは、JSON形式であったり、テキスト形式であったりする場合があります。このデータを用いて、Webページの表示を更新するなどの処理を行うことができます。

一方、complete関数は、Ajaxリクエストが完了した後に必ず実行される関数です。つまり、サーバーからの応答が正常に返された場合でも、エラーが発生した場合でも、この関数が実行されます。complete関数では、引数としてAjaxリクエストのステータスコードが渡されます。ステータスコードは、HTTPリクエストに対するサーバーの応答コードであり、リクエストが成功したかどうかや、エラーが発生した原因などを示します。

したがって、success関数とcomplete関数は、それぞれ異なるタイミングで実行され、役割も異なります。成功時の処理を行う場合はsuccess関数を、Ajaxリクエストの完了時に何らかの処理を行いたい場合はcomplete関数を使用すると良いでしょう。

まとめ

以上が、jQueryを使用してAjaxリクエストを作成する基本的な手順です。Ajaxを使用することにより、Webページをリロードすることなく、サーバーと通信してデータを取得したり、更新したりすることができます。