jQueryでAjax（非同期通信）を実装する方法を解説します。
フロントエンドのコーディングでよく使用するため、コピペで実装できるようテンプレート化しました。
Ajaxとは？
Ajax（Asynchronous JavaScript and XML）は、Web開発における技術の一つで、非同期通信を利用してWebページの一部を動的に更新する手法です。Ajaxを用いることで、ページ全体をリロードすることなくデータの送受信を行い、ユーザー体験を向上させることができます。
Ajaxの特徴
非同期通信
ページ全体をリロードすることなく、バックグラウンドでデータを送受信することが可能。動的な更新
受け取ったデータを用いて、Webページの一部を動的に更新・変更することが可能。
【雛形】Ajaxテンプレート
以下のコードはAjaxの基本的なコードです。
JavaSctipt
Copy
$(function(){$.ajax({url: 'url', // URLを指定type: 'GET',}).done(function(data) {// 通信が成功した場合の処理console.log(data);}).fail(function(jqXHR, textStatus, errorThrown) {// 通信が失敗した場合の処理console.log('通信に失敗しました。');}).always(function(jqXHR, textStatus) {// 常に実行する処理console.log('Request completed: ' + textStatus);});});
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
$(function(){$('#btn').on('click', function() {$.ajax({url: 'https://webdesign-programming.com/sample/ajax.html', // URLを指定type: 'GET',cache: false,dataType: 'html',}).done(function(data) {// 通信が成功した場合の処理let parser = new DOMParser();let doc = parser.parseFromString(data, 'text/html');let targetElement = $(doc).find('p');// targetElementの内容をalertで表示alert(targetElement.text());}).fail(function(jqXHR, textStatus, errorThrown) {// 通信が失敗した場合の処理console.log('通信に失敗しました。');}).always(function(jqXHR, textStatus) {// 常に実行する処理console.log('Request completed: ' + textStatus);});});});
jQuery初級者におすすめの1冊
リンク
もみじ
この本はHTMLとCSSの知識がある程度あり、これからjQueryの学習を始める方におすすめの1冊です。
実務で使用するサンプルコードも多数あり、製作現場でも使用できるスキルを学ぶことができます。
もみじ
ajaxで取得した
dataは文字列形式のため、DOMParserを使って、documentオブジェクトに変換してます。documentオブジェクトに変換することで、DOM操作がやりやすくなります。