AJAX 初心者チュートリアル: AJAX の初めての概要

この記事は、基本的な AJAX チュートリアルの最初のものであり、読者が基本的な AJAX アプリケーションをできるだけ早くマスターし、最も直接的な方法で AJAX テクノロジをデモンストレーションできるように、実践的な観点から開始します。この記事ではAJAXの基礎知識を解説します

私はB/S開発に初めて触れた時からAJAXの技術については聞いていましたが、ずっと曖昧な状態でした。

AJAX は B/S 学習プロセスの影になりつつある、計り知れないテクノロジーのようです。

Xiao Cai が本格的に AJAX を練習し始めたのは、ほんの数日前のことで、AJAX の変形アプリケーションを考慮しなければ、AJAX はそれほど難しくないことに気づきました。 AJAX の基本的なアプリケーションを考えてみますが、理論はまだ非常に単純であり、複雑すぎるため、物事を行う際の熱意が妨げられます。

したがって、この一連のチュートリアルは実践的な観点から始まり、読者が基本的な AJAX アプリケーションをできるだけ早くマスターし、最も直接的な方法で AJAX テクノロジをデモンストレーションできるようにします。

この一連のチュートリアルをよりよく読むために、読者は次の要件を満たしている必要があります:

l HTML に精通していること。

l HTTP プロトコルについてよく理解してください。

l JavaScript に慣れてください。

l XML についてよく理解してください。

l XML DOM に精通している。

AJAX は新しいテクノロジーではなく、単なる新しい標準です。 Xiaocai の個人的な理解によると、いわゆる AJAX テクノロジは、クライアントとサーバー間のバックグラウンド対話を実現するもので、情報媒体として XML を使用し、制御に JavaScript を使用し、HTTP プロトコルを介して対話して、部分的にリフレッシュする効果を実現します。 HTMLインターフェース。

これらのテクノロジーについて簡単に説明しましょう。

HTML には何も言うことはありません。

HTTP プロトコルにはさらに多くのコンテンツがあります。 AJAX の実践では、POST および GET メソッドのリクエスト データ、HTTP ヘッダー情報の構築、データ解析形式など、主にこれら 3 つの項目が含まれます。馴染みのない項目を確認して、急いで詳細を学習してください。しかし、すべてシンプルなので、ストレスを感じる必要はありません。

Xiaocai は、AJAX が Javascript スクリプトを記述していると考えています。このオブジェクトは、POST または GET メソッドを通じてサーバーにリクエストを送信し、その XML を解析して、上の図は AJAX の実行プロセスです。

xml は、データに特定の構造を持たせることができるデータ仕様にすぎず、これによりデータの編成とデータの拡張が容易になります。

XML の基本コンポーネントは要素であり、HTML で一般的に参照されるタグです ( など)。要素と要素は、同時に、要素は、 のような属性を持つことができます。

このように、xml は非常に豊富で柔軟な情報を表現でき、小規模なデータベースとしても使用できます。

ここでは、 などの子要素を使用して要素を拡張することをお勧めします。属性の使用は推奨されません。 : などの要素を拡張します。これは、サブ要素が属性よりも柔軟であり、xml の設計思想にも準拠しているためです。

JavaScript を使用して XML を操作したい場合は、DOM (Document Object Model) の基本的な知識を理解する必要があります。読者の学習を促進するために、Xiaocai は XML DOM を簡単に紹介します。

DOM 定義によれば、xml 内の各コンポーネントはノードです。 Xiaocai の理解によると、成分の意味は XML のコンポーネントです。

詳細は次のとおりです:

l ドキュメント全体がドキュメント ノードです。

l 各 XML タグは要素ノードです。たとえば、 は、要素ノードとも呼ばれるタグのペアです。

l xml 要素に含まれるテキストはテキスト ノードです。たとえば、千夜一夜、「千夜一夜」はテキスト ノードです。

l XML 要素の属性は属性ノードと呼ばれます。たとえば、 の場合、serialNumber は属性ノードです。

Node には、nodeName (ノード名)、nodeValue (ノード値)、nodeType (ノード タイプ) という 3 つの非常に重要な属性があります。このうち、nodeName と nodeValue は非常に一般的に使用されるため、明確にする必要があります。

nodeName (読み取り専用) の場合:

l 要素ノードのノード名は、要素のタグ名と同じです。たとえば、要素 のノード名は book です。

l 属性ノードのnodeNameは属性名です。たとえば、 の場合、属性ノードが SerialNumber の場合、その NodeName 属性も SerialNumber になります。

l テキストノードのnodeNameは固定の#text文字列です。たとえば、千夜一夜の場合、テキスト ノードは「千夜一夜」で、そのノード名は固定文字列「#text」を返します。

nodeValue (読み取り/書き込み) の場合:

l 要素ノードの nodeValue は undefind を返します。たとえば、 要素の nodeValue 属性は undefind を返します。

l 属性ノードのnodeValueは属性の値です。たとえば、 の場合、属性ノードは SerialNumber で、その NodeValue は 0905024 を返します。

l テキストノードのnodeValueはテキスト自体の内容です。たとえば、千夜一夜の場合、テキスト ノードは「千夜一夜」で、そのnodeValueは「千夜一夜」を返します。これには特に注意してください。 ！ ！この例では、name 要素に「千夜一夜」というテキスト ノードが含まれています。「千夜一夜」は name 要素の値 (nodeValue) ではありません。 name 要素 (nodeValue) の値が未定義です。したがって、実際のプログラミングでは、name 要素を取得するときに、firstChild や childNodes[0] などの要素に含まれるテキスト ノードをさらに取得する必要があり、その後、nodeValue 属性を使用してテキストを読み取ることができます。コンテンツ。

要約すると、AJAX テクノロジーは 1 枚の図に要約できます:

以上が、皆さんのためにまとめたものです。今後皆さんのお役に立てれば幸いです。

関連記事:

プロンプト付きAjax検証フォーム例

jqueryにおけるajax同期・非同期の詳細解説

Ajaxをベースにしたドロップダウンボックス連携表示データの実装

以上がAJAX 初心者チュートリアル: AJAX の初めての概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。