Ajaxとは何か
Ajaxとは「Asynchronous JavaScript + XML」の略です。
Asynchronousとは非同期という意味で、簡単に言うと、Ajaxはページの一部だけを更新することができるのです。
SNSなどで、ページの更新をせずにそのままコメントやいいねができるのはAjaxの非同期通信が行われているからなんですね。
基本的なコード例
以下は、ボタンをクリックしてサーバにデータを送信し、結果を取得する簡単な例です。
コードのポイント解説
- url リクエストを送信するURLです。ここでは /store を指定していますが、実際にはデータを保存するAPIのURLに置き換えます。
- type リクエストのタイプを指定します。ここではデータを送信するために POST を使用しています。
- data サーバに送信するデータを指定します。この例では、名前と年齢をキーにして送信しています。
- success サーバからの応答が正常だった場合に実行される処理です。ここでは応答データを .result クラスのHTMLに挿入しています。
- error 通信に失敗した場合のエラー処理を記述します。エラー内容をアラートで表示するようにしています。
まとめ
いかがでしたか？ここでは簡単な内容のコードを例にしていますが、Ajaxには他にもいろいろなオプションが存在します。まずはシンプルな内容から試して、非同期通信に触れてみてください！