できる気になっているJSを改めてチュートリアルからやってみる 22日目

～～ XMLHttpRequest ～～

最近ちょっとずつまた学びなおす必要が出てきたなぁと思い、いろいろプログラムを勉強しなおしているところなんですが、実はもう今使っている知識は古いのかもと思って、アップデートしようとおもいやってみる会。

実施するのは、この記事

MDN - Javascript

完全な初心者向けと書かれたチュートリアルは全然初心者向けではないって話。アップデートしていきましょう。

クライアントサイドWebAPI をやっています。

今日はAjaxの実装部分です。

XMLHttpRequest

もう古いらしいですが、これをやります。

const verseChoose = document.querySelector('select');
const poemDisplay = document.querySelector('pre');

verseChoose.onchange = function(){
   const verse = verseChoose.value;
   updateDisplay(verse);
}

まずHTML内のselectの値が変わったら、その値を表示させるみたいなコード。
updateDisplay 関数は未定義なので書き足していきましょう

function updateDisplay(verse){
   // 受け取った値の文字列をURLに変換するための準備
   verse = verse.replace(" ", "");
   verse = verse.toLowercase();
   let url = verse + '.txt';

   let request = new XMLHttpRequest();

   // どのHTTPリクエストメソッドを使って取得するか
   request.open('GET',url);

   // レスポンスをどのような形式にしたいかを指定
   request.responseType = 'text';

   // リソースが返ってきたときの処理。 load イベントはレスポンスが返ってきたタイミングでやること
   request.onload = function(){
       poemDisplay.textContent = request.response;
   }

   request.send();
}

んで、あとはローカルサーバの設定なのですが結構大変だったのでこれで終わり。

詳細は記事を読んでください。→ テスト用のローカルサーバを設定するにはどうすればいい?

このローカルサーバーが簡単にできたことによってより、前に進めそうです。明日もここは復習しよう。