【PR】を含みます。

フロントエンド

【jQuery】Ajax（非同期通信）を実装する方法

Ajax(非同期通信)を実装する方法

jQueryでAjax（非同期通信）を実装する方法を解説します。

フロントエンドのコーディングでよく使用するため、コピペで実装できるようテンプレート化しました。

Ajaxとは？

Ajax（Asynchronous JavaScript and XML）は、Web開発における技術の一つで、非同期通信を利用してWebページの一部を動的に更新する手法です。Ajaxを用いることで、ページ全体をリロードすることなくデータの送受信を行い、ユーザー体験を向上させることができます。

Ajaxの特徴

  1. 非同期通信
    ページ全体をリロードすることなく、バックグラウンドでデータを送受信することが可能。

  2. 動的な更新
    受け取ったデータを用いて、Webページの一部を動的に更新・変更することが可能。

【雛形】Ajaxテンプレート

以下のコードはAjaxの基本的なコードです。

JavaSctipt
Copy
  1. $(function(){
  2.   $.ajax({
  3.     url: 'url', // URLを指定
  4.     type: 'GET',
  5.   }).done(function(data) {
  6.     // 通信が成功した場合の処理
  7.     console.log(data);
  8.   }).fail(function(jqXHR, textStatus, errorThrown) {
  9.     // 通信が失敗した場合の処理
  10.     console.log('通信に失敗しました。');
  11.   }).always(function(jqXHR, textStatus) {
  12.     // 常に実行する処理
  13.     console.log('Request completed: ' + textStatus);
  14.   });
  15. });

Ajaxの主なオプション

url リクエスト先のURLを指定します。
省略した場合、呼び出し元のページに送信します。
例：url: 'https://webdesign-programming.com/sample/ajax.html'
method HTTPリクエストメソッド（GET、POST、PUT、DELETEなど）を指定します。
初期値： GET
例：method: 'POST'
data 送信するデータをオブジェクト形式で指定します。
指定したデータは、クエリー文字列に変換されGETリクエストとして付加されます。
例：data: { key1: 'value1', key2: 'value2' }
timeout リクエストがタイムアウトするまでの時間をミリ秒で指定します。
初期値： 0 (無制限)
例：timeout: 5000
cache ブラウザキャッシュを使用するかどうかを指定します。
初期値： true (キャッシュ有効)
例：cache: false
async 非同期リクエストを行うかどうかを指定します。
初期値： true (非同期)
例：async: true
dataType サーバーからのレスポンスのデータタイプ（"json", "xml", "html", "text", "script"など）を指定します。
初期値： 自動判別
例：dataType: 'html'

【サンプル】Ajaxでhtmlファイルのデータ読み込む方法

以下のコードは、「Ajaxを実行する」ボタンをクリックするとAjaxが発火するようになってます。

発火後、https://webdesign-programming.com/sample/ajax.htmlのHTMLファイルからpタグのテキスト(Ajax通信に成功しました。)を取得します。

その後、取得したテキストをalertで表示してます。

JavaSctipt
Copy
  1. $(function(){
  2.   $('#btn').on('click', function() {
  3.     $.ajax({
  4.       url: 'https://webdesign-programming.com/sample/ajax.html', // URLを指定
  5.       type: 'GET',
  6.       cache: false,
  7.       dataType: 'html',
  8.     }).done(function(data) {
  9.       // 通信が成功した場合の処理
  10.       let parser = new DOMParser();
  11.       let doc = parser.parseFromString(data, 'text/html');
  12.       let targetElement = $(doc).find('p');
  14.       // targetElementの内容をalertで表示
  15.       alert(targetElement.text());
  16.     }).fail(function(jqXHR, textStatus, errorThrown) {
  17.       // 通信が失敗した場合の処理
  18.       console.log('通信に失敗しました。');
  19.     }).always(function(jqXHR, textStatus) {
  20.       // 常に実行する処理
  21.       console.log('Request completed: ' + textStatus);
  22.     });
  23.   });
  24. });
アイコン画像

もみじ

ajaxで取得したdataは文字列形式のため、DOMParserを使って、documentオブジェクトに変換してます。

documentオブジェクトに変換することで、DOM操作がやりやすくなります。

jQuery初級者におすすめの1冊

アイコン画像

もみじ

この本はHTMLとCSSの知識がある程度あり、これからjQueryの学習を始める方におすすめの1冊です。

実務で使用するサンプルコードも多数あり、製作現場でも使用できるスキルを学ぶことができます。

-フロントエンド
-