FOR SE

文系の学部から新卒でメーカー系のSIerに就職。技術・スキルがないためブログを通して勉強。その後、IT業界の業界知識が活かせる人材業界に就職

このエントリーをはてなブックマークに追加

【Ajax】Ajaxとは ~Ajax入門~

【今回の紹介】

Ajaxを使用しながら、いくつかサンプルを作ってきましたが、いったん

もういちどAjaxの特徴とかメリットとかをまとめましたので紹介しまーーす。



【内容】

Ajaxとは

    
    Ajaxとは、Asynchronous JavaScript + XML」の略称で、javascriptxmlによる非同期通信のこと。
    
    画面遷移なし、同一ページ内でサーバとの非同期通信が行えるもの。
    
    ここでいう非同期とは、非通信のことではない。
    
    非同期通信とは、サーバ側の処理を待たずに(非同期に)ブラウザ側は別の操作を行えるというこ          
    と。だから、裏でAjaxにより大量のデータを取得している間でも、ブラウザの操作が可能になる。
     
     
     

■従来の通信方法(formによる通信方法)との違い



    ①レスポンスデータ

従来型:サーバで組み立てられるHTML
ajax :xml・テキスト・img

②イベントの契機

従来型:送信ボタン押下時(submit)
ajax :キー入力やjavascriptで拾えるイベント全般
(プルダウン選択・マウスが要素にのった時・テキストボックス入力時などなど)


③通信量
従来型:リクエスト時にpostまたはgetする情報を含めてページを再構成し表示する
Ajax :リクエスト時にpostまたはgetする情報のみ受け取り、同一ページの該当する部分のみ再構成
Ajaxの方が通信量が少なくなりやすい

④通信方法

従来型:ほぼ同期通信。(リクエスト通信後、サーバのレスポンスを待つ)
Ajax :同期または非同期通信


■主なAjaxを使ったサービス


グーグルマップ

    ・Gmailの☆をつけるとか検索機能

    ・グーグルの検索する言葉を予測してくれるもの

■まとめ

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

③【Javascriptphpxmlhttprequestajax】外部ファイル(text)に書き込む&読み込む
http://forse.hatenablog.com/entry/2014/01/26/175452

.hatena-module:nth-of-type(10) { background: transparent; } .hatena-module:nth-of-type(10) .hatena-module-title{ display: none; } .hatena-module:nth-of-type(10) .hatena-module-body { padding: 0; }