学習23日目 JavaScriptとお友達になる！

こんにちは！KATUUUNです。今週からJavaScriptを学習しています。早く使いこなしてロントサイドで威力を発揮したいです。

昨日に引き続きJavaScriptで学習したことをアウトプットします。

今日はトップページ内の投稿フォームにコメント記述し、投稿ボタンを押したら、コメントがトップページに表示される流れについて

1.まずは投稿機能を非同期通信化する。

　.jsファイルを作成。その後ページが読み込まれることをトリガーにしてイベントを発生させる。
例

function post (){
  （処理）
};

window.addEventListener('load', post);

ここではloadイベントをaddEventListener()で発火させました。

2.投稿ボタンをクリックしたら投稿フォームがコンソールに表示される
例

function post (){
  const submit = document.getElementById("submit_btn");
  submit.addEventListener("click", (e) => {
    console.log(document.getElementById("new_article"));
    e.preventDefault();
  });
};

window.addEventListener('load', post);

・id名はあくまで一例です。またちゃんと所得できているかを確認するためにコンソールに表示させています。
・クリックした時にイベントが発火するためclickというイベント名を用いています。
・ブラウザからのリクエストキャンセルするためにpreventDefault()メソッドを使用します。

3.サーバーへリクエストする
例

function post (){
  const submit = document.getElementById("submit_btn");
  submit.addEventListener("click", (e) => {
    const formData = new FormData(document.getElementById("new_article"));
    const XHR = new XMLHttpRequest();
    XHR.open("POST", "/articles", true);
    XHR.responseType = "json";
    XHR.send(formData);
    e.preventDefault();
  });
};

window.addEventListener('load', post);

・FormData(document.getElementById("new_article"))によってコメントの内容を所得しています
・const XHR = new XMLHttpRequest();によってjavaがサーバーとHTTP通信を行えます
・XHR.open("POST", "/articles", true);によってリクエストの内容を具体化しています
・XHR.responseType = "json";によってレスポンス時にjson形式で返すようにしています。
・ XHR.send(formData);の記述で送ります

4.レスポンスを受け取る
例

function post (){
  const submit = document.getElementById("submit_btn");
  submit.addEventListener("click", (e) => {
    const formData = new FormData(document.getElementById("new_article"));
    const XHR = new XMLHttpRequest();
    XHR.open("POST", "/articles", true);
    XHR.responseType = "json";
    XHR.send(formData);
    XHR.onload = () => {
      console.log(XHR.response.article);
    };
    e.preventDefault();
  });
};

window.addEventListener('load', post);

XHR.onload はリクエストの送信が成功したときに呼び出されるプロパティ

5.レスポンスの情報をブラウザに表示する
例

function post() {
  const submit = document.getElementById("submit_btn");
  submit.addEventListener("click", (e) => {
    const formData = new FormData(document.getElementById("new_article"));
    const XHR = new XMLHttpRequest();
    XHR.open("POST", "/articles", true);
    XHR.responseType = "json";
    XHR.send(formData);
    XHR.onload = () => {
      const item = XHR.response.article;
      const contentsArea = document.getElementById("contents_area");
      const articleText = document.getElementById("article_text");
      const HTML = `
        <div class="article">
          ${ item.text }
        </div>`;
      contentsArea.insertAdjacentHTML("afterbegin", HTML);
      articleText.value = "";
    };

    e.preventDefault();
  });
};
window.addEventListener("load", post);

以上です