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.

Ajaxの非同期通信の考察

Posted at

Ajaxの非同期通信の考察

同期通信では一度のデータ通信で全てのデータが更新されていた。
非同期通信では一部のデータのみでデータ処理を行なっている。

何が違うのか。。。?

◆Railsの同期通信

URIもしくはPermitを元に、MVCでactionによる処理を行い、データ通信をしている。全体の更新を必要とする。

◆非同期通信

DOMでHTML(←階層構造)から作ったDOMツリー(←も階層構造)の先っちょにあるURLパラメーターを元に、XMLHttpRequestにより設定したリクエストとレスポンスの方法により、必要な一部分だけでデータ通信している。

全体を更新しなくても一部の処理を一部だけで行えるようになる!

◆ URIパラメーター達

・queryパラメーター
http://sample.jp/?name=kii の?以降の情報。 HTMLの要素のことを表してる?
・pathパラメーター
http://tweets.jp/tweets/1 のようなパラメーターで、「リソースを識別する場合」に使用する。 データベースでidとかをつけると使えるのかなってゆう感じ

まだはっきり理解してないので曖昧表現使ってます。(違ったら指摘お願いします。)

↑のやつをElementsかqueryのselectorで指定して、その部分のHTML要素のデータを単独でデータ通信していく。

◆XMLHttpRequest(以降XML)

これを使ってMVCで行なっていたようなデータ通信を作っていく。 ユーザーが見ている非同期通信の行えるwebサイトにはすでこれが組み込まれている?
・open
非同期通信のリクエストを何のHTTPメソッドでどんなパスでどの方式で行うのかを決める。
XML.open(HTTPメソッド, `パス`, true);

trueだと非同期通信。

・responseType
レスポンスをどんなデータの形でしてもらうか決める。
XML.responseType = "json";

これだとjsonの形式で返してくれる。

・send
この記述によって、この内容が組み込まれたwebサイトを見ているユーザー側から、リクエストの送信を実行する。

・・・最後に

まだはっきりと理解できてないので、今のところの認識で書いています。 言い回しの違いや、認識の間違いなどあれば指摘してくださると幸いです。
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?