最新のWeb開発のチュートリアル
 

AJAXチュートリアル


することができますので、AJAXは、開発者の夢です。

  • ページをリロードせずにWebページを更新します
  • サーバーからのリクエストデータ - ページが読み込まれた後
  • サーバーからデータを受信 - ページが読み込まれた後
  • サーバにデータを送信する - バックグラウンドで

すべての章の例では、それを自分で試してみてください

すべての章では、オンラインの例を編集することができ、その結果を表示するには、ボタンをクリックしてください。

AJAXの例

Let AJAX change this text

»それを自分で試してみてください


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 = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
     document.getElementById("demo").innerHTML = xhttp.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

今AJAXを学習開始!