【技術】jQueryのAjaxについて

こんにちは。えもんです。

非同期通信が可能な技術、Ajaxについてまとめました。

そもそもAjaxとは？

Ajaxとは「Asynchronous JavaScript + XML」の略だそう。

JavaScriptとXMLを利用してAsynchronous（非同期）なサーバとの通信を可能にする技術ということです。

「非同期にサーバと通信する」とはどういうことなのか、それを知るためにはまず同期通信について知る必要があります。

同期通信

同期通信とは要求を投げてから、応答が来るまで待ち続ける通信方式のことを指します。

一般的なWEB検索などは同期通信に該当します。

要求：「検索語を入力してボタンをクリック」

応答：「検索結果を表示」

この要求と応答の間でブラウザは別の作業をしていません。

ただ、応答が返ってくるのを待っている状態です。

1対1のキャッチボールをしているイメージです。

これが同期通信となります。

非同期通信

非同期通信は要求を出した後に、応答が返ってくるまで待たずに別の作業をすすめることができる通信方式のことを指します。

非同期通信を利用する事により、GoogleMapのようにページのリロードをせずとも様々な場所を表示できたり、郵便番号を入力するだけで、住所を表示したり、動的にページを更新することが可能となります。

また、要求を出した側は別の作業ができるので、必要なデータを必要な時に要求することができ、サーバへの負荷軽減にもつながるようです。

電話をしながら、一対一のキャッチボールをしているイメージでしょうか。

Ajaxつかってみた

ajaxの呼び出し元となるajax_sample1.htmlはこのようにします。

<body>
    <h1>Ajaxを利用してファイルを読み込む</h1>
    <p>
        <input type="button" id="ajax" value="読み込む"/>
        <br/>
    </p>
    <div id="result"></div>
    <div id="text"></div>
<script>
    $("#ajax").on("click",function(){
        $.ajax( {
            url: 'sample.html',
            dataType : 'html',
            success: function( data ) {
                $( '#text' ).html( data );
                $( '#result' ).html( '読み込めました。' );
            },
            error: function( data ) {
                $( '#result' ).html( '読み込めませんでした。' );
            }
        } );
    });
</script>
</body>

また、呼び出すajaxのsample.htmlは以下のようにしておきます。

<p>ajaxで読み込んだHTML</p>

ボタンを押したときの挙動はこのようになります。

f:id:emonnao:20190507202350g:plain — ajax_sample1.html

ajax通信を行った結果、ajax_sample1.html上にsample.htmlの内容が追加されていますね。ページ遷移を行わずにHTMLの更新ができています。

このように必要な情報を取得して、取得ができたら更新するというような仕組みができるようになります。

えもんブログ

社内SEのひとりごと

【技術】jQueryのAjaxについて

そもそもAjaxとは？

同期通信

非同期通信

Ajaxつかってみた