Ruby on Railsを学習している中で「Javascriptを使ってボタンのajax化をする」という課題が出ました。

基礎の流れがよくわかってなかったので、ajax通信で変更する場所はどうやって決める?JqueryとかDOMとかどういうこと?というところがよくわからずに困ったので、

そういう状況の方の1歩になればと思って記事を書きます。

まず ajax化とは

通常の流れは↓サーバーとやりとり時間があるので、一旦画面が白くなるのが特徴。

①ブラウザからクリックなどでサーバーへリクエスト送信

②サーバー側で処理して場合によってデータ生成→サーバーへレスポンスを返す(htmlや画像)

③ブラウザ(表示)

ajax化...Javascriptを使用して、画面の一部のみ変更することで画面移管せずに表示を変更することができる。

①ブラウザからクリックなどでサーバーへリクエストを送信(Javascriptで必要な部分のみをリクエスト)

②リクエストが返ってくる間の待ち時間も操作が可能

③リクエストが返ってきたら必要な部分のみを変更するので画面は白くならない

ということができる技術のようです。

ちなみにajax通信を調べてて出てきた用語を調べて理解したこと↓

DOM...htmlのどこの部分を更新するかを指定している

JQuery...Javascriptのライブラリ(なんのこっちゃ) →htmlのDOM操作とajax処理をJavascriptを使って簡単に記述できるようにしている便利な道具(的なイメージ)

なんとなくわかった気がする...

続いて、実際に組み込む方法をやってみます!

railsで実際に使用してみる(form_withでやります)

  1. どこの部分をajax化するか指定する