【Ajax】Ajaxとは ~Ajax入門~
【今回の紹介】
Ajaxを使用しながら、いくつかサンプルを作ってきましたが、いったん
もういちどAjaxの特徴とかメリットとかをまとめましたので紹介しまーーす。
【内容】
■Ajaxとは
Ajaxとは、Asynchronous JavaScript + XML」の略称で、javascriptとxmlによる非同期通信のこと。
画面遷移なし、同一ページ内でサーバとの非同期通信が行えるもの。
ここでいう非同期とは、非通信のことではない。
非同期通信とは、サーバ側の処理を待たずに(非同期に)ブラウザ側は別の操作を行えるというこ
と。だから、裏でAjaxにより大量のデータを取得している間でも、ブラウザの操作が可能になる。
■従来の通信方法(formによる通信方法)との違い
①レスポンスデータ
従来型:サーバで組み立てられるHTML
ajax :xml・テキスト・img
②イベントの契機
従来型:送信ボタン押下時(submit)
ajax :キー入力やjavascriptで拾えるイベント全般
(プルダウン選択・マウスが要素にのった時・テキストボックス入力時などなど)
③通信量
従来型:リクエスト時にpostまたはgetする情報を含めてページを再構成し表示する
Ajax :リクエスト時にpostまたはgetする情報のみ受け取り、同一ページの該当する部分のみ再構成
※Ajaxの方が通信量が少なくなりやすい
④通信方法
従来型:ほぼ同期通信。(リクエスト通信後、サーバのレスポンスを待つ)
Ajax :同期または非同期通信
■まとめ
Ajaxのメリット
従来型(formによる通信方法)にはないページ遷移なしでのサーバとの通信が可能になった。それにより
☆ページ全体を更新ではなく、ページの一部を更新することにで通信量が減り、サーバからのレスポンス速度が上がる
一番わかりやすかった記事を載せておきます
参考:http://www.atmarkit.co.jp/ait/articles/0708/23/news134.html
あと、簡単なAjaxの参考です。
①【JavaScript】外部のテキストファイルをページ遷移なしで読み込む
http://forse.hatenablog.com/entry/2013/12/23/115839
②【Javascript・Ajax・PHP】ページ遷移を行わず、テキストファイルに入力データのログを出力するサンプル
http://forse.hatenablog.com/entry/2014/01/12/201720
③【Javascript・php・xmlhttprequest・ajax】外部ファイル(text)に書き込む&読み込む
http://forse.hatenablog.com/entry/2014/01/26/175452