スキルアップを始める

【JavaScript】Ajaxとは?(非同期的なJavaScriptとXML)

JavaScript(ジャバスクリプト)
メルマガ購読できます

簡単1ステップ!届いたメールの「フォローを確認」クリックでメルマガ登録!一緒にスキルアップを目指しましょう!

57人の購読者に加わりましょう

Ajaxとは?

Ajaxとは、Asynchronous JavaScript and XML(非同期的なJavaScriptとXML)の略語で、Webページを更新するために必要な情報を取得するためのテクノロジーです。

Ajaxを使用することで、Webページはサーバーとの通信なしに、非同期的にデータを受信し、更新することができます。これにより、ユーザーがページを再読み込みすることなく、よりスムーズなユーザーエクスペリエンスを提供することができます。

XMLHttpRequestオブジェクト

Ajaxは、XMLHttpRequestオブジェクトを使用して実装されます。このオブジェクトを使用すると、Webページからサーバーに要求を送信し、受信したデータを処理することができます。

最近では、fetch関数がXMLHttpRequestの代替手段として広く使用されています。

jQueryでAjaxリクエスト送信とレスポンス受信

以下は、jQueryを使用してAjaxリクエストを送信して、レスポンスを受信する例です。

$.ajax({
  url: "https://example.com/data.json",
  method: "GET",
  dataType: "json",
  success: function(data) {
    console.log(data);
  },
  error: function(error) {
    console.error(error);
  }
});

この例では、$.ajax()メソッドを使用して、指定されたURLからJSONデータを取得します。メソッドは、オプションを含むオブジェクトを引数として受け取ります。

この例では、urlオプションに取得するデータのURLを、methodオプションにHTTPメソッドを、dataTypeオプションにデータ形式を指定しています。

successオプションは、リクエストが成功した場合に実行される関数を指定します。この例では、JSONデータをログに出力します。errorオプションは、リクエストが失敗した場合に実行される関数を指定します。この例では、エラーをログに出力します。

JSONとは?

JSONは、JavaScript Object Notationの略語で、軽量で簡潔なデータ交換形式です。JSONは、テキスト形式で記述され、JavaScriptで使用されるオブジェクトと配列の表現方法に基づいています。JSONは、多くのWeb APIで使用されている主要なデータ形式です

以下は、JSON形式のデータの例です。

{
  "name": "John",
  "age": 30,
  "email": "john@example.com",
  "address": {
    "city": "Tokyo",
    "country": "Japan"
  },
  "interests": ["reading", "music", "travel"]
}

この例では、name、age、email、address、interestsの5つのプロパティを持つオブジェクトを示しています。addressプロパティは、cityとcountryの2つのプロパティを持つオブジェクトを含んでいます。interestsプロパティは、文字列の配列を持っています。

JSON形式は、テキストベースで、JavaScriptのオブジェクトと似た構造を持っています。JSON形式のデータは、Web APIからデータを受け取る際などによく使用されます。

fetch関数とは

fetch関数は、Web APIからデータを取得するための方法で、XMLHttpRequestよりも簡単に使用できます。fetch関数を使用すると、HTTPリクエストを送信し、JSONなどのデータ形式で受信したレスポンスを処理することができます。

以下は、fetch関数を使用してJSONデータを受信する例です。

fetch('https://example.com/data.json')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

この例では、fetch関数を使用して、指定されたURLからJSONデータを取得します。

fetch関数は、Promiseオブジェクトを返します。

Promiseオブジェクトとは

Promiseオブジェクトには、then、catch、finallyメソッドがあります。thenメソッドは、レスポンスを処理するための関数を指定します。

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { name: "John", age: 30 };
      resolve(data);
    }, 2000);
  });
}

fetchData()
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

この例では、fetchData()関数がPromiseオブジェクトを返します。Promiseコンストラクタに渡された関数は、非同期処理を含む関数です。

この例では、2秒間待機した後に、オブジェクトを含むデータを解決することによって、Promiseオブジェクトを解決しています。

thenメソッドは、Promiseオブジェクトが解決された場合に実行される関数を指定します。

この例では、解決されたデータをログに出力します。catchメソッドは、Promiseオブジェクトが拒否された場合に実行される関数を指定します。この例では、エラーをログに出力します。

Promiseオブジェクトを使用することで、非同期処理をより効率的に実装することができます。

まとめ

このように、jQueryを使用することで、Ajaxリクエストを簡単に実装することができます。

つづきはまた。

会員登録するとご利用できます。
Kindle Unlimited 会員は無料で購読できます
購読はこちら
Kindle Unlimited 会員は無料で購読できます
購読はこちら