AJAX チュートリアル

❮ ホームへ 次章へ ❯

AJAX は、次のようなことができる開発者の夢です:


全章における Try it Yourself の例

全ての章において、オンラインで例を編集し、ボタンをクリックすることで結果を確認することができます。

AJAX 例

Let AJAX change this text

Try it Yourself »


AJAX 例の説明

HTML ページ

<!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 からのデータを要求し、それを表示します:

関数 loadDoc()

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();
}

AJAX の学習を始めましょう!


❮ ホームへ 次章へ ❯