kobasaです(´ω｀*)今日は時間割学習でガッツリAjaxの勉強ができました。
65日目の勉強内容
Ajaxとは
JavaScriptを用いた非同期通信で、再読込なしでページの内容を更新する通信技術のこと。
必要な部分だけ更新するのでレスポンスが早い。
非同期通信を用いてメモを投稿するアプリを例にする。
HTMLのフォームから投稿ボタンをクリックしてイベントを発火させると、
JavaScriptからリクエストが送られ、ルーティング、コントローラーを介したのちに、
JavaScriptでレスポンスを受け取ってHTMLを挿入するという形でビューに反映させる。
preventDefaultメソッド
AjaxではJavaScriptでのみリクエストを送るので、ブラウザからのリクエストは無効化させる必要がある。preventDefaultメソッドにより無効化できる。
投稿ボタンの要素.addEventListener("click", (e) => {
e.preventDefault();
};上記では、投稿ボタンをクリックしたときにイベント発火。アロー関数を使用。
引数のeはイベントオブジェクトといい、ブラウザ規定のイベント発生時の情報を持ったオブジェクト。
この場合eは「投稿ボタンをクリックした」という情報を持ったオブジェクトになる。
preventDefaultで投稿ボタンをクリックしたという現象を無効化している。
Ajaxでフォームからリクエストを送る記述
FormDataオブジェクト
オブジェクトを生成し、フォームに入力された情報を取得する。
非同期通信で送信するために必要なオブジェクト。変数に格納しておく。
const formData = new FormData(フォームの要素);XMLHttpRequestオブジェクト
JavaScriptを用いてサーバーとHTTP通信を行うときに利用するオブジェクト。
XMLHttpRequestのメソッドやプロパティを利用してAjaxの実装を進めていく。
const XHR = new XMLHttpRequest();
//サーバーにリクエストを送信するのに必要なオブジェクトを生成し、変数に代入openメソッド
XMLHttpRequestオブジェクトのメソッドでリクエストの内容を指定するためのメソッド。
第一引数にHTTPメソッド、第二引数にリクエスト先のパス、第三引数に非同期通信であるかを記述する。
XHR.open("POST", "/posts", true);
//非同期通信でcreateアクションに追加の通信をする記述。responseTypeプロパティ
受け取るレスポンスのデータフォーマット(データのやり取りの際に使われる型)を指定する。
リクエストを送信する際にレスポンスに欲しい型をあらかじめ指定する必要がある。
XHR.responseType = "json";
// 非同期通信を使用するため、レスポンスを「json」形式に指定。sendメソッド
リクエストを送信するメソッド。XMLHttpRequestオブジェクトのメソッド。
XHR.send(formData); // 生成したフォームデータを送信している。Ajaxでのコントローラーの記述
AjaxではレスポンスをHTMLではなくJSON形式でデータそのものとして返す必要があります。
def create
post = Post.create(content: params[:content])
render json: {post: post} # render json: {キー: 値}
renderメソッドのjsonオプションで、postというキーとセットで変数postの値をJSON形式で返却している
endAjaxでレスポンスを受け取る記述
onloadプロパティ
レスポンスの受信に成功したときの処理を記述するプロパティ
XHR.onload = () => {
// 処理内容を記述
};insertAdjacentHTMLメソッド
HTMLをある要素の指定した箇所に挿入するメソッド。
挿入したいHTML記述部分は、変数を定義してイベント外部に切り分けることで可読性を高めることができる。
挿入したい要素名.insertAdjacentHTML("挿入したい位置", 挿入するHTML);挿入したい位置には”arterend” ⇨ 「要素の直後」などいくつかの指定ができる。
コメント