ajax テクノロジーとは何ですか?

ajax に含まれるテクノロジは次のとおりです: 1. Web ページ コンテンツの作成に使用される HTML または XHTML、2. Web ページ コンテンツを美しくするために使用される CSS、3. Web ページ コンテンツのインタラクティブで動的な表示である DOM。 4. XMLHttpRequest、サーバーとの非同期通信に使用されます; 5. JavaScript、バインドと呼び出しを実装します。

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

Ajax は、2005 年に Jesse James Garrett によって提案された新しい用語で、HTML または XHTML、CSS、JavaScript、DOM、XML、XSLT などの既存のテクノロジの集合を使用する「新しい」アプローチを表します。重要なのは XMLHttpRequest です。

Ajax テクノロジを使用すると、Web アプリケーションはページ全体を再読み込み (更新) することなく、増分更新をユーザー インターフェイスに迅速に表示できるため、プログラムはユーザーの操作に迅速に応答できます。

ajax に含まれるテクノロジー:

ajax が新しいテクノロジーではなく、いくつかの独自のテクノロジーを組み合わせたものであることは誰もが知っています。以下の技術で構成されています。

1. HTML または XHTML、Web ページ コンテンツの作成に使用されます

2. CSS、Web ページ コンテンツの美化に使用されます

3. DOM モデルを使用した対話と動的な表示。

4. XMLHttpRequest を使用してサーバーと非同期通信します。

5. JavaScript を使用してバインドして呼び出します。

上記の技術のうち、XmlHttpRequest オブジェクトを除くその他の技術はすべて Web 標準に基づいており、広く使用されています。XMLHttpRequest はまだ W3C に採用されていませんが、すでに事実上の標準となっています。現在、ほぼすべての主要ブラウザがこれをサポートしています。

ajax の原則と XmlHttpRequest オブジェクト

Ajax の原則は、XmlHttpRequest オブジェクトを通じてサーバーに非同期リクエストを送信し、サーバーからデータを取得して、 JavaScriptを使用してDOMを操作し、ページを更新します。この中で最も重要なステップは、サーバーからリクエスト データを取得することです。このプロセスと原理を理解するには、XMLHttpRequest について理解しておく必要があります。

XMLHttpRequest は ajax のコア メカニズムであり、IE5 で初めて導入され、非同期リクエストをサポートするテクノロジです。簡単に言うと、JavaScript はユーザーをブロックすることなく、サーバーにリクエストを送信し、応答をタイムリーに処理できます。リフレッシュ効果は得られません。

それでは、XMLHttpRequest から始めて、それがどのように機能するかを見てみましょう。

まず、XMLHttpRequest オブジェクトのプロパティを見てみましょう。

その属性は次のとおりです:

onreadystatechange 状態が変化するたびにトリガーされるイベントのイベント ハンドラー。

responseText は、サーバー プロセスから文字列形式のデータを返します。

responseXML サーバー プロセスから返された DOM 互換のドキュメント データ オブジェクト。

ステータス一般的な 404 (見つからない) や 200 (準備完了) など、サーバーから返される数値コード

ステータス テキストステータス コードに付随する文字列情報

readyState オブジェクトステータス値

0 (未初期化) オブジェクトは作成されましたが、まだ初期化されていません (open メソッドが呼び出されていません)

1 (初期化済み) オブジェクトは作成されましたが、まだ初期化されていませんsend メソッドはまだ呼び出されていません

2 (データ送信) send メソッドは呼び出されていますが、現在のステータスと http ヘッダーは不明です

3 (データ送信中) の一部レスポンスと http ヘッダーが不完全なため、データを受信しました このとき、responseBody と responseText で取得します データの一部にエラーがあります

4 (完了) データの受信が完了しました。ただし、ブラウザ間の違いにより、XMLHttpRequest オブジェクトの作成には異なるメソッドが必要になる場合があります。この違いは主に IE と他のブラウザーの間に反映されます。以下は、XMLHttpRequest オブジェクトを作成する比較的標準的な方法です。

function CreateXmlHttp()
{
//非IE浏览器创建XmlHttpRequest对象
if(window.XmlHttpRequest)
{
xmlhttp=new XmlHttpRequest();
}
//IE浏览器创建XmlHttpRequest对象
if(window.ActiveXObject)
{
try
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
try{
xmlhttp=new ActiveXObject("msxml2.XMLHTTP");
}
catch(ex){}
}
}
}
function TestAjax()
{
var data=document.getElementByIdx("username").value;
CreateXmlHttp();
if(!xmlhttp)
{
alert("创建xmlhttp对象异常！");
return false;
}
xmlhttp.open("POST",url,false);
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
document.getElementByIdx("user1").innerHTML="数据正在加载...";
if(xmlhttp.status==200)
{
document.write(xmlhttp.responseText);
}
}
}
xmlhttp.send();
}

上に示したように、この関数はまず XMLHttpRequest の全体的なステータスをチェックし、それが完了している (readyStatus=4)、つまりデータが送信されたことを確認します。次に、サーバーの設定に従ってリクエストのステータスを問い合わせ、すべての準備ができている場合 (ステータス = 200)、次の必要な操作を実行します。

XmlHttpRequest の 2 つのメソッド (open と send) について、open メソッドは次を指定します:

a. サーバーに送信されるデータのタイプ (post または get)。

b、要求された URL アドレスと渡されたパラメーター。

c. 送信モード、false は同期を意味し、true は非同期を意味します。デフォルトは true です。非同期通信モード (true) の場合、クライアントはサーバーの応答を待ちません。同期モード (false) の場合、クライアントは他の操作を実行する前にサーバーがメッセージを返すまで待つ必要があります。実際のニーズに応じて同期方法を指定する必要があります。一部のページでは、複数のリクエストが発行されたり、組織化、計画、形成された大規模で高強度のリクエストが発行され、後者のリクエストが前のリクエストを上書きすることがあります。もちろん、同期方法を指定する必要があります。

Send メソッドはリクエストの送信に使用されます。

XMLHttpRequest のワークフローを理解すると、XMLHttpRequest はサーバーにリクエストを発行するために完全に使用され、その役割はこれに限定されていることがわかりますが、ajax はそれ以上のものではないため、その役割は ajax 実装全体の鍵となります。リクエストの作成とリクエストへの応答という 2 つのプロセスよりも。そしてそれは完全にクライアント側のテクノロジーです。 XMLHttpRequest はサーバーとクライアント間の通信の問題を処理するため、非常に重要です。

これで、ajax の原理を理解できるようになりました。サーバーは、プレーン テキスト ストリームを返すデータ インターフェイスと考えることができます。もちろん、このテキスト ストリームは、XML 形式、HTML、JavaScript コード、または単なる文字列にすることもできます。このとき、XMLHttpRequest がサーバーにこのページをリクエストし、サーバーがテキスト結果をページに書き込むのは通常の Web 開発プロセスと同じですが、クライアントが非同期で結果を取得した後、直接結果を取得するわけではない点が異なります。ページに表示されますが、最初に JavaScript によって処理されてからページに表示されます。 magicajax など、現在よく使われている多くの ajax コントロールは、DataSet などの他のデータ型を返すことができますが、このプロセスの結果をカプセル化しているだけで、本質的には両者に大きな違いはありません。

[関連チュートリアルの推奨事項: AJAX ビデオ チュートリアル]

以上がajax テクノロジーとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。