AJAXのワークフローはどのようなものですか? Ajax ワークフローの概要 (例付き)

この記事では、主に ajax のワークフロー、ajax の原理、一般的に使用されるいくつかの属性の紹介について説明します。それでは、この記事を一緒に見ていきましょう

AJAX は、「Asynchronous JavaScript」の略です。 XML」（非同期 JavaScript および XML）。

は、インタラクティブな Web アプリケーションを作成するための Web 開発テクノロジーです。それは:
XHTML+CSS を使用して情報を表現します。
JavaScript を使用して DOM (Document Object Model) を操作して動的な表示と操作を行います。
XML を使用します。
JavaScript を使用してすべてを結び付けます。

AJAX 原則: AJAX は単一のテクノロジーを指すのではなく、一連の関連テクノロジーを有機的に利用します。その中心となるのは JavaScript オブジェクト XmlHttpRequest です。これにより、JavaScript を使用してサーバーにリクエストを送信し、ユーザーをブロックすることなく応答を処理できるようになります。 AJAX は非同期対話プロセスを使用します。これにより、ユーザーとサーバーの間に仲介者が導入され、ネットワーク対話プロセスにおける処理 - 待機 - 処理 - 待機の欠点が解消されます。ユーザーのブラウザは、タスクを実行するときに AJAX エンジンを読み込みます。AJAX エンジンは JavaScript で記述されており、通常は非表示のフレームに隠されています。ユーザー インターフェイスのコンパイルとサーバーとの対話を担当します。 AJAX エンジンを使用すると、ユーザーとアプリケーション ソフトウェア間の対話プロセスを、ユーザーとネットワーク サーバー間の通信とは独立して非同期に進めることができます。 AJAX を使用すると、HTTP ユーザー アクションを生成する代わりに、JavaScript を使用して AJAX エンジンを呼び出すことができ、ページ全体のリロードを必要とせずに実行できるようになります。 JSP、開発者、エンドユーザーに目に見える利便性をもたらします。

Ajax の中核は XmlHttpRequest オブジェクトであるため、これを導入する必要があります:
よく使用される属性: Onreadystatechange は、readyState 属性が変更されたときのイベント処理関数を指定します。書き込み専用
readyState は、Ajax リクエストの現在のステータスを示します。読み取り専用 その値は数値で表されます。
0 は初期化されていないことを意味します。 open メソッドはまだ呼び出されていません
1 はロードを意味します。 Open メソッドは呼び出されていますが、Send メソッドは呼び出されていません
2 つの代表が読み込まれています。 send が呼び出されました。リクエストが開始されました
3 はインタラクションを表します。サーバーは応答を送信しています
4 は完了を意味します。応答が送信された後、ReadyState 値が変更されるたびに ReadyStateChange イベントがトリガーされます。
responseText 応答情報を文字列として返します。これは、サーバーが送信する内容に応じて、HTML、XML、またはプレーン テキストのいずれかになります。 responseText プロパティは、readyState プロパティの値が 4 になり、Ajax リクエストが終了したことを示す場合にのみ使用できます。
ResponseXML 応答情報を XML ドキュメント オブジェクトにフォーマットし、読み取り専用で返します。responseXML 属性は、サーバーが正しいヘッダー情報を含むデータを送信する場合にのみ使用できます。
MIME タイプは text/xml である必要があります
status 現在のリクエストの http ステータス コードを返します。読み取り専用 一般的なステータス コードとその意味:
404 ページが見つかりません (見つかりません) 403 アクセス禁止 (入札済み)
500内部サーバー エラー (内部サービス エラー) 200 すべて正常 (ok) 304 未変更 (サーバーは、ソース ファイルが変更されていないことを示す 304 ステータスを返します)
XMLHttpRequest オブジェクトでは、サーバーによって送信されるステータス コードは次のとおりです。内部のステータス属性に保存されます。この値を 200 または 304 と比較することで、サーバーが正常な応答を送信したかどうかを確認できます
(詳細を知りたい場合は、PHP 中国語 Web サイト
AJAX 開発マニュアル
の列にアクセスして学習してください)

一般的なメソッド:
Open 新しい http リクエストを作成し、リクエストメソッド、URL、検証情報を指定します
Send リクエストを http サーバーに送信し、レスポンスを受信します リクエストが get の場合、データは送信されません
SetRequestHeader を指定します個別にリクエストする 特定の http ヘッダー
AJAX ワークフロー:
1 オブジェクトの初期化

function   createXmlHttpRequest(){
   var xmlHttp;
   try{    //Firefox, Opera 8.0+, Safari
           xmlHttp=new XMLHttpRequest();
    }catch (e){
           try{    //Internet Explorer
                  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
            }catch (e){
                  try{
                   xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                  }catch (e){}  
           }
    }
   return xmlHttp;
 }

2 リクエストを送信する
XMLHttpRequest オブジェクトの open メソッドと send メソッドを順番に呼び出し、open 呼び出しが完了した後に send メソッドが呼び出されます。

xmlHttp.open("get","../servlet/RegisterServlet?timeStamp="+new Date().getTime(),true)
xmlHttp.send(null);

send のパラメータが Post モードで送信される場合、サーバーに渡す任意のコンテンツを指定できますが、最初に setRequestHeader メソッドを呼び出して MIME カテゴリを変更する必要があります:
xmlHttp.setRequestHeader( "Content-Type"," application/x-www-form-urlencoded");
3 サーバーは処理されたデータを受信して​​返し、返された情報を処理するイベント ハンドラーを指定します。
readyState 属性が変更されるたびに、対応する処理関数名を XMLHttpRequest オブジェクトに割り当てるだけです

 xmlHttp.onreadystatechange = function(){            if (xmlHttp.readystate == 4) { 
  if (xmlHttp.status == 200 || xmlHttp.status == 304) {//XMLHttpRequest对成功返回的信息有两种处理方式：//responseText：
  将传回的信息当字符串使用；//responseXML：将传回的信息当XML文档使用，可以用DOM处理。 
        }            }        };

4 クライアント受信
5 クライアント ページのコンテンツを変更します

この記事はここで終わります (必要な場合)詳細については、PHP 中国語 Web サイトにアクセスしてくださいAJAX ユーザー マニュアルコラムで学習してください)。ご質問がある場合は、以下にメッセージを残してください。

以上がAJAXのワークフローはどのようなものですか? Ajax ワークフローの概要 (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。