どんな記事か
Ajaxを行うための関数やライブラリが沢山あり、
初心者がAjaxを学ぶ時に、どれを使って学べばいいのか迷うと思ったので、
各方法の特徴をまとめました。
※ 各参考記事のリンクは、筆者の独断と偏見で選んでいます。
しかも、筆者が記事に書いたことがある内容は、優先的に筆者の記事へのリンクを貼ってあります。
より色んな観点で知るために、ぜひご自身でもググって調べてみてください。
Ajaxとは？
JavaScriptでHTTP通信を行うための方法です。
主に自社サービスのサーバーにアクセスしたり、WebAPIを利用したりして、
Webサーバーからデータを取得するために使われています。
詳しくは他の記事で学んでください。
Ajaxを行うための方法
1. ライブラリを使わない方法
XMLHttpRequest
参考記事：XMLHttpRequestについて。 もっと言えば、setRequestHeader() について。
JavaScriptでAjaxをできるようにしてくれた、最初の仕組み。
記事にも書いたとおり、これのおかげでAjaxができるわけなので、これを理解していたら強いです。
ですが、使い方が複雑で、わざわざ覚える必要がない事も多い印象です。
fetch
参考記事：JavaScriptのFetch API について
素のJavaScriptでAjaxするための関数。XMLHttpRequestより簡単に使えます。
Ajaxの基礎的な部分や、他のライブラリでも活かせるような一般的な使い方を習得できるのでオススメですが、
まともに使えるようになったタイミングが遅かったせいなのか、
下記のライブラリと比べると、あまり一般的に使われているイメージは無いです。
**2. ライブラリを使う方法**
jQueryのajax
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
jQueryのライブラリには、Ajaxを実行するためのメソッドが含まれています。
なので、jQueryを使っているサイトでAjaxするなら、この方法がメジャーだと思います。
特徴として、このメソッドには、HTTP通信が成功・失敗したときに処理を続けるための書き方が複数あります。
選んだ書き方によっては、他のAjaxの書き方とガラっと変わってくるので、
応用力を身に着けたいときは、どの書き方で練習するべきかを気にしたほうがいいかもしれません。
axios
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Vus.jsやReactなどのフレームワークでAjaxを使いたいときに
よく使われてるイメージがあるライブラリです。
fetchよりもうほんの少しだけ、シンプルに使える印象があります。
**注：** 自分はAjaxのプロでもなんでもないので、参考意見は大歓迎です。 ご意見ありましたらコメントにお願いしますm(_ _)m
Ajaxの習得方法
これからAjaxを習得するご予定ですか？
いきなりガッツリ本格的なWebAPIを使って練習しようとすると、
認証などの複雑な処理を行う必要があり、
シンプルなAjaxの使い方を理解する妨げになるとおもうので、
まずはJSON GENERATORを使ってシンプルなJSON形式のデータをURLで配信し、
そのデータをAjax取得して変数に代入するような練習をしてみると良いとおもいます。
上記の方法が使えないようになっているようですので、
かわりにJSONPlaceholderを利用してください。
やり方
以下のうち好きなURLに、GET方式やPOST方式でアクセスしてみて、取得したJSONをオブジェクト型に変換して変数に代入します。
- https://jsonplaceholder.typicode.com/todos （TODOリスト風のデータ）
- https://jsonplaceholder.typicode.com/posts （掲示板の投稿風のデータ）
- https://jsonplaceholder.typicode.com/comments （コメント欄風のデータ）
うまくいかずに詰まる部分があったら、Ajaxの使い方をググって自己解決できるようになると、
一人前のAjax使いになれると思いますm(_ _)m
参考記事：HTTPとPOSTとGET
補足
サーバーが特定のURLにアクセスされたときにどういうデータを返してくるかは
サーバーサイドのプログラミングで決めることなので、
フロントエンドからAjaxを利用する際には、正しいアクセス先に、APIの作成者が決めているルールに基づいた内容のリクエストを送信して、レスポンスをきちんと変数に格納して扱うことができればAjaxの使い方は理解したと言っていいでしょう。
APIによって、例えば「POST方式のリクエストボディに、どういうレスポンスがほしいかの情報を入力する」など、使い方がそれぞれ決まっています。
なので、APIを使うには、Ajaxの使い方に加えて、そのAPI自体の使い方も理解する必要があります。（そのAPIの公式サイトで解説されている事が多いと思います。）
ちなみに、Ajaxは非同期処理になりますので
非同期処理について知らない場合、かなり悩むことになると思います。
下の記事の前半部分を読んでおくと、解決力が上がると思います。
参考記事：【JavaScript】非同期処理とasync/await ~難しいこと抜きで、まず使いはじめるための知識~ ( ´ε` )💻