Ajax のパワーを明らかにする

Ajax の機能を明らかにします。具体的なコード例が必要です。

Ajax (Asynchronous JavaScript and XML) は、Web ページ上での非同期データ対話に使用されるテクノロジです。これにより、ページ全体を更新せずに、サーバーと対話し、データを取得し、Web ページの特定の部分を更新することができます。 Ajax の登場は、ユーザー エクスペリエンスを向上させ、Web ページのダイナミクスと応答速度を向上させる上で重要な役割を果たしています。この記事では、Ajax の機能を明らかにし、読者が Ajax をよりよく理解して使用できるように、具体的なコード例を示します。

まず、Ajax の基本的な使い方を見てみましょう。 HTML ページでは、JavaScript の XMLHttpRequest オブジェクトを通じて非同期リクエストを送信できます。以下は簡単なコード例です。

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  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();
}

上記のコードは、まず XMLHttpRequest オブジェクトを作成し、次にサーバーが応答を返したときに呼び出されるコールバック関数 onreadystatechange を設定します。 readyState が 4 (サーバーの応答が完了したことを示す) で、status が 200 (成功を示す) の場合、コードはサーバーから返されたデータを ID ## で表示します。 #demo 要素。

次に、Ajax の重要な機能であるコンテンツの動的な読み込みについて見ていきます。 Ajax を使用すると、ページ全体を更新せずに、サーバーから他のページのコンテンツを読み込むことができます。以下は、Ajax を使用してコンテンツを動的にロードする例です。

function loadContent() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("content").innerHTML = this.responseText;
    }
  };
  var pageUrl = "news.html";
  xhttp.open("GET", pageUrl, true);
  xhttp.send();
}

上記のコードでは、GET リクエストが

XMLHttpRequest オブジェクトを通じて送信されます。 # ロードされる変数はページの URL です。サーバーから返されたページ コンテンツは、ID content を持つ要素に表示されます。 さらに、Ajax はサーバーと通信してデータを取得することもできるため、Web ページは更新せずにリアルタイムでデータを更新できます。以下は、Ajax を通じてサーバー データをリアルタイムで取得する例です。

function updateData() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var data = JSON.parse(this.responseText);
      document.getElementById("data").innerHTML = data.value;
    }
  };
  var url = "data.json";
  xhttp.open("GET", url, true);
  xhttp.send();
}

// 每隔一段时间调用updateData函数
setInterval(updateData, 5000); // 每5秒更新一次

上記のコードを通じて、ページは 5 秒ごとにサーバーからデータを取得し、ID

にデータを表示します。 data

要素。これにより、リアルタイムにデータを更新する効果が得られます。

Ajax は、GET リクエストに加えて、POST リクエストもサポートします。 POST リクエストは、フォーム データをサーバーに送信するためによく使用されます。以下は、Ajax を使用して POST リクエストを送信する例です。

function postData() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var response = this.responseText;
      document.getElementById("result").innerHTML = response;
    }
  };
  var data = new FormData();
  data.append('username', 'john');
  data.append('password', '123456');
  xhttp.open("POST", "login.php", true);
  xhttp.send(data);
}

上記のコードでは、送信する必要があるデータを保存するために

FormData

オブジェクトが使用されています。 open 関数の 3 番目のパラメーターが true に設定されている場合、リクエストは非同期、つまり Ajax リクエストになります。

上記のコード例を通じて、読者は Ajax の機能についてより深く理解できると思います。ブラウザーの互換性を確保するために、jQuery などの JavaScript ライブラリーを使用して Ajax 操作を簡素化できることに注意してください。

要約すると、Ajax は強力であり、コンテンツを動的にロードし、リアルタイムでサーバー データを取得し、フォームを送信するのに役立ちます。 Ajax を使用することで、Web ページの対話性と応答速度が向上し、ユーザーにより良いエクスペリエンスを提供できます。この記事の具体的なコード例が、読者の Ajax テクノロジの理解と使用に役立つことを願っています。

以上がAjax のパワーを明らかにするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。