Ajaxの使い方

Ajaxとは

Ajaxとは「Asynchronous JavaScript + XML」の略。
Asynchronous：非同時性・非同期の意

つまり、JavaScriptとXMLを使って非同期にサーバとの間の通信を行うこと。

Ajaxを支える機能たち

・XMLHttpRequest
ブラウザ上でサーバーとHTTP通信を行うためのAPI
・JavaScript
・DOM
・XML
※現在では、XMLではなくJSONがよく使われている
・JSON

コード

たとえば、プルダウンで性別を選択すると非同期でサーバーと通信し、DBを更新するような場合。

$(function(){
    //DB更新等の処理が書いてあるファイルのパス
    let url = '/process.php';

        $.ajax({
            url:url,
            type:'POST',
            data:{
                'sex':$(`#sex`).val()
                }
            })
            // Ajaxリクエストが成功した時発動
            .done( (data) => {
                alert("登録に成功しました。");

            })
            // Ajaxリクエストが失敗した時発動
            .fail( (data) => {
                alert("登録に失敗しました。時間をおいてもう一度お試しください");
            })
            // Ajaxリクエストが成功・失敗どちらでも発動
            .always( (data) => {

        });
}