Ajax理解に必要な知識 集めました

いろいろな記事を読んだついでに備忘録

要約読んでざっくり理解した上で読んでから最後にもう一度要約を
読んだらわかりやすいかもしれません。

#要約　Ajax
①ページ上でなにかする（クリック、送信ボタンを押す等）
②サーバーに対してリクエスト送信　（非同期通信）
③ほしい情報、返ってくるレスポンスの情報を指定してリクエスト
④サーバーで受け取った情報を処理
⑤サーバーの処理中もクライアントは操作を継続できる（非同期通信）
⑥処理結果をJSONやXMLなどの形式で応答（データのやり取りをしやすい形に変換してやり取り）
⑦受診したレスポンスを受けて、DOM（ページの見た目を変える操作のこと）でページを更新
⑧更新のあった部分だけを書き換えるため、ページの移動はなし。
これがAjaxの動きの流れ

#Ajaxとは
「Asynchronous JavaScript + XML」の略
Asynchronous　= 非同期
JavaScriptとXMLを使って非同期にサーバとの間の非同期に通信を行うこと
##XMLとは
「Extensible Markup Language」の略　拡張可能なマークアップ言語という意味。

XMLは、文章の見た目や構造を記述するためのマークアップ言語の一種です。
主にデータのやりとりや管理を簡単にする目的で使われ、記述形式がわかりやすいという特徴があります。

一方、HTMLも XML と同じマークアップ言語のひとつです。
####HTMLとの違い
HTMLとは「Hyper Text Markup Language」の略です。Webページを記述するための表示用言語で、XMLと同じく文章中の文字列をタグで挟むことで、Webページに装飾を施すのが目的です。簡単にいうと、人間に情報をわかりやすく表示するための言語といえます。

一方のXMLは、データ記述用の言語です。文書中のデータをわかりやすくしたり、データを交換したりできます。マシンに情報をわかりやすく、効率よく伝えるための言語といっても良いでしょう。

##Javascriptとは
「JavaScript」とは、動的なWebページを作成する事のできるプログラミング言語です。 通常はブラウザー上で実行されます。 JavaScriptを使うと、ユーザーのアクションに応じたコンテンツの表示の他、ブラウザー上で表示される地図やグラフィックアニメーションなども表示する事ができます。
要はページに動きをもたせる事ができます。

##非同期通信とは
ネットワークなどでつながれているコンピュータ間で、送信者のデータ送信タイミングと受信者のデータ受信タイミングを合わせずに通信を行う通信方式。 同期通信はデータ通信のリクエストを出してからレスポンスが来るまでほかの処理を行わずにレスポンスを待ち続けるが、非同期通信ではレスポンスを待っている間にほかの処理を行える。

#ここまでの要約
いちいち通信しなくてもDBとのやり取りだけで必要な処理を行えるということです。
画面の移動なしにデータを表示、変化させることが可能になります。
Google Map使っているときに縮尺変えるたびにブラウザがページの移動をしていたら
面倒臭いですよね
それをて手っ取り早く行えるのが　非同期通信です。

#Ajaxはどうやって動いているの？
XMLHttpRequest
JavaScript
DOM
XML
上④つの機能をあわせてAjaxが成り立っています。
説明は書きを御覧ください。

##XMLHttpRequest
説明①
クライアントとサーバーの間でデータを伝送するための機能をクライアント側で提供する API です。ページ全体を再読み込みすることなく、URLからデータを読み出す簡単な方法を提供します。このAPIによって、ユーザの作業を中断させることなくWebページの一部を更新することができます。

説明②
Ajax (非同期通信) に使われる組み込みオブジェクトのこと.XHR を使うとサーバから受信済みの web ページから、さらにサーバへ通信リクエストを送ることができるようになる.

##Javascriptとは
「JavaScript」とは、動的なWebページを作成する事のできるプログラミング言語です。 通常はブラウザー上で実行されます。 JavaScriptを使うと、ユーザーのアクションに応じたコンテンツの表示の他、ブラウザー上で表示される地図やグラフィックアニメーションなども表示する事ができます。
要はページに動きをもたせる事ができます。

##Json
JavaScript Object Notationの略。
軽量のデータ交換フォーマットで、人間にとって読み書きが容易で、マシンにとっても簡単にパースや生成を行なえる形式です。

##DOM
DOM（Document Object Model）とは、xmlやhtmlの各要素、たとえば

とかとかそういった類の要素にアクセスする仕組みのことです。このDOMを操作することによって、要素の値をダイレクトに操作できます。

#要約　Ajax
①ページ上でなにかする（クリック、送信ボタンを押す等）
②サーバーに対してリクエスト送信　（非同期通信）
③ほしい情報、返ってくるレスポンスの情報を指定してリクエスト
④サーバーで受け取った情報を処理
⑤サーバーの処理中もクライアントは操作を継続できる（非同期通信）
⑥処理結果をJSONやXMLなどの形式で応答（データのやり取りをしやすい形に変換してやり取り）
⑦受診したレスポンスを受けて、DOM（ページの見た目を変える操作のこと）でページを更新
⑧更新のあった部分だけを書き換えるため、ページの移動はなし。
これがAjaxの動きの流れ

いろいろな用語がでてきて理解しづらいと思いますが
一つずつ噛み砕いて理解していきましょう。

#引用させていただきましたリンク
https://qiita.com/hisamura333/items/e3ea6ae549eb09b7efb9
https://hnavi.co.jp/knowledge/blog/xml/
http://proengineer.internous.co.jp/content/columnfeature/11532
https://www.atmarkit.co.jp/aig/07wcr/hidouki.html
http://piyo-js.com/05/dom.html