JavaScript AJAX の簡単な理解

この記事では主に JavaScript における AJAX の関連知識を紹介します。以下のエディターで見てみましょう

概要

AJAX テクノロジーは Web ページ構築に必要なスキルの 1 つです。この記事は、誰もがこのテクノロジーを簡単に学ぶのに役立つことを願っています

1. ajax とは何ですか?

ajax (非同期 JavaScript XML) は、Web ページ全体をリロードするのではなく、部分的な Web ページ データを更新できます。

2. ajax の使用方法

ステップ 1: xmlhttprequest オブジェクトを作成する

XMLHttpRequest オブジェクトは、サーバーとデータを交換するために使用されます。

var xmlhttp =new XMLHttpRequest();

ステップ 2: コールバック関数を登録する

サーバーがリクエストに応答してデータを返すとき、クライアントにデータを処理させる必要があります。関数、各 xmlhttprequest オブジェクト readyState に変更があると、onreadystatechange 関数がトリガーされます。 ReadyState については次の章で詳しく紹介します。

 xmlHttp.onreadystatechange= callback;
  function callback(){}

ステップ 3: リクエストを設定して送信する

xmlhttprequest オブジェクトの open() メソッドと send() メソッドを使用して、リソース リクエストを設定し、サーバーに送信します。

xmlhttp.open(method, url, async) メソッドには get と post が含まれており、url は主にファイルまたはリソースのパスであり、async パラメーターは true (非同期を表す) または false (同期を表す) です。 (); use get メソッドはサーバーにリクエストを送信します。

xmlhttp.send(string); post メソッドを使用してサーバーにリクエストを送信します。

投稿フォーム データでは、xmlhttprequest オブジェクトの setRequestHeader メソッドを使用して HTTP ヘッダーを追加する必要があります。

投稿リクエストはいつ利用可能になりますか?

(1)ファイルまたはデータベースを更新するとき

。

(2) 投稿リクエスト

には文字数制限がないため、大量のデータをサーバーに送信します。

(3) ユーザーが入力したデータを暗号化して送信します。

xhttp.open("POST", "ajax_test.aspx", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");

ステップ4: 応答データを処理する

xmlhttprequestオブジェクトのresponseText属性またはresponseXML属性を使用して、サーバーの応答を取得します。

サーバー応答の

string

データを取得するには、responseText 属性を使用し、サーバー応答の XML データを取得するには、responseXML 属性を使用します。

コールバック関数でreadyState==4とstatus==200を使用して、インタラクションが終了したかどうか、応答が正しいかどうかを判断し、ページコンテンツを更新するために必要に応じてサーバーから返されたデータを取得します。

function callback(){
  if(xmlHttp.readyState == 4){
   //判断交互是否成功
   if(xmlHttp.status == 200){
    //获取服务器返回的数据
    //获取纯文本数据
    var responseText =xmlHttp.responseText;
    document.getElementById("info").innerHTML = responseText;
   }
  }
}

3. AJAX動作中の5つの状態(readyState)

AJAXの実際の動作中、XMLHttpRequest(XHR)へのアクセスは一度に完了するのではなく、複数の状態を経て得られる結果です。 AJAX におけるこの 5 つの状態は、AJAX エンジンによってそれぞれ切り替えられて設定されます。

0: XHR は定義されていますが、まだ初期化されていません

1: send() メソッドが呼び出され、リクエストが送信されています リクエストが送信された後、レスポンスの受信待ちが開始されます

2: レスポンスの受信はcompleted

3: 応答内容の解析中

4: 応答内容の解析が完了し、クライアント呼び出しに返されます

上記ステータスのうち、「0」ステータスは定義後に自動的に取得されるステータス値であり、アクセスの成功状況（取得した情報）は「4」で判断することが多いです。

状態が切り替わるたびに onreadystatechange

イベント

がトリガーされることに注意してください。したがって、onreadystatechange イベントはプロセス全体で 5 回トリガーされます

4. AJAX の利点と欠点

利点

1. 最大 最も重要なことは、ページが更新されず、ページ内でサーバーと通信し、ユーザーの操作を中断する必要がなく、応答機能が高速であるため、ユーザーに非常に優れたサービスを提供することです。経験。

2. サーバーの負荷を軽減する ajax の原理は「オンデマンドでデータを取得する」ことであり、冗長なリクエストと応答によるサーバーの負荷を最小限に抑えることができます。

欠点

1. Ajax は「戻る」ボタンを無効にし、ブラウザの「戻る」メカニズムを破壊します。

2. 検索エンジンのサポートは比較的弱いです。

以上がJavaScript AJAX の簡単な理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。