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 3 years have passed since last update.

railsを使ったajaxの非同期通信概要

Posted at

非同期通信って何?

結論、ネットにつなぐことなく更新できることです。
具体例としてTwitterのいいね!機能があげられます。
試しにネット環境を遮断していいね!を押してみてください。
いいね!が普通に押せます。
これが非同期通信です。
この実装ができるようになるとページをいちいちリロードせずに
機能を反映することができ、
ユーザーの視点から見るとものすごく便利な機能です。

非同期通信をするために何を使うのか

結論、AjaxとJSONです。1個ずつ説明していきます。

Ajax

非同期通信を英語で言うと"Asynchronous JavaScript + XML"です。
略してAjax!これだけです。
Ajaxと言われたり、そのコードを見かけたら非同期通信のことだと思ってください。

##JSON
結論、サーバからのレスポンスで返す時の形式になるものです。
これだとよくわかりませんので具体例を示しながら説明します。
まず、以下のようなコードがあったとします。

{fruits: "orange", vegetable: "onion"}

これはrubyの時にも学んだキーとバリューの組み合わせです。
特に何にも設定していなければサーバーからキーとバリューのレスポンスを受け取る時
HTML形式で受け取っています。

**キーとバリューって何だっけ?**キーはカテゴリーでバリューはカテゴリーの中にある具体例のようなものでした。そしてこのキーとバリューをセットで扱うためにハッシュを用いるのでした。
HTML形式で受け取るとネット通信が始まり、そこでデータが更新されていくようなイメージです。 ではこれをJSON形式で受け取るとどうなるのか? **ネット通信を始めることなく一部だけページを書き換えるデータを受け取ることができます。** つまり、これが非同期通信です。 **JSON形式でデータを受け取ることによって非同期通信が可能になる**と理解しておきましょう。

非同期通信の実装概要

以下、手順です
①JavaScriptでリクエストを送り、レスポンスをJSON形式に変更する
②JSON形式でレスポンスしてもらうようにコントローラーのアクションにその旨を追記する。
③レスポンスするためのJSON形式のビューを追加する
あと細かい作業もあるのですがこの概要だけ抑えておくと、
実装のタイミングでスムーズに進められると思います。
また具体的な手順は後日、記述しようと思います。

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?