通常は一部でも変更が加わるとページの全てを再読み込みしますが、ajaxを利用すると、変更を加えた部分だけが再読み込みされるところまでは理解しています。分からないところは、各プログラムへの動作がajaxを使った後の場合と通常の場合ではどのように違うのかです。下記のような考え方で正しいですか？説明が下手で読みにくく申し訳ないですが、アドバイスをいただけたら嬉しいです。お願いします。 ■htmlは、実行を起こした部分を含めその子要素全てが再読み込みの対象に。例えば、↓の～この間にある子要素の全てが再読み込みされる。それ以外のhtmlやcssは再読み込みされない。 ■cssは、htmlと同じで、その部分で使われているcssが対象。 ■javascriptは、ajaxの場合と通常の場合で違いはなく、常に全てが再読み込みされる(外部ファイル、記述の位置に関係なく)。 ■jquery、php、mysqlも、javascriptと同じで何一つ変わりなく通常通りに動く。～～～その他様々な処理～

こんにちは。何も難しく考えることはなく、読み込んだ対象のみ処理されると考えれば良いのではないでしょうか。例えば例のPHPであれば内の処理はアクセスされた時にサーバ側で処理をしてHTMLとして返します。その時外部のCSSやJavaScriptを読み込みます。次にonclickでAjaxの処理が走った場合、例えばJSONデータを読み込んでに表示するような処理の場合はそのJSONのみ読み込みます。 (他は何も変わらない) なのでそのJSONを表示する処理で利用するCSSはそこで同時に任意のCSSを動的に設定するか、もともと読み込んだCSSに含まれていないと適用されないと思います。上の方でおこなっているmySQLへ接続したりetcは実行されません。言葉で説明するのが難しく伝わらなかったらすみません。

ajax後、php,mysqlも一部再読み込み？

解決済

質問者：juju-juju
質問日時：2012/05/28 23:22
回答数：1件

通常は一部でも変更が加わるとページの全てを再読み込みしますが、ajaxを利用すると、変更を加えた部分だけが再読み込みされるところまでは理解しています。
分からないところは、各プログラムへの動作がajaxを使った後の場合と通常の場合ではどのように違うのかです。
下記のような考え方で正しいですか？説明が下手で読みにくく申し訳ないですが、アドバイスをいただけたら嬉しいです。お願いします。

■htmlは、実行を起こした部分を含めその子要素全てが再読み込みの対象に。
　例えば、↓の<div#ajax>～</div>この間にある子要素の全てが再読み込みされる。それ以外のhtmlやcssは再読み込みされない。
■cssは、htmlと同じで、その部分で使われているcssが対象。
■javascriptは、ajaxの場合と通常の場合で違いはなく、常に全てが再読み込みされる(外部ファイル、記述の位置に関係なく)。
■jquery、php、mysqlも、javascriptと同じで何一つ変わりなく通常通りに動く。

<?php
・includeで外部ファイルを取得
・様々な処理
・mysqlに接続して様々な処理
?>
<html>
<head>
<script type="text/javascript" src="外部ファイルでajaxを記述"></script>
<title></title>
</head>
<body>
<?php
・様々な処理
?>
<div id="main">
　<div id="a">
　　　<dl>～</dl>
　</div>

　<div id="ajax" onclick="ajaxの処理へ">
　　　<table>～</table>
　　　<ul>～</ul>
　　　その他様々な処理
　</div>

　<p>～</p>
　<img src="">
</div>
<script type="text/javascript">
</script>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： LancerVII
回答日時：2012/05/29 08:49

こんにちは。

何も難しく考えることはなく、読み込んだ対象のみ処理されると考えれば良いのではないでしょうか。
例えば例のPHPであれば<?php　?>内の処理はアクセスされた時にサーバ側で処理をしてHTMLとして返します。
その時外部のCSSやJavaScriptを読み込みます。

次にonclickでAjaxの処理が走った場合、例えばJSONデータを読み込んで<div id="ajax"></div>に表示するような処理の場合はそのJSONのみ読み込みます。
(他は何も変わらない)
なのでそのJSONを表示する処理で利用するCSSはそこで同時に任意のCSSを動的に設定するか、もともと読み込んだCSSに含まれていないと適用されないと思います。
上の方でおこなっているmySQLへ接続したりetcは実行されません。

言葉で説明するのが難しく伝わらなかったらすみません。

- 0
- 件

通報する

この回答へのお礼

いろんなサイトをみていてDOMを配列として取得し、それをcheckajax()のinnerHTMLで入れ込んだ時に
valueしか取得していなくてinnerHTMLに入れただけでちゃんとできるのか、
再度phpとmysqlが動くのはvar URLクエリストリングを指定しているので通常通りに動くのですか。
あと、「全１３件、1ページ目」といったものがあり5ページ目を押すとajaxを使ってなかったり
他の部分では使ってたり…なぜ全てにajaxを使わないのか、何か欠点があるのでは？と疑問ばかりあります。

<div id="ccc">
<select onchenge="ajax()" id="dom0">
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>

<ul onclick="ajax()" id="dom1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

function クロスブラウザ対策｛
｝

function ajax(){
domdata = getdom();
var dom0 = domdata[0];
var dom1 = domdata[1];
var URL = "同じページのURLに?以降に配列domdataを指定";
dom = クロスブラウザ対策();
dom.onreadystatedom = checkajax;
dom.open("GET", URL, true);
dom.send(null);
document.getElementById("ccc").innerHTML = "読み込み中";
}

function checkajax(){
if (dom.readyState == 4 && dom.status == 200) {
var domlist = dom.responseText;
document.getElementById("ccc").innerHTML = domlist;
} else {
return;
}
}

function getdom(){
var domdata = new Array();
domdata[0] = document.getElementById("dom0").value;
domdata[1] = document.getElementById("dom1").value;
return domdata;
}