0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

rails javascript/jqueryの実装 単語編

Posted at

railsの使い方の次の段階で
javascriptとjqueryの実装を書いて行きます。

Ajax(非同期通信)

Ajax(エイジャックス)と呼ばれます。
非同期通信は英語で"Asynchronous JavaScript + XML"と表現され、略された呼び方です。

リクエスト後にレスポンスが帰ってきた際、ブラウザが再読み込みされること無く通信が行われる通信方法です。

非同期通信の実装ポイント

① 非同期通信ではJavaScriptを利用してリクエストを行う

    リクエストに対してのレスポンスはJSON形式で返してほしい旨をリクエストに含めます。

② コントローラでJSON形式のデータを用意するよう準備

    リクエストにJSON形式で返してほしい旨の情報が含まれているため
    コントローラのアクションに明記する必要があります。

③ レスポンスするためのJSON形式のデータを準備

    viewsディレクトリの中にファイルを作っておく必要があります。

    同期通信では
    ○○.html.erbという形式でHTMLのファイルを準備して置くことで
    レスポンスとしてHTMLを返すことができました。

    非同期通信の場合
    ○○.json.jbuilderという形式になります。
    JSONのデータをレスポンスとして返す必要があるので。

JSON

Java Script Object Notationの略で、データ交換を行うためのデータ記述形式の一種です。Rubyのハッシュと同様、キーとバリューの組み合わせでデータを表現する形式です。

通常の通信

  • プラウザ → サーバ これがリクエスト
  • プラウザ ← サーバ   これがレスポンス

Ajaxこみの通信

  • プラウザ → サーバ 通常と一緒のリクエスト

  • htmlのみ場合 プラウザ ← サーバ 通常レスポンス

  • Ajax混みだと プラウザ ← javscriptでhtmlに変換 ← 必要データのみJson形式で返す ← サーバ

デフォルトアクション

HTMLの要素を操作した際に定められている挙動です。
例えばaタグにもデフォルトアクションつまりリンクがあります。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?