- ベストアンサー
Ajax jQuery HTML5 って全部一緒？
素人質問ですいません！ Webディレクターを目指しているのですが、FLASHっぽいアニメーションを最近ではiPadなどに対応させる為に、AjaxやらjQueryとかHTML5とかで実現できると良く話を聞きます。 JAVA Script と CSS をつかって実現しているとか？色々な技術が組み合わさっているとか？？ そもそもAjax=jQuery？など、用語同士の親子関係も解りませぬ。 色々とネットで見てみたのですが、読んでいるとすぐに専門的な話に潜り込んでしまって解らないので、どなたか、まぁるく、やさしく、解説をお願い出来ませんでしょうか？
- neotrax
- お礼率72% (8/11)
- AJAX
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
まぁるく、やさしくということであれば、お書きのように、 ＞FLASHっぽいアニメーションを最近ではiPadなどに対応させる為に、AjaxやらjQueryとかHTML5とかで実現できる ＞JAVA Script と CSS をつかって実現している という理解で合ってます。ただ、HTML5はJavaScriptが必要というわけではないですが。 もちろん、ぜんぶそれぞれ別の言葉です。同じではありません。親子関係もありません。 AjaxはAタグのクリックによるページ遷移によらずにサーバと通信してページを更新するという概念。jQueryはJavaScriptのライブラリ。HTML5はHTMLの新しい規格です。 それ以上専門的な話に立ち入るつもりがないのであれば、それで十分だと思います。
関連するQ&A
- Jquery.ajaxでHTML読み込み
現在、Jquery.ajaxを使って外部HTMLの読み込み処理を行い、処理完了後にフェードで表示させるということをしているのですが、読み込んだHTMLに貼り付けてある画像が読み込まれる前にHTMLが表示されてしまい、困っています。 Jquery.ajaxでは内包されている画像の監視まではできないのでしょうか？ 下記が今作っているコードです。 $contest.css({ "opacity": 0 }); $.ajax({ type: "GET", url: "hoge.html" dataType: "html", success: function(data) { $contest.html($(data).find("#hoge")); }, complete: function() { $contest.stop().animate({ "opacity": 1 }, 1000, "easeOutCubic"); } }); おわかりになる方、ご教授お願いします。
- 締切済み
- JavaScript
- 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
- jqueryのアニメーションが動かない！！
$(".skinTitleArea").css("opacity","0"); $(function(){ $(".skinTitleArea").animate({"opacity","1"},500); }; って入れても動かない。 http://ameblo.jp/koko5666/ アメブロなのですが、append等はちゃんと反映されてるのでjquery本体は読み込まれてます。なのにアニメーションanimateが動かない。入れるとjqueryが読み込まなくなって、他の記述も反映されなくなる。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src="https://dl.dropbox.com/u/63681173/loveinstagram/jquery.common.js"></script> アニメーションが入ってるjavascriptは現在消してます https://dl.dropbox.com/u/63681173/loveinstagram/jquery.common.js
- ベストアンサー
- JavaScript
- jQueryでajax
ajax（jQuery使用）を使った以下のサンプルは、 セレクトボックスを選択すると、ボタンを表示するのですが、 そのボタンをクリックしても、アラート（This is success!）が表示されません。 ajaxで吐き出した<button>ボタン</button>のボタンのクリックイベントが 検知しないような感じですが、いったいどこが間違っているのかわかりません。 どなたか、ご教授いただけると助かります。 htmlソース ------------------------------------------- <meta http-equiv="content-script-Type" content="text/javascript" /> <meta http-equiv="content-style-Type" content="text/css" /> <link rel="stylesheet" href="./photo.css" media="all" /> <title> テスト</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { alert("Test is success!"); }); $(".first").change(function() { var param = ''; $.ajax ({ type: "POST", url: "ajax.php", data: param, cache: false, success: function(res) { $("#result").html(res); } }); }); }); </script> </head> <body> <select name="first" class="first" id="first"> <option value="1">項目１</option> <option value="2">項目２</option> </select> <p>結果：</p> <div id="result" style="width:808px;"></div> </body> </html> phpソース ---------------------------------------- <?php echo '<button>ボタン</button>'; ?>
- ベストアンサー
- 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
- HTMLをWordPress化 CSSをどこに？
HTMLをWordPress化にするための勉強をしています。 HTML側 CSS ヘッダー内 <link rel="stylesheet" href="css/test.css"> <link rel="stylesheet" href="css/test2.css"> JS ヘッダー内ではなく一番下</body>の前に配置 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <script src="js/test1.js"></script> <script src="js/test2.js"></script> ★これをfunctions.php に記述するにはどうすれば良いのでしょうか？ function sample_scripts() { // CSSの読み込み wp_enqueue_style( 'jdsa-style', get_template_directory_uri().'/css/test.css', array(), '1' ); wp_enqueue_style( 'jdsa-style', get_template_directory_uri().'/css/test2.css', array(), '1' ); // jqueryの読み込み wp_deregister_script( 'jquery' ); wp_enqueue_script( 'jquery', get_template_directory_uri().'https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js', array(), '1.10.3', true ); // サイト内のjsの読み込み wp_enqueue_script( 'jdsa-script', get_template_directory_uri().'/js/test1.js', array(), '1', true ); wp_enqueue_script( 'jdsa-script', get_template_directory_uri().'/js/test2.js', array(), '1', true ); }//ここまで 結果 ヘッダー内にtest.cssのみ記載、test2.cssは記載していない。 jsはどこにも記載していませんでした。 どこが間違っておりますか？ 宜しくお願いします。
- ベストアンサー
- PHP
- Ajaxの動き
googleと本で調べたのですが、今いちわからないため質問させてください。 (1)教科書から、Ajaxは、XMLをJavascriptでやり取りしている非同期通信という定義なのはわかりましたが、結局、AJAXを使うということは、HTMLに、<Script>のタグで、JQueryなどのパスを書くということなのでしょうか？ AJAXは概念的なものであって、プログラムやモジュールそのものではないと捉えています。 (2)Ajaxによる非同期通信は、何をきっかけとして通信が始まるのでしょうか？ 通常は、FORMがSUBMITされたときに、サーバにリクエストがいくという認識ですが そもそも、Ajaxは、何をイベントとしてハンドルしているのでしょうか？（何をきっかけに処理が始まっているのでしょうか？） HTMLに、<Script>のタグで、JQueryのパスを書くと、ハンドルする機能が使用されるのでしょうか？ Ajaxでも「リクエスト」は行われているけれども、処理結果として戻されるものがXML形式であるだけだという理解で良いのでしょうか？
- ベストアンサー
- AJAX
- jQuery・Ajaxについて教えて下さい。
jQueryを使用した「Tipped」というツールチップ作成フレームワークを使用しています。 「ツールチップの上にさらにツールチップを表示する」ということが出来ず困っております。 ドキュメント http://projects.nickstakenburg.com/tipped/documentation 特定のクラス名の文字にカーソルを当てると、Ajaxにより外部HTML(PHP)の内容が小窓で表示されるというものです。 これを使って外部HTMLの表示をすることはできたのですが、 ツールチップ内に表示されるHTMLの中にさらに同名のクラス名を埋め込み、 そこにカーソルを当てたとき二重（入れ子）でツールチップを表示するということをしたいのですが、 最初の１つしか表示されません。 ■読み込む側(A.php) ～ 必要なファイルの読み込み ～ <span class='tipped' data-tipped='B.php'>カーソルを当てると「B.php」の内容を表示</span> <script type="text/javascript"> jQuery(document).ready(function() { Tipped.create(".tipped", { ajax: true }); }); </script> ～ ■読み込まれる側（B.php) <span class='tipped' data-tipped='C.php'>ここにカーソルを当てて「C.php」の内容を表示させたい</span> A.phpからB.phpのツールチップを表示することはできました。 B.phpからC.phpのツールチップを表示することもできますが、 A.phpに表示したB.phpからはC.phpのツールチップが表示できません。 Ajaxを使わず、B.phpに静的なツールチップを埋め込んだ場合も表示できませんでした。 wordpressの記事ページで動作させています。 必要なjsファイルは読み込んでおり、ファイルはそれぞれ同じ階層にあります。 何が問題で表示できないのでしょうか。どうかご教示をお願いします。
- ベストアンサー
- JavaScript
- 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を使った読み込みができない
●質問の主旨 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
お礼
ありがとうございます！！！！とてもわかりました！