web学習日記#1 Ajax通信

JavaScriptでAjax通信　

学習講座
udemy 「[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門」

---

本日はJavascriptでAjax通信を用いたコーディングを行った。

今まで画像を表示させたいときはディレクトリ内の画像ファイルをhtmlまたはcssから直接パスを指定して参照していた。

今回はJavaScriptからXMLHtmlRequestというサーバーと通信するためのAPIを使って、サーバーからjsonといわれる形式のデータを受け取ることで、データ内にある画像へのパスやテキストを使ってweb上に画像やテキストを表示させた。

コード

<script>
    var ajax = new XMLHttpRequest(); //オブジェクトの作成
    ajax.open('GET', 'https://h2o-space.com/htmlbook/images.php'); //送信時のメソッド、送信先のURLの設定
    ajax.responseType = 'json'; //jsonタイプを受け取る
    ajax.send(null); //サーバーへリクエスト

    ajax.onreadystatechange = function() { //読み込み中の状態が変わるごとに処理する
        if(ajax.readyState === XMLHttpRequest.DONE && ajax.status === 200) { 読み込み完了&&ステータスが200
            for(var i = 0; i < this.response.length; i++) {
                var data = this.response[i];

                var img = document.createElement('img');
                img.setAttribute('src', data.path);

                var caption = document.createElement('div');
                caption.className = 'inner';
                caption,innerHTML = '<p>' + data.caption + '<span>' + data.name + '</span></p>';

                var div = document.createElement('div');
                div.className = 'photo';
                div.appendChild(img);
                div.appendChild(caption);

                document.getElementById('img_unit').appendChild(div);
            }
        }
    };
</script>