ajaxが難しいです。
１
if (xhr.status === 200) {
result.textContent = xhr.responseText;
の部分がわからないのですが
自分で作った変数resultの中に通信に両方成功した場合サーバ側のPHPが生成したDOM要素を代入するという事をやっているのでしょうか？
その結果、処理結果を表記するhtml<div id="result"></div>の中に、代入された中身が表記されるという事ですか？
２
下記のloadstartとloadなどう違うのでしょうか？
xhr.addEventListener('loadstart', function() {
// 画面に通信中と表記
result.textContent = '通信中...';
}, false);
// 画面に通信中と表記
xhr.addEventListener('load', function() {
result.textContent = xhr.responseText;
}, false);
下記ソース
・
<?php
sleep(3);
print('こんにちは、'.$_REQUEST['name'].'さん！');
print('こんにちは、'.$_REQUEST['name2'].'さん！');
?>
・
<!DOCTYPE html>
<html>
<head>
<meta name="robots" content="noindex,noimageindex,nofollow"><!-- Onlysample -->
<meta charset="UTF-8" />
<title>JavaScript本格入門</title>
</head>
<body>
<form>
<label for="name">名前：</label>
<input id="name" type="text" name="name" size="15" />
<input id="btn" type="button" name="submit" value="送信" />
<label for="name">名前2：</label>
<input id="name2" type="text" name="name2" size="15" />
<input id="btn2" type="button" name="submit" value="送信" />
</form>
<div id="result"></div>
<div id="result2"></div>
<script src="scripts/hello_ajax.js"></script>
</body>
</html>
// 非同期通信を行うための準備
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('btn').addEventListener('click', function() {
var result = document.getElementById('result');
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
result.textContent = xhr.responseText;
} else {
result.textContent = 'サーバーエラーが発生しました。';
}
} else {
result.textContent = '通信中...';
}
};
/*
xhr.addEventListener('loadstart', function() {
result.textContent = '通信中...';
}, false);
xhr.addEventListener('load', function() {
result.textContent = xhr.responseText;
}, false);
xhr.addEventListener('error', function() {
result.textContent = 'サーバーエラーが発生しました。';
}, false);
*/
xhr.open('GET', 'hello_ajax.php?name=' +
encodeURIComponent(document.getElementById('name').value), true);
xhr.send(null);
}, false);
document.getElementById('btn2').addEventListener('click', function() {
var result = document.getElementById('result2');
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
result.textContent = xhr.responseText;
} else {
result.textContent = 'サーバーエラーが発生しました。';
}
} else {
result.textContent = '通信中...';
}
};
/*
xhr.addEventListener('loadstart', function() {
result.textContent = '通信中...';
}, false);
xhr.addEventListener('load', function() {
result.textContent = xhr.responseText;
}, false);
xhr.addEventListener('error', function() {
result.textContent = 'サーバーエラーが発生しました。';
}, false);
*/
xhr.open('GET', 'hello_ajax.php?name2=' +
encodeURIComponent(document.getElementById('name2').value), true);
xhr.send(null);
}, false);
}, false);
最後に、クリックした際にJSでDOM生成して、新たな要素を表記することとajaxは、
閲覧者からすると同じように見えるのですが、
違いは、ajaxはブラウザ上で生成したのではなく、
サーバ側のPHPが生成したDOM要素をダウンロードして代入するという、違いでしょうか？
つまりサーバ側でDOMを作ったらajax、ブラウザ上で作ったらただのDOM生成という事ですか？
お礼
回答ありがとうございました。 ＞ファイルの読み込みが終了していない時点でoutput_result()が呼び出されてしまい、データは空っぽの状態のまま、出力処理が行われてしまう 基準となる点は、ページ読み込み時ではなく、ファイル読込終了時点なんですね。 if ((httpObj.readyState == 4) && (httpObj.status == 200))と書いている場所があったので、 その下で関数を呼び出したら、無事にデフォ表示されるようになりました。 大変参考になりましたー