AJAX は、次のようなことができる開発者の夢です:
全ての章において、オンラインで例を編集し、ボタンをクリックすることで結果を確認することができます。
<!DOCTYPE html>
<html>
<body>
<div id="demo"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadDoc()">Change Content</button>
</body>
</html>
HTML ページには、<div> セクションと <button> が含まれています。
<div> セクションは、サーバからの情報を表示するために使用します。
<button> をクリックすると、関数を呼び出します。
関数は、web からのデータを要求し、それを表示します:
function loadDoc() {
var xhttp = newXMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}