はじめに
今回は、既読機能のフロントについてアウトプットしていこうと思います！
イベントハンドラー
イベントが発生した時に実行される処理のことです！
具体的には、クリックしたときに〇〇をすると言ったような処理のことを言います！
XMLHttpReqest
XMLHttpReqestとは、Ajaxを可能にするオブジェクトで、サーバーにHTTPリクエスト非同期で行うことができます！
XMLHttpReqestは様々なメソッドが用意されており、それらを利用してサーバーへリクエストを送ることができます！
カスタムデータ
カスタムデータとは、HTMLに対して任意の属性を持たせられる機能のことです！
<div class="sample" data-id="1"> </div>
このような感じです！
HTMLの属性は、スタイルの変更などのために使用することがほとんどですが、JavaScriptを併用する際には表示されているデータのidなどの情報を持たせたい場合があります！
その際にカスタムデータで任意の情報を付与すると便利です！
open
openとは、XMRHttpRequestで定義されているメソッドで、リクエストを初期化できます！
XHR.open("GET", `/posts/${postID}`,true);
というふうに記述をし、第一引数にはHTTPメソッド、第二引数にはパス、第三引数には非同期通信であるかをbooleanで記述します！
responseType
responseTypeとは、XHRHttpRequestに定義されているメソッドで、レスポンスの形式で指定するメソッドのことです！
レスポンスとして、欲しい情報の形式を指定する必要があります！
send
sendとは、XMLHttpRequestで定義されているメソッドで、リクエストを送信することができます！
レスポンスの処理
onload
onloadとは、XMLHttp Requestで定義されているプロパティで、レスポンスの受信が成功した際に呼び出されるイベントハンドラーです！
レスポンスがエラーだった時
レスポンスがエラーというのは、レスポンスのステータスコードが200以外だった場合のことを意味します！
200以外とは、レスポンスが存在しないなど何かしら不具合が生じた時に返却されるコードです！
ステータスコードの種類を下記にまとめま！
- 100~は処理の継続中を意味します
- 200~は処理の成功を意味します
- 300~はリダイレクトを意味します
- 400~はクライアントのエラーを意味します
- 500~はサーバーのエラーを意味します
これらの情報はstatusというメソッドで確認できます！
実行タイミングの調整
setInterval
setIntervalとは、一定間隔（時間）ごとに指定した関数などを実行できるメソッドです！
setInterval(check, 1000)
のような感じに記述し、第一引数に実行する関数を指定し、第二引数に時間（m秒）を指定します！
FormData
FormDateとは、フォームに入力された値を取得できるオブジェクトのことです！
new FormData(フォームの要素);
このように記述し、オブジェクトを生成し、引数にフォームの要素を渡すことで、そのフォームに入力されている値を取得することができます！
insertAdjacentHTML
insertAdjacentHTMLは、指定したHTMLなどを、特定の要素に描写できるメソッドです！
要素.insertAdjacentHTML("afterend", HTML);
という感じに記述をし、第一引数には、要素のどこに描写するのかを指定します！
この指定については、以下のような種類があります！
- beforebeginは要素の直前に挿入します
- afterendは要素の直後に挿入します
- afterbeginは内部の最初の子要素の前に挿入します
- beforeendは内部の最後の子要素の後に挿入します
この中の値を選択し、第一引数として渡します！
第二引数はHTML自体を渡します！これも予め、変数にHTMLを代入しておくと保守性が上がります！
preventDefault()
preventDefault()とは、標準設定されている（default）イベントを阻止する（prevent）するメソッドです！
標準設定されているメソッドは下記のようなものがあります！
- 指定先の画面遷移やデータの送信ができるイベントのsubmitボタンをclickする
- チェックを入れたり、外したりできるテックボックスでclickする
このような感じのものがあります！
これらのような標準設定は外さないといけない時もあります！
コメント