AJAXのワークフローはどのようなものですか? Ajax ワークフローの概要 (例付き)-jsチュートリアル-php.cn

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

寻∝梦

リリース： 2018-09-10 15:51:07

オリジナル

3068 人が閲覧しました

この記事では、主に 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 サイトの他の関連記事を参照してください。