Ajaxの動きを解説します

2023/10/27 10:17

このQ&Aのポイント

Ajax（非同期通信）は、XMLをJavascriptでやり取りする概念であり、HTMLにスクリプトタグでパスを書く必要があります。
Ajaxによる非同期通信は、通常はフォームの送信がキックとなり、サーバにリクエストが送信されますが、具体的なイベントはHTMLのスクリプトタグでハンドルされます。
Ajaxでは、リクエストが行われ、戻ってくる結果はXML形式で返されますが、ただし処理結果としてのみとなります。

ベストアンサー

Ajaxの動き

2013/03/18 00:06

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

TeferiMage
お礼率99% (215/217)

AJAX
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

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

ベストアンサー

b0a0a
ベストアンサー率49% (156/313)

2013/03/18 03:10 回答No.2

Ajaxは「Asynchronous JavaScript + XML」の略なので本来XMLHTTPRequestを使った非同期通信を指す言葉でしたが言葉の乱用によって今では「JavaScriptで通信を行い動的に表示を切り替えるもの」というくらいのニュアンスのものになってしまいましたですが基本はJSからXHRを用いること（だと信じたい）です XHRを使った通信は、xhr.sendが呼ばれた時に開始されます通常のページ遷移時のリクエストですと、レスポンスがブラウザによって解釈され、ページが表示されますが、XHRではJavaScriptで受け取りますまた、最近のXHRはXMLという名前に反しバイナリでも受信することができます

質問者

お礼 2013/03/20 05:40

XHR自体を知らなかったので、調べる機会になって助かりました！ありがとうございます。

その他の回答 (1)

Gotthold
ベストアンサー率47% (396/832)

2013/03/18 00:31 回答No.1

>結局、AJAXを使うということは、HTMLに、<Script>のタグで、JQueryなどのパスを書くということなのでしょうか？ JavaScriptのプログラムを書くことになります。 > AJAXは概念的なものであって、プログラムやモジュールそのものではないと捉えています。 AJAXはテクニック（技術、手法）なので、たしかにプログラム言語やモジュールそのものではないですね。 > そもそも、Ajaxは、何をイベントとしてハンドルしているのでしょうか？普通にJavaSciptのイベント。クリックとかタイマーとか。 JavaScriptプログラミングやってるときにサーバーとのやりとりが必要なところでAJAXでデータとってくると言うだけです。 > Ajaxでも「リクエスト」は行われているけれども、処理結果として戻されるものがXML形式であるだけだという理解で良いのでしょうか？リクエストを行う際にページ遷移が発生しないところが一番重要。形式はXML以外を使うことも珍しくない。

質問者

お礼 2013/03/20 08:17

自分は、JQueryと、AJAXの違いがよくわかっていないとわかりました。もう少し調べてみます。

関連するQ&A

JQueryはAJAXとは無関係？？
質問◆JQueryおよびJQueryMobileは「AJAX」とは無関係なのでしょうか？「JQueryMobileを使っているとき、DOMによってHTMLを動的に差し替えている」という認識なのですが、特にRequest関連の記載をJavaScriptで記載していない限り、AJAXの処理は行われないのでしょうか？それとも、 JQuery Mobileを使っている場合は、ページ遷移などで、プログラマが意識していなくても（独自にプログラムを書いていなくても） AJAXの処理が行われているのでしょうか？ /************************************/ サーバへのリクエストはなくても、１つのマシン内の、HTMLファイルとHTMLファイルの間で、 HTTPで通信がされるということはないと思っています。（※基本、HTTPはクライアントとサーバの間のときしか使われないのですよね？） JQueryの技術情報のサイトを見ていると、よく「document.ready」と書かれていたりするソースを見かけますが、これはAjaxとは関係なく（通信とは関係なく）、また「xhr.send」も書かれていないHTMLは、AJAXは使われないという理解です。（「Form、submit」とも関係がない） XMLHttpRequestも「HttpRequest」とあるわけですし、「Form、submit」を書いているときに行われるわけではないけれども、かわりに、「xhr.send」とJavaScriptで実行されたタイミングで走る処理であり、その際、「サーバから返される情報がXMLのデータ形式で(XML以外もですが、、)」だという理解なのですが、合っていますでしょうか？
- ベストアンサー
- AJAX
Ajaxを使った読み込みができない
●質問の主旨 Ajax（非同期通信）を使って、ブラウザ上でテキストファイルの読み込みをさせたいのですが、できません。 Ajaxにお詳しい方、ご指導願います。 ●質問の補足 HTML5とjqueryの技術を使って、テキストファイルの中身（Hello,World)の読み込みをさせたいと考えております。参考サイトにもとづいてやってますが、画像の表示ができません。表示させるためにはどうしたら良いでしょうか？ ●コード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQueryの練習</title> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> </head> <body> <h1>jQueryの練習</h1> <div id="main"></div> <input type="button" id="kick_ajax" value="Ajax!"> <script> $(function() { $('#kick_ajax').click(function() { $('#main').load('contents.txt', function() { alert('読み込み終了！'); }); }); }); </script> </body> </html> ●テキストファイルのファイル名 contents.txt ●参考サイト（ドットインストール） http://dotinstall.com/lessons/basic_jquery/519
- ベストアンサー
- AJAX
AjaxとPHPの連携について
AjaxからPHPにHTTPリクエストし、PHP側でXMLの処理をさせてAjaxにXMLのデータを返す処理ができません。 PHP側でXMLをAjaxに返す時、どのようなコードで書けばよろしいですか？
- 締切済み
- AJAX
jQuery1.9.1でajax応答処理が動かない
お世話になります。 jQuery1.9.1でajaxを使用したいのですが、表題の通りresponse受信時の処理が動かず困っています。（下記コード抜粋で"test2"が表示されません。）自分でも調べてはいるつもりですが、知識不足で何をどう調べた物かも分からず成果が上がらないため、何か助言を頂ければと思い投稿致します。＜問題＞ jQueryを使用してajax通信を行うコードがあるが、サーブレットからの応答受信時の処理が実行されない。＜備考＞・同じソースコードを使用し、正常に動作する環境もあるため、　プログラム上のバグではなく環境構築の問題と思われる。・今日までjavaとjavaScriptの区別もつかなかった人間(私ですが)が環境構築しているので、　初歩の初歩でポカをやらかしている可能性は十分あり。・ajaxによるリクエスト送信とサーブレット側は動くことをデバッガで確認済み。＜環境＞ windows7 apache-tomcat 7.0.42 JDK 7u25 eclipse Java EE IDE(ver: kepler release / build id:20130614-0229) jQuery 1.9.1 jQuery-ui 1.10.3 ＜コード抜粋＞・java script側 <script src="//code.jquery.com/jquery-1.9.1.js" ></script> <script src="//code.jquery.com/ui/1.10.3/jquery-ui.js" ></script> 　～省略～ <script> $(function() { $('#test-form').on('submit',function() { alert("test1"); $.ajax({ url: "${pageContext.request.contextPath}/test", type: "POST", data: { inputStr: $('#test-form').find('input[name="testInput"]').val(), }, }).done(function (data, textStatus, jqXHR) { alert("test2"); }); return false; }); }); </script> ・サーブレット側 { String inputWork = request.getParameter("inputStr"); 　～省略～ StringBuilder stringBuilder = new StringBuilder(); stringBuilder.append("<result>"); stringBuilder.append("OK"); stringBuilder.append("</result>"); String xmlString = stringBuilder.toString(); response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); Writer writer = response.getWriter(); writer.write(xmlString); writer.flush(); }
- ベストアンサー
- Java
ajax通信の戻り値が空になる。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="jquery.xdomainajax.js"></script>  <script type="text/javascript"> $.ajax( { url: URL, type: 'GET', cache: false, dataType: 'xml' } ) .done(function(res) { console.log(res); } ) .fail(function(res) { console.log('FAIL') } ); </script> </head> 上記のコードの通り（url部分は明記を省略）、jquery.xdomainajax.jsを用いたajax通信を行いたいのですが、通信は成功しているもののコンソールを見ると以下のようになっています。 Object { query: Object, results: Array[0] } 本来ならresultsの部分に返り値が格納されるのですが、空になってしまいます。なにか原因があればご教授頂きたいです。よろしくお願い致します。
- 締切済み
- AJAX
Jqueryのajaxを用いてHTMLの読み込み
こんにちは。 Jqueryのajaxで広告向けのJavaScriptが記述されたｈｔｍｌを取得し、関数【$("#ID").html(ｈｔｍｌソース);】を用いて、HTMLを読み込んだ際に、それに記述されているJavaScriptが動作してくれません。読み込むHTMLに記述されているJavaScriptは以下です。 <script type="text/javascript" src="//xml.affiliate.rakuten.co.jp/widget/js/rakuten_widget.js"></script> ご存知の方がいらっしゃいましたら、教えて頂きたいです。
- 締切済み
- JavaScript
AJAXの質問
これからAjaxに挑戦しようとするプログラマーです。 Ajaxの基本的なことについて教えてください。私は某メーカーの情報システム課員です。近年は情報の一元化を推進ということで、社内のインフラを整備するため様々な案件を進めてきました。案件によりACCESSなどですませる場合もありますが、基本的な開発環境は以下の環境です。 ○ASP(VBScript) ○Oracle 別にプログラムに自信があるわけではありませんが、案件をこなすうちにVBScriptやJavascriptも納得いく程度書けるようになりました。そこで次の案件では、JQueryとAjaxを用いた開発に挑戦したいと思っております。一番やりたいことは、Ajaxの利点であるサーバーとの非同期通信です。 AjaxではXML文書を非同期にやりとりするようですが、やりたいことはOracleのデータを非同期にやりとりしたいです。このようなことは可能なのでしょうか？
- ベストアンサー
- AJAX
ajax反映後のjqueryが動かない
色々と簡略化してますが、以下のようなajaxを交えたコードを書いています。 <script type="text/javascript"> $(function() { /* 初期変数処理 */ ............ /* HTML内object操作 */ ............ /* ある箇所をclickでイベント */ $('#hoge').click(function(e)　←(1)画面アニメーション { test3(); } /* 数秒後に(1)を自動実行 setInterval(function(){ ...... } /* formを使って検索 */ $('#form').submit(function(event) { event.preventDefault(); ........(中略) $.ajax({ type:"POST", url: "hoge.php", data:{data: data}, timeout: xxxxx, beforesend: { ........ }, complete: { ........ } success: function(data){ ......... ← (2)HTML内object操作、jquery部分は避ける test2(); } }); return false; }); function test1(){ ........ }; function test2(){ ........ }; function test3(){ ........ }; }); </script> [HTML] <form id = "form"> <input name="list"/> <button>送信！</button> </form> <div id="hogehoge"> ................. ←(3)検索で内容変更する箇所 </div> としているのですが、一度送信ボタンを押して(2)の処理を行った後、 (1)のアニメーションも含め、すべてのjquery要素が使用できなくなってしまいました。 http://semooh.jp/jquery/api/events/live/type,+fn/ によればliveを使えばclick処理はできるとありましたが、これでも動きません。 setIntervalの効果や、submitイベントすら動きませんでした。なお、検索前は問題なく動作します。通常時は問題ないのですが、submit後からおかしいので、 ajaxに関してなにか見逃している箇所があるとは思うのですが、どこが悪いのかはっきりと検討がついていません。どなたかお知恵をお貸しいただけませんでしょうか。宜しくお願いします。
- ベストアンサー
- JavaScript
Ajaxについて教えてください。（定義と実装方法について）
Ajaxについて教えてください。（定義について） http://www.atmarkit.co.jp/fwcr/rensai/imasara03/imasara03_1.html （サンプル集） http://jsajax.com/default.aspx 【定義について】＞＞Ajaxは略語で、正式名称は「Asynchronous JavaScript ＋ XML」となります。Asynchronousは「非同期」という意味とされいるようなのです。他にも調べてみると、「Javascriptを使い，Webページとは非同期（Asynchronous）にXML形式（もしくはテキスト形式）のデータ通信を行う手法」といった風にかかれています。この「Webページとは非同期」という部分がわからないのですが、どういったものを指しているのでしょうか？【実践方法について】　Ajaxの実装はどういった手順で行うものなのでしょうか？　参考でみたホームページで、ライトボックスをみて感動したので、早速使ってみたいと思いました。いざAjaxサンプルページに載っている、ライトボックスのコードをコピー＆ペーストで、自分のＰＣ上で試してみたのですが、動かず悩んでいます。（汗）　調べていくうちに、ライブラリが必要なようなのですが、どのように実装することで、ライトボックスは使用できるようになるのでしょうか？　　AjaxサンプルのURLにjQueryを使い倒せ!ということから、jQueryという、Ajax用のライブラリがあるのでしょうか？
- ベストアンサー
- AJAX
Ajax.Requestについて
いつもお世話になっております。今回はAJAXについてお聞きしたいです。現在prototype.jsを使って同期通信をしようとしています。リクエスト部分のソースは以下のようです。 function AjaxLoad() { new Ajax.Request('abc.cgi', 　　　　　　　　{ 　　　　　　　　method : 'post', 　　　　　　　　asynchronous : false, 　　　　　　　　 } 　　　　　　　　) response = transport.responseText; hyouzi(response); } abc.cgiというものは処理をして値を返すcgiです。同期通信したのちにその返された値をhyouzi();で使いたいです。ここでこのAjaxLoad()を呼び出すとtransportはありませんというようなerrorが出ます。それ以前にabc.cgiを呼んでいるような感じがしません。上記のような処理をしたい場合はどのように記述すればよいのでしょうか？ご教授願います。
- ベストアンサー
- JavaScript

Ajaxの動きを解説します

Ajaxの動き