CodeZine(コードジン)

特集ページ一覧

「非同期通信とAJAX」
~マンガでプログラミング用語解説

マンガで分かるプログラミング用語辞典(131)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2018/05/01 14:00

解説

 「AJAX」(Asynchronous JavaScript+XML)は、非同期に通信を行い、JavaScriptで動的にHTMLを差し替える処理を指します。

 Webアプリケーションの多くでは、見えないところで処理を行い、ユーザーの操作に応じて、サーバーと通信して各種データを取得しています。そうした処理をAJAXと呼びます。

 省略前の名前にXMLと付いていますが、サーバーから取得するデータはXMLとは限りません。

サンプル

 WikipediaのAPIを利用したJavaScriptのプログラムを掲載します。ファイルはUTF-8で保存してください。検証はGoogle Chromeで行なっています。

<html>
    <head>
        <title>「JavaScript」のサンプル</title>
        <meta charset="UTF-8">
        <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script>
        $(function() {
            $('#exec').click(function() {
                var p = $.param({
                    action: 'query',
                    list: 'search',
                    srsearch: $('#src').val(),
                    srnamespace: 0,
                    srlimit: 10,
                    srprop: '',
                    format: 'json'
                });

                $.getJSON('http://ja.wikipedia.org/w/api.php?' + p + '&callback=?',
                    function(data) {
                        var res = data.query.search.map(x => x.title).join('<br>');
                        $('#dst').empty().append(res);
                    }
                );
            });
        });
        </script>
    </head>
    <body>
        <input type="text" id="src" value="本">
        <button id="exec">実行</button>
        <div id="dst"></div>
    </body>
</html>
「実行」ボタンをクリックした際の出力結果
「実行」ボタンをクリックした際の出力結果
フィードバックお待ちしております!

 ご感想、解説して欲しい用語、解説内容のアドバイスなどございましたら、FacebookTwitterなどでお気軽に編集部までお寄せください。よろしくお願いいたします。



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:マンガで分かるプログラミング用語辞典

もっと読む

著者プロフィール

  • 柳井 政和(ヤナイ マサカズ)

    クロノス・クラウン合同会社 代表社員 http://crocro.com/ オンラインソフトを多数公開。 プログラムを書いたり、ゲームを作ったり、記事を執筆したり、マンガを描いたり、小説を書いたりしています。 「めもりーくりーなー」でオンラインソフト大賞に入賞。最近は、小説家デビューして小説...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5