買い物リストアプリに非同期ツールを導入するため、カリキュラムの復習をしました。
非同期通信 （Ajax）エイジャックスと呼ばれる。
非同期通信とは
リクエスト後にレスポンスを返す際、ブラウザーに再読込されることなく通信が行われる通信法。
"Asynchronous JavaScript + XML"と表現される。
Ajaxでは、レスポンスのデータにJSONという形式が使われることが多い。
JSON
Java Script Object Notationの略で、データ交換を行うためのデータ記述形式の一種。
Rubyのハッシュと同様、キーとバリューの組み合わせでデータを表現する形式。
同期通信
デフォルトアクション
HTMLの要素を操作した際に定められている挙動
追加ボタンを押すとリクエストがおくれる。
リクエストに対してのレスポンスはJSON形式で返してほしい旨をリクエストに含めます。
フォーム要素のデフォルトアクションを無効にする。
非同期通信をする際は、リクエストにJSON形式で返してほしい旨の情報が含まれているため、その場合の対処をコントローラのアクションに明記する必要がある。
同期通信の際と同様viewsフォルダの中にJSON形式のファイルを準備することもできます。この時のファイル名は、○○.json.jbuilderという形式になる。
非同期通信では、ページがリロードされることはない。代わりに、レスポンスとして帰ってきたJSONのデータを利用してHTMLを操作する。
JavaScriptとjQueryを使用するための準備
gemfileに以下を記入
gem 'jquery-rails'
bundle install
Javascriptを記述するディレクトリを作成
Assetsディレクトリ内に、javascriptsというディレクトリを追加
javacscriptsディレクトリ内に
application.jsを追加
作成したjavascriptを読み込み記述
Application.html.hamlに
= javascript_include_tag 'application'
manifest.js
//= link_directory ../javascripts .jsを追記
jQueryを使えるようにする。
application.js内に
//= require jquery←jQueryを読み込む
//= require rails-ujs←RailsでJavaScriptを使用するためのもの
//= require_tree . ←application.jsが存在するディレクトリのjavascriptファイルが全てよみこむ
を追記
$(function(){
JavaScriptで関数を定義するにはfunction文を使う
$('.form').on('submit', function(e){
e.preventDefault() ←ディフォルトのイベントを止める
console.log("ヤッター")
console.log() ブラウザーのコンソールにテキストを表示させるメソッド
});
});
$("セレクタ")
＄の後にセレクタと呼ばれるHTMLの指定方法を記述することで、HTMLが習得される。
今回の$('.form').on('submit', function(e){
記述はクラスセレクタを使っている。