jQueryのAjax（非同期通信）とJSでの書き換え（Fetch API）について解説！
JSのfecth APIについてはこちら
https://www.youtube.com/watch?v=pzIxzegWVu8&t=537s
JSONの解説についてはこちら
https://factory-programming-mv.com/video/
/
今回は、jQueryのAjaxの基本的な使い方と、それを純粋なJavaScriptでの実装方法について解説します。
Ajax（エイジャックス、Asynchronous JavaScript and XML）は、Webページの一部のみを更新するための技術です。
・jQuery Ajaxの基本
jQueryを使って、HTML、JavaScript、JSONファイルなどの外部ファイルを読み込む際にAjaxを使用する。
書き方：$.ajax(パラメータ)
読み込み先のURL(URLやファイル名)を指定します。
読み込み成功時の処理(例: コンソールにデータを出力)や、読み込み失敗時の処理を指定できます。
使用する際は、Webサーバーを立ち上げて確認する必要があります。ライブサーバーのようなツールを使用すると便利です。
・純粋なJavaScriptでのAjax
通常のJavaScriptで外部ファイルを読み込む場合、Fetch API(フェッチAPI)を使用します。
書き方：fetch(読み込み先のURL).then(処理).catch(エラー処理)
先に読み込みたいファイルやURLを指定します。
読み込みが成功した場合の処理(例: JSONデータをコンソールに出力)や、エラーが発生した場合の処理を指定できます。
この二つの方法には微妙な違いがありますが、目的に応じて選択することができます。両方ともに、ファイル名やURLが正しくない場合、エラー(404エラー)が発生することも確認できます。
初心者の方々にもわかりやすいように、具体的なコードの書き方やポイントを解説しました。これを基に、Ajaxの利用をマスターしていただければと思います。
https://www.youtube.com/watch?v=pzIxzegWVu8&t=537s
JSONの解説についてはこちら
https://factory-programming-mv.com/video/
/
今回は、jQueryのAjaxの基本的な使い方と、それを純粋なJavaScriptでの実装方法について解説します。
Ajax（エイジャックス、Asynchronous JavaScript and XML）は、Webページの一部のみを更新するための技術です。
・jQuery Ajaxの基本
jQueryを使って、HTML、JavaScript、JSONファイルなどの外部ファイルを読み込む際にAjaxを使用する。
書き方：$.ajax(パラメータ)
読み込み先のURL(URLやファイル名)を指定します。
読み込み成功時の処理(例: コンソールにデータを出力)や、読み込み失敗時の処理を指定できます。
使用する際は、Webサーバーを立ち上げて確認する必要があります。ライブサーバーのようなツールを使用すると便利です。
・純粋なJavaScriptでのAjax
通常のJavaScriptで外部ファイルを読み込む場合、Fetch API(フェッチAPI)を使用します。
書き方：fetch(読み込み先のURL).then(処理).catch(エラー処理)
先に読み込みたいファイルやURLを指定します。
読み込みが成功した場合の処理(例: JSONデータをコンソールに出力)や、エラーが発生した場合の処理を指定できます。
この二つの方法には微妙な違いがありますが、目的に応じて選択することができます。両方ともに、ファイル名やURLが正しくない場合、エラー(404エラー)が発生することも確認できます。
初心者の方々にもわかりやすいように、具体的なコードの書き方やポイントを解説しました。これを基に、Ajaxの利用をマスターしていただければと思います。