JavaScript で AJAX を使用し、ページが更新されないようにする方法

Web サイトがますます複雑になり、より高度なユーザー エクスペリエンスが必要になるにつれて、AJAX (非同期 JavaScript および XML) テクノロジは Web サイトのフロントエンド開発に不可欠なスキルの 1 つになりました。ページ全体をリロードすることなく、JavaScript 経由でサーバーにリクエストを送信できます。これにより、Web サイトがより高速かつスムーズになり、ユーザーは中断を感じなくなります。この記事では、JavaScript で AJAX を使用し、ページが更新されないようにする方法について説明します。

1. AJAX と XMLHttpRequest

JavaScript で AJAX を使用するには、XMLHttpRequest オブジェクトを使用する必要があります。これは、XMLHttpRequest オブジェクトが非同期リクエストの実行の中核であるためです。 XMLHttpRequest オブジェクトは組み込み JavaScript オブジェクトであり、略して XHR とも呼ばれます。これは、HTTP プロトコルを介した非同期リクエスト用の API を提供し、ページ全体を更新せずにサーバー応答の取得、リクエストの処理、Web ページの更新を可能にします。

次は、XHR を使用してリクエストを行う簡単な例です。

let request = new XMLHttpRequest();
request.open('GET', '/api/data', true);
request.onreadystatechange = function() {
   if(request.readyState === 4 && request.status === 200) {
      let response = JSON.parse(request.responseText);
      // 处理响应并更新页面
   }
};
request.send();

上記のコードでは、XMLHttpRequest オブジェクト インスタンスを作成し、open() メソッドを使用して GET リクエストを開きます。 GET リクエストを開いた後、XHR オブジェクトの readyState 属性が変更されたときに呼び出される onreadystatechange イベントのハンドラー関数を設定し、サーバー応答のステータス コードが 200 であるかどうかを確認します。すべてがうまくいけば、応答テキスト (通常は JSON 形式) を解析し、ページ上の関連データを更新します。

2. jQuery の AJAX

jQuery を使用する場合、AJAX を使用するために内部でより単純化された API が抽象化されます。完全な jQuery AJAX の例は次のとおりです。

$.ajax({
   url: '/api/data',
   type: 'GET',
   dataType: 'json',
   success: function(data) {
      // 成功后更新页面
   }
});

上記のコードでは、jQuery の $.ajax() メソッドを使用して GET リクエストを送信し、成功するとハンドラー関数を実行します。 XMLHttpRequest オブジェクトを使用する場合と同様に、success 関数でページのコンテンツを更新できます。

3. AJAX を使用したページ コンテンツの更新

AJAX リクエストが正常に応答を返したら、JavaScript を使用してページ上のコンテンツを更新し、新しいデータを反映することができます。 。以下は簡単な例です:

function updatePage(response) {
   let div = document.getElementById('data-display');
   let html = '';
   response.forEach(function(item) {
      html += '<div>' + item.name + '</div>';
   });
   div.innerHTML = html;
}

上記のコードでは、ページのコンテンツを更新する updatePage() 関数を定義します。まず、ID が「data-display」の div 要素を検索し、内部で HTML 文字列を構築し、その文字列をその要素の innerHTML に設定します。

4. 重複リクエストの回避
#​​

##AJAX は非同期で実行されるため、ユーザーは複数の同一または異なるリクエストを継続的に開始する可能性があり、その結果、これらのリクエストが大幅にインターリーブされることになります。同時実行の問題と過度のサーバー負荷が発生します。したがって、AJAX リクエストを送信するときは、リクエストの重複を避けるように注意する必要があります。

リクエストの重複を避ける 1 つの方法は、タグ (またはフラグ) 変数を使用して、前のリクエストが完了したかどうかを確認することです。例:

let requesting = false;
function makeRequest() {
   if(requesting) {
      return;
   }
   requesting = true;
   $.ajax({
      url: '/api/data',
      type: 'GET',
      dataType: 'json',
      success: function(data) {
         updatePage(data);
      },
      complete: function() {
         requesting = false;
      }
   });
}

上記のコードでは、変数「requesting」を使用して、リクエストが発行されたかどうかを識別します。複数のリクエストを避けるために、リクエストの送信を開始する前に、まずこの変数のステータスを確認します。変数が true の場合は戻り、新しいリクエストは送信されません。リクエストが成功または失敗した場合、完全なコールバック関数で変数を false にリセットして、新しいリクエストを許可します。

AJAX を使用した動的フォームの実装

AJAX の最も一般的なシナリオの 1 つは、ページ全体を更新せずに動的フォームを通じてデータを送信し、サーバーの応答を取得することです。以下は、jQuery を使用して動的フォームを実装する例です。

<form id="my-form">
   <input type="text" id="name" name="name" placeholder="Your name">
   <button type="submit">Submit</button>
</form>
<div id="result"></div>

<script type="text/javascript">
   $("#my-form").submit(function(e) {
      e.preventDefault();
      let $form = $(this);
      let url = $form.attr('action');
      let formData = $form.serialize();
      $.ajax({
         type: "POST",
         url: url,
         data: formData,
         dataType: 'json',
         success: function(response) {
            $('#result').html("Thank you, " + response.name + "!");
         }
      });
   });
</script>

上記のコードでは、フォームを定義し、それに送信イベントをバインドします。ユーザーがフォームを送信すると、serialize() メソッドを使用してフォーム データを収集し、それを AJAX リクエストのデータとしてサーバーに送信します。サーバーが正常に処理して JSON 応答を返した場合、ページ上の ID「result」を持つ div 要素を応答内のデータで更新します。

結論

ご覧のとおり、AJAX を使用すると、サーバーとのデータの送受信がより簡単かつ快適になります。この記事では、JavaScript で AJAX を使用して、ページ全体を更新せずに非同期リクエストを送信し、コンテンツを更新する方法について説明します。最後に、重複したリクエストを回避し、動的なフォーム送信を実装する方法について説明しました。 AJAX は、Web サイトをより高速かつスムーズにし、ユーザー エクスペリエンスを大幅に向上させる非常に便利なテクノロジーです。

以上がJavaScript で AJAX を使用し、ページが更新されないようにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。