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生成という事ですか？
お礼
ご報告が遅くなり申し訳ありません。他のスクリプトも含め見直した結果、ご指摘のとおり別の箇所で記述ミスをしている事に気が付きました。ありがとうございました！