Ajax イベントのエキスパートになるために学ぶべきこと: 基本から上級まで-jsチュートリアル-php.cn

Ajax イベントのエキスパートになるために学ぶべきこと: 基本から上級まで

PHPz

リリース： 2024-01-17 09:41:13

オリジナル

1124 人が閲覧しました

Ajax イベントのエキスパートになるために学ぶべきこと: 基本から上級まで

入門から習得まで: Ajax イベントを学習するための必須の知識

はじめに:
インターネットの急速な発展に伴い、フロントエンド開発は非常に重要なものになりました。人気のスキル。この分野では、Ajax (Asynchronous JavaScript And XML) は非常に重要なテクノロジであり、Web ページがサーバーと非同期で通信できるようになります。 Ajax イベントの学習はフロントエンド開発者にとって必須の知識の 1 つです。この記事では、Ajax イベントをエントリーからマスターまで段階的に紹介し、具体的なコード例を示します。

1. Ajax イベントとは
Ajax は、Web ページ全体を更新せずに、サーバーとの非同期通信によって Web ページのコンテンツの一部を更新する技術です。従来の Web ページリクエストと比較して、Ajax はよりスムーズで動的なユーザーエクスペリエンスを提供できます。 Ajax を使用する場合、最も一般的に使用されるイベントは onreadystatechange イベントです。

Ajax では、要求された状態が変化すると onreadystatechange イベントがトリガーされます。 readyState の値を判断することで、リクエストのステータスを知ることができます。一般的な readyState 値は次のとおりです:

0 (初期化されていない): リクエストが初期化されていないか、open メソッドが呼び出されていません
1 (オープン済み): open メソッドは呼び出されていますが、send メソッドは呼び出されていません。
2 (送信済み): send メソッドを呼び出しましたが、応答はまだ受信していません
3 (受信中): 応答データの一部を受信しました
4 (完了): すべての応答データを受信しました

readyState の値が 4 になると、responseText または responseXML 属性を使用して、サーバーの応答データを取得します。さまざまなリクエストの結果に応じて、onreadystatechange イベントで対応する操作を実行できます。

次は基本的な Ajax リクエストの例です。サーバーにリクエストを送信すると、サーバーから返されたデータがページに表示されます:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
  if(xhr.readyState === 4 && xhr.status === 200){
    var result = xhr.responseText;
    document.getElementById("result").innerHTML = result;
  }
};
xhr.open("GET", "data.php", true);
xhr.send();

ログイン後にコピー

上記のコードでは、 XMLHttpRequest オブジェクトを作成し、onreadystatechange イベントでリクエストが成功したかどうかを判断します。成功すると、サーバーから返されたデータが ID「result」の要素に表示されます。

2. データ対話スキル
実際の開発では、特別なニーズが発生し、Ajax を介してサーバーと対話する必要がある場合があります。一般的に使用されるデータ対話手法の例をいくつか示します。

POST リクエストの送信:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
  if(xhr.readyState === 4 && xhr.status === 200){
    var result = xhr.responseText;
    document.getElementById("result").innerHTML = result;
  }
};
xhr.open("POST", "data.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("name=John&age=30");

ログイン後にコピー

上記の例では、setRequestHeader を設定します。メソッドリクエストの Content-type を指定し、send メソッドを使用してリクエストデータを送信します。

JSON データの送信:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
  if(xhr.readyState === 4 && xhr.status === 200){
    var result = JSON.parse(xhr.responseText);
    document.getElementById("result").innerHTML = result;
  }
};
xhr.open("POST", "data.php", true);
xhr.setRequestHeader("Content-type", "application/json");
var data = JSON.stringify({name: "John", age: 30});
xhr.send(data);

ログイン後にコピー

上記の例では、JSON.stringify() メソッドを使用して JavaScript オブジェクトを JSON 文字に変換します。文字列を取得し、JSON.parse() メソッドを使用して、サーバーから返された JSON 文字列を JavaScript オブジェクトに変換します。

フォームデータの Ajax 送信:

var form = document.getElementById("myForm");
form.addEventListener("submit", function(event) {
  event.preventDefault();
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function(){
    if(xhr.readyState === 4 && xhr.status === 200){
      var result = xhr.responseText;
      document.getElementById("result").innerHTML = result;
    }
  };
  xhr.open("POST", "data.php", true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.send(new FormData(form));
});

ログイン後にコピー

上記の例では、フォームが submit イベントリスナーをフォーム要素に追加しないようにします。デフォルトの送信動作。FormData オブジェクトを使用してフォームのデータを取得し、Ajax 経由で送信します。

結論:
この記事の導入部を通じて、Ajax イベントの基本概念と一般的なデータ対話手法について学びました。 Ajax イベントを習得することで、ページ全体を更新せずにサーバーとの非同期通信を実現し、データを更新および操作できるようになります。多くの練習と学習を通じて、Ajax スキルをさらに拡張して適用し、フロントエンド開発分野での能力と競争力を向上させることができます。この記事が Ajax イベントの学習に役立つことを願っています。

参考資料: