• ベストアンサー

Ajax?

javascriptを勉強している初心者です。 Ajaxのことがよくわかりません。 グーグルマップがそうだ、とか聞くのですが、いまいち理解できません。 どなたか、初心者に噛み砕いて教えていただけませんか？

質問者が選んだベストアンサー

  • ベストアンサー
  • x_jouet_x
  • ベストアンサー率68% (162/236)
回答No.1

まず、技術的な面から言うと・・・、 Ajaxとは、Asynchronous(非同期) + JavaScript + XMLの略で、ブラウザに実装されているHTTP通信機能(XMLHttpRequest)を使ってブラウザとサーバとの間で非同期にデータのやり取りを行う技術のことです。 これを噛み砕いて説明すると・・・、 通常のWebページは、例えばリンクをクリックしたりフォームを送信する際、ブラウザからWebサーバに対してHTTPリクエスト(新たなWebページの要求)というものが送られ、HTTPリクエストを受け取ったWebサーバは新たなWebページとしてHTTPレスポンスというものをブラウザに返します。 つまり通常のWebページでは、Webサーバから何らかのデータを取得したいときは、必ず「新たなWebページ」を要求しなければならず、そのため画面遷移が発生してしまいます。 一方Ajaxというのは、JavaScriptを使用して画面遷移が発生しない形でWebサーバから何らかのデータを取得するための技術です。 Googleマップを例に挙げて説明すると、 Googleマップを使用して地図を表示すると、表示範囲の移動や地図の詳細／広域表示ができると思います。 この機能を通常のWebページで実現しようと思うと、例えば地図上でマウスがドラッグされると(表示範囲の移動)、地図を表示している部分だけでなくWebページの全てが更新されてしまいます。 ここでAjaxを使うことにより、ブラウザはWebサーバから地図のデータだけ取得できるようになるのでWebページの全てを更新するのではなく、地図を表示している部分だけ更新することが可能になります。

nishiura48
質問者

お礼

なるほど・・・ わかりやすい説明ありがとうございます。 なんとなく全体像がつかめました。 感謝します。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • Ajaxって一体何ですか！？

    Ajaxって何ですか？Javascriptとは違うんですか？ 調べてみてもよくわかんないんですが、どなたかやさしく解説して頂けませんでしょうか。 ちなみにhtmlとCSSはある程度理解しております。

  • どこからがAjaxと呼ばれるものかわかりません。

    質問タイトルが漠然としたものですが。。。 たとえば、「Google maps」はページをリロードすることなく、 地図内で位置を自由に移動させることができる、というので イメージがしやすいです。 ただ、prototypeやjQuery等のJavaScriptライブラリなども Ajaxと呼ばれていたり・・・。 どういう部分がAjaxなのかがわかりません。 ライブラリのプラグイン？の機能によってこれはAjaxでこれは違う、 なんてことはあるでしょうか？ 例えば「Lightbox」はAjaxで、「アコーディオンメニュー」なんかは、 違う、とか。 なんだかAjaxという技術がどういうものであるのか自分の中で曖昧でよくわかりません。 （必ずしもXMLが使われている、とも限らないのでしょうか？） わからないまま質問をしているため、支離滅裂ですみません・・・ どうぞ宜しくお願いいたします。

    • ベストアンサー
    • AJAX
  • googleマップにajax

    googleマップにajax、php、mysqlを使って複数マーカを表示したい場合 googleマップの地図をマウスで動かすごとにmysqlのSqlを実行しデータ を抽出してgoogleマップに表示しているのでしょうか。

    • ベストアンサー
    • AJAX
  • Ajaxの動き

    googleと本で調べたのですが、今いちわからないため質問させてください。 (1)教科書から、Ajaxは、XMLをJavascriptでやり取りしている非同期通信という定義なのはわかりましたが、結局、AJAXを使うということは、HTMLに、<Script>のタグで、JQueryなどのパスを書くということなのでしょうか？ AJAXは概念的なものであって、プログラムやモジュールそのものではないと捉えています。 (2)Ajaxによる非同期通信は、何をきっかけとして通信が始まるのでしょうか？ 通常は、FORMがSUBMITされたときに、サーバにリクエストがいくという認識ですが そもそも、Ajaxは、何をイベントとしてハンドルしているのでしょうか？（何をきっかけに処理が始まっているのでしょうか？） HTMLに、<Script>のタグで、JQueryのパスを書くと、ハンドルする機能が使用されるのでしょうか？ Ajaxでも「リクエスト」は行われているけれども、処理結果として戻されるものがXML形式であるだけだという理解で良いのでしょうか？

    • ベストアンサー
    • AJAX
  • どこまでがAjaxなの？

    現在、Ajaxを勉強中の初心者です。 質問のタイトル通りなのですが、どこまでがAjaxなのかイマイチわかりません。 AjaxはJavaScript + XMLで非同期通信をする技術ですが １．画像やプログラムファイルをサーバPC側に入れておいてクライアントPC側でラジオボタンの選択によって画像表示を変えるのはAjaxですか、それともただのJavaScriptですか？ ２．サーバを使って以下のような入力可能文字カウンタを表示させるのはAjaxですか、それともただのJavaScriptですか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>文字のカウント</title> </head> <body> <form> 　　<textarea cols="46" rows="5" id="title1" name="title1" size="50"></textarea><br /> 　　あと<span id="inputlength1">20</span>文字入力できます<br /> </form> 　　<script type="text/javascript"><!-- 　　　　function lengthCounter (node, max, cut) { 　　　　　　max = max || Number (node.maxLength) || 20; 　　　　　　return function () { 　　　　　　　　var rest = max - node.value.length; 　　　　　　　　　　if (rest < 0) { 　　　　　　　　　　　　if (cut) { 　　　　　　　　　　　　　　alert ('20文字以内にしてください'); 　　　　　　　　　　　　　　rest = max; 　　　　　　　　　　　　　　node.value = node.value.substring (0, max); 　　　　　　　　　　　　} 　　　　　　　　　　} 　　　　　　　　　　return rest; 　　　　　　}; 　　　　} 　　　　function dispValue (node, cbFunc) { 　　　　　　return function () { 　　　　　　　　node.firstChild.nodeValue = cbFunc (); 　 }; 　　　　} 　　　　setInterval (dispValue ( document.getElementById ('inputlength1'), 　　　　lengthCounter (document.getElementById ('title1'), 20, true)), 100); 　　// --></script> </body> </html> ３．「googleサジェストのインクリメンタル検索にはAjaxの技術が利用されている」←ここでのAjaxにはPHPも含まれますか？ 私はPHPをAjaxの枠には入れないような気がします。正確にはPHPとAjaxでインクリメンタル検索機能がつくられていると思うのですが。 ４．PHPのみでAjaxと同じ非同期通信ができればそれはAjaxと呼ぶのか？ よろしくお願いします。

    • ベストアンサー
    • AJAX
  • $.ajax({　って何ですか？

    javascriptとajaxを現在勉強中です。 フリーのソースをダウンロードしたら、 function writeComment(params) { $.ajax({ type: "<?php print METHOD; ?>", url: writescript+params, success: function() { // 受信完了イベント main.php window.mainframe.getLog(); } }); } 「$.ajax({」の使い方が、調べたのですがわかりません。 Ajax.Requestという意味なのは、なんとなくわかるのですが・・。 こういう書き方もあるのでしょうか？ どなたかご教授お願い致します。

  • ajaxで生成したコンテンツ

    google botなどはjavascriptで生成したhtmlも収集しますよね？ javascriptでタイムラグなしに生成したhtmlならば収集するのはわかるのですが、私のサイトはメインコンテンツがajaxで生成しています。 生成するのに1～3秒かかりますがそれでもgoogle botなどの検索エンジンはそれらも取得してくれるのでしょうか？ よろしくお願いします。

    • 締切済み
    • SEO
  • Ajaxの意味について

    最近、話題になっているAjaxですが、それぞれの言語の役割と意味について教えてください。キーワードはJavaScript,PHP,SQL,XML,JSON,Perl,google mapsなどなど、Ajaxに関連して耳にする言葉をそれぞれ関連させて説明していただきたいです。お願いします。ちなみにキーワードで出したすべてを説明していただかなくてけっこうです。

  • Ajax⇒CGI

    JavaScriptは結構知ってますが、 AjaxとPerlに関しては初心者のものです。 早速ですが質問です。 Ajaxで送信したデータをCGI（Perl）で処理して、 サーバーのテキストに保存する方法が良く分かりません。 サーバーはCGIを許可しているところを使っています。 どなたか詳しい方、ご教授お願いします！

  • AjaxとJava

    私はAjaxの勉強をしようと思っています。 そのため、簡単なサーバ側はJavaのアプリケーションを作って学ぼうと思ったのですが、どうやって通信すればよいかよくわかりません。 一応わからないなりにいろいろ方法を考えてみたのですが、どれも疑問点があります。 (1)、サーバをJavaで作成して、Ajaxと通信する方法 (2)、JSPを使って、Ajaxと通信する方法 どちらの方法も、 (1)どうやってAjaxからの（正確にはJavaScriptからの）リクエストを受け取って、値を取り出したらいいか (2)どうやってサーバからJavaScriptにデータを送るのか がわかりません（送るパケットは極めてシンプルなもの、たとえば数字とか文字列がいいです）。 入門サイトはほとんどのサーバ側はPHPで作っているので、あまり参考にならないと考えています。 なにか参考になるようなサイトなどはないでしょうか？ お返事お待ちしております。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する