ホームページ >ウェブフロントエンド >jsチュートリアル >独自のAjax Webアプリケーションを構築します

独自のAjax Webアプリケーションを構築します

尊渡假赌尊渡假赌尊渡假赌オリジナル: 2025-03-09 00:11:28822ブラウズ

それで、ここにいるのは、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか？ Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。

Ajaxという用語は、もともと彼のエッセイAjax：Webアプリケーションへの新しいアプローチのAdaptive PathのJesse James Garrettによって造られたもので、「非同期JavaScriptとXML」の頭字語です。それは少し口いっぱいですが、JavaScriptを使用してページ全体をリロードすることなくWebサーバーからページのコンテンツを更新する手法を説明するだけです。これは、コンテンツの変更を表示するためにブラウザがページ全体を更新する必要があるWebページを更新する従来の方法とは異なります。

同様のテクニックは、かなり長い間、何らかの形で（多くの場合、いくつかの巧妙なハックの助けを借りて達成される）ことがあります。しかし、ブラウザでのXMLHTTPREQUESTクラスの可用性の向上、キャッチーな用語AJAXのコーティング、およびGoogleマップ、Gmail、バックパック、Flickrなどの多くの有名な例の出現により、これらの種類の非常に相互作用性のあるWebアプリケーションが、開発の世界で勢いを得ることができました。 Ajaxという用語がより広くなるようになるにつれて、その定義は、古い学校のWebアプリよりもはるかに動的に動作するブラウザーベースのアプリケーションをより一般的に参照するように拡大しました。 AJAX Webアプリケーションのこの新しいクロップは、編集中のテキスト、ドラッグアンドドロップ、CSSアニメーションまたはトランジションなどのインタラクション技術をより広範囲に使用して、ユーザーインターフェイス内の変更を実施します。このチュートリアルでは、これらのテクニックを説明し、独自のAjax Webアプリケーションを開発する方法を示します。このチュートリアルは、私の新しい本からの抜粋です

独自のAjax Webアプリケーションを構築してください

。ここで紹介した3つの章では、ajaxの基本について説明し、XmlhttpRequestの素晴らしい世界を掘り下げる前に、それがどのようにチェックするかを学びます。私たちがそれを走り回って、その内部の仕組みを探求し、リクエストを行い、アプリケーションページを非同期に更新した後、最初の真のAJAXアプリケーションの開発を開始します。

かなりの乗り物になるので、冒険の準備ができていることを願っています！これらの章をオフラインで読みたい場合は、それらの.pdfバージョンをダウンロードしてください。しかし、今、ajaxでしっかりした接地を取得しましょう。

第1章。Ajax：概要

彼は逃げています、ばか！ウォーロケットajaxを派遣！彼の体を取り戻すために！

- 将軍カラ、フラッシュゴードン

ajax webアプリケーション ajaxは、多くのWeb開発プロジェクトにとって素晴らしいソリューションになる可能性があります。ウェブアプリがステップアップし、以前はデスクトップアプリケーションによってほぼ排他的に占有されていた多くの基盤を引き継ぐことができます。

同じことに、Ajaxはアプリに振りかけて厄介でクールにすることができる一種の魔法の妖精の塵ではないことに留意することが重要です。他の新しい開発手法と同様に、Ajaxは誤用するのは難しくありません。恐ろしい、頑丈で古い学校のWebアプリよりも悪いことは、恐ろしく実行されていないAjax Webアプリです。

Webアプリケーションの適切な部分に適用すると、Ajaxはユーザーのアプリケーションのエクスペリエンスを大幅に向上させることができます。 Ajaxはアプリのインタラクティブ性と速度を向上させることができ、最終的にそのアプリケーションをより簡単に、より楽しく、より直感的に使用することができます。多くの場合、AJAXアプリケーションは「ブラウザのデスクトップアプリケーションのような」と説明されています。これはかなり正確な説明です。AjaxWebアプリは、従来の昔ながらのWebアプリケーションよりもはるかに応答性が高く、デスクトップアプリケーションのレベルと同様のインタラクティブ性を提供できます。

しかし、Ajax Webアプリは依然としてリモートアプリケーションであり、ローカルストレージにアクセスできるデスクトップアプリケーションとは異なる動作をしています。 AJAX開発者としての仕事の一部は、アプリと遠くのサーバーの間で発生する必要がある通信にもかかわらず、応答性があり使いやすいと感じるアプリケーションを作成することです。幸いなことに、AJAXツールボックスは、それを正確に達成するための多くの優れたテクニックを提供します。

悪い昔の

シンプルで静的なHTMLページを提供することを超えた最初のWeb開発タスクの1つは、バックエンドデータストアのデータを使用してWebサーバー上で動的にページを構築する手法でした。 Web開発の「悪い時代」に戻って、この動的でデータベース駆動型コンテンツを作成する唯一の方法は、CGIスクリプト（Perlで書かれている可能性が最も高い）またはスクリプト言語（Microsoftのアクティブサーバーページなど）を解釈できるサーバーコンポーネントのいずれかを使用して、サーバー側にページ全体を構築することでした。そのページへの1回の変更でさえ、ブラウザからサーバーへの往復が必要でした。その場合にのみ、新しいコンテンツをユーザーに提示することができました。

当時、Webアプリケーションのユーザーインターフェイスの通常のモデルは、ユーザーがサーバーに記入して送信するWebフォームでした。サーバーは、送信されたフォームを処理し、結果として表示するためにまったく新しいページをブラウザに送り返します。したがって、たとえば、マルチステップのWebベースの「ウィザード」を完了すると、ユーザーがフォームを送信する必要があります。これは静的なWebページの大きな進歩でしたが、エンドユーザーに真の「アプリケーション」エクスペリエンスを提示することとはかけ離れていました。

先史時代のajax

初期のWeb開発者は、より応答性が高くインタラクティブなWebアプリケーションの作成に努めたため、その単純なフォームベースのモデルの機能を拡張するためのトリックをすぐに探し始めました。これらのハックは、かなりアドホックで粗野なものですが、Web開発者が今日のAjaxアプリケーションで見られるような相互作用に向けて取った最初のステップでした。しかし、これらのトリックと回避策はしばしばサービス可能で働くソリューションを提供しましたが、結果のコードはきれいな光景ではありませんでした。

ネストフレームセット

コンテンツに最小の変更を表示するためにページ全体をリロードする問題を回避する1つの方法は、他のフレームセット内のネスティングフレームセットの恐ろしいハックであり、多くの場合数レベルの深さでした。この手法により、開発者は画面の選択された領域のみを更新し、さらには画面の一部の部分でユーザーが別の領域のコンテンツを変更したタブスタイルのナビゲーションインターフェイスの動作を模倣することさえできました。

この手法は、EmployeeDitWizardMiddLelowerright.asp。

隠されたiframe

インターネットエクスプローラー4のようなブラウザにIFRAMEを追加することで、物事が痛みを伴いませんでした。 IFRAMEを非表示にする機能により、別のきちんとしたハックが開発されました。開発者は、非表示のIFRAMEを使用してHTTP要求をサーバーに作成し、JavaScriptとDHTMLを使用してページにコンテンツを挿入します。これにより、ページをリロードせずにフォームからデータを送信する機能など、最新のAjaxを通じて利用可能な同じ機能の多くが提供されました。結果は、サーバーによってiframeに返され、ページのJavaScriptがアクセスできます。

このアプローチの大きな欠点（結局のところ、それがハックだったという事実を超えて）は、メインドキュメントとIFRAMEのドキュメントの間にデータをやり取りする迷惑な負担でした。

リモートスクリプト

通常はリモートスクリプトと呼ばれる別の初期のAjaxのような手法は、動的に生成されたJavaScriptを含むページをロードするために<script>タグのSRC属性を設定することを含みます。 これには、サーバー上で生成されたJavaScriptがメインドキュメントに直接ロードされるため、Hidden Iframeハックよりもはるかにクリーンであるという利点がありました。ただし、この手法を使用して簡単なGETリクエストのみが可能でした。 ajaxをクールにするもの これが、AJAX開発がWeb開発のために非常に大きな跳躍である理由です。単一の巨大なマスですべてをサーバーに送信する代わりに、サーバーがレンダリングのために新しいページを送信するのを待つ代わりに、Web開発者は小さなチャンクでサーバーと通信し、それらの要求に基づいてサーバーの応答に基づいてページの特定の領域を選択的に更新できます。これは、Ajaxの頭字語の非同期という言葉が生まれた場所です。その反対の同期システムを考慮することにより、非同期システムのアイデアを理解するのはおそらく最も簡単です。同期システムでは、すべてが順番に発生します。カーレースが同期システムである場合、それは非常に退屈な出来事になるでしょう。グリッドで最初に始まった車は、フィニッシュラインを越えて最初になり、2番目に始まった車などが続きます。追い越しはありません。車が故障した場合、メカニックが修理が行われている間、後ろの交通は停止して待つことを余儀なくされます。従来のWebアプリは同期システムを使用します。図1.1に示すように、2番目のページをリクエストする前に、サーバーがシステムの最初のページを送信するのを待つ必要があります。 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145029133777.png" class="lazy" alt="独自のAjax Webアプリケーションを構築します" >図1.1。従来のWebアプリは、同期システム です非同期のカーレースはもっとエキサイティングです。ポール位置の車は最初のコーナーで追い越される可能性があり、グリッドの後ろから始まる車はフィールドを通り抜けて3位でフィニッシュラインを横断する可能性があります。 AJAXアプリケーションのブラウザからHTTP要求は、まさにこの方法で機能します。 Ajax開発を非常にクールにするニーズベースで、サーバーに多くの小さなリクエストを行うこの能力です。図1.2は、Webサーバーに非同期リクエストを行うAJAXアプリケーションを示しています。 図1.2。 Ajax Webアプリは、非同期システム<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145029358444.png" class="lazy" alt="独自のAjax Webアプリケーションを構築します" > です 最終結果は、ユーザーが処理するのを待つ時間を大幅に短縮するためにはるかに応答性が高いと感じるアプリケーションです。また、結果を表示する前に、新しいWebページがワイヤーに出くわすのを待つ必要はありません。 ajax Technologies AJAX Webアプリケーションの構築に使用されるテクノロジーは、さまざまなプログラミングドメインを含むため、Ajax開発は定期的なアプリケーション開発ほど簡単ではなく、古い学校のWeb開発ほど簡単ではありません。一方、AJAX開発が非常に多くの異なるテクノロジーを採用しているという事実は、それをより面白くて楽しいものにします。 Ajax Webアプリケーションを作成するために協力するテクノロジーの簡単なリストを次に示します。 <h5> xml w3c dom css <ul> xmlhttprequest <li> javascript <li> <li>この章の残りの部分を通じて、これらのテクノロジーのそれぞれに会い、Ajax Webアプリケーションで果たす役割について説明します。 <li>データ交換とマークアップ：xml <li> XML（XMLは拡張可能なマークアップ言語の略です - 誰もが教科書以外でそれを呼ぶことではありません。）は、Ajaxがその文字「X」を取得する場所です。テクノロジーの頭字語は、文字「X」が含まれている場合、自動的にはるかにクールであると自動的に見られるため、これは幸運です。（はい、冗談です！）データ交換lingua franca XMLは、AJAXアプリケーションでブラウザとサーバー間で通信する非同期HTTP要求で使用されるメインデータ形式として多くの場合機能します。この役割は、ニュートラルでかなりシンプルなデータ交換形式としてXMLの強みを果たします。また、必要に応じてコンテンツを再利用または再フォーマットするのは比較的簡単であることを意味します。もちろん、ブラウザとサーバーの間で簡単に交換するためにデータをフォーマットする他の多くの方法（CSV（Comma分離値）、JSON（JavaScriptオブジェクト表記）、または単に平易なテキスト）がありますが、XMLは最も一般的なものの1つです。マークアップ< AjaxアプリケーションのWebページは、実際にはXHTMLマークアップで構成されています。これは、実際にはXMLのフレーバーです。 XHTMLは、HTMLの後継者として、それに非常に似ています。古い学校のHTMLに精通している開発者によって簡単に取り上げられますが、有効なXMLのすべての利点を誇っています。 XHTMLを使用することには多くの利点があります： XMLを表示、編集、および検証するための標準ツールとスクリプトライブラリをたくさん提供しています。新しい、XML互換性のあるブラウザを使用すると、前方互換性があります。 HTMLドキュメントオブジェクトモデル（DOM）またはXML DOMのいずれかで動作します。 非ブラウザーエージェントでの表示のために、より簡単に再利用できます。 <ul> <li>開発コミュニティのより多くの教ン系の人々の何人かは、人々がまだXHTMLを使用してはならないと主張しています。彼らは、実際のXMLであるため、XHTMLは、適切なHTTPコンテンツタイプのアプリケーション/XHTML XML（テキスト/XMLおよびアプリケーション/XMLも大丈夫ですが、表現が少ない）で提供できない限り、まったく使用すべきではないと非常に強く信じています。（Internet Explorer 6と7はまったくサポートしていません。） <li>実際には、すべての主流ブラウザがすべてのXHTMLドキュメントをテキスト/HTMLとして正しくレンダリングするため、コンテンツタイプのテキスト/HTMLを使用してXHTMLをブラウザに提供できます。ブラウザはあなたのコードを普通の古いHTMLとして扱いますが、他のプログラムは依然としてXMLとして解釈することができます。あなたが私に同意しない場合は、代わりに古いHTML 4.01標準を使用して開発することを選択できます。これは依然として実行可能なWeb標準であり、Webアプリケーションの開発において完全に合法的な選択です。 <li>xhtmlとこの本<li> この本のコード例のほとんどは、XHTML 1.0 Strictを使用します。 iframe要素は厳格では利用できないため、iframeを使用して表示するいくつかのコードの例はxhtml 1.0 transitionalになります。 World Wide Webコンソーシアムは、HTMLとXHTMLの違いに関するFAQを維持しています。 w3cドキュメントオブジェクトモデルドキュメントオブジェクトモデル（DOM）は、XMLおよびHTMLドキュメントのオブジェクト指向の表現であり、これらのドキュメントのコンテンツ、構造、スタイルを変更するためのAPIを提供します。元々、Netscape NavigatorやInternet Explorerなどの特定のブラウザは、JavaScriptを使用してHTMLドキュメントを操作するさまざまな独自の方法を提供しました。このDOMは、World Wide Webコンソーシアム（W3C）の取り組みから生じ、同じタスクを実現するためのプラットフォームおよびブラウザの中立な方法を提供しました。 ドームは、XMLまたはHTMLドキュメントの構造をオブジェクト階層として表します。これは、標準のXMLツールによる解析に最適です。 dom操作方法 JavaScriptは、ドキュメントの解析と操作の両方の観点から、これらのDOM構造を扱うための大きなAPIを提供します。これは、AJAXアプリケーションで見られるWebページに小さなピースごとの変更を達成する主な方法の1つです。（もう1つの方法は、単に要素のinnerHTMLプロパティを変更することです。この方法は、主流のブラウザで広くサポートされていますが、どの標準でも十分に文書化されていません。） domイベント DOMの他の重要な機能は、JavaScriptがWebページ上の要素にイベントを添付する標準手段を提供することです。これにより、ユーザーインターフェイスがはるかに豊富になります。これにより、ユーザーが単純なリンクやフォーム要素を超えてページと対話する機会を提供できるためです。これの素晴らしい例は、ドラッグアンドドロップ機能です。これにより、ユーザーは画面上のページの部分をドラッグし、特定の機能をトリガーするためにそれらを所定の位置にドラッグできます。この種の機能は、デスクトップアプリケーションにのみ存在するために使用されていましたが、今ではブラウザでも同様に機能します。 プレゼンテーション：css CSS（カスケードスタイルシート）は、Webアプリケーションのユーザーインターフェイス要素の外観を制御するための統一された方法を提供します。 CSSを使用して、フォントサイズ、色、間隔から要素の位置にあるページの見た目のほぼすべての側面を変更できます。 AJAXアプリケーションでは、CSSの非常に適切に使用されるのは、ユーザーインターフェイスフィードバック（CSS駆動型のアニメーションとトランジションを使用）を提供するか、ユーザーが対話できるページの部分を示すことです（たとえば、マウスオーバーなどの色または外観がトリガーされた色や外観の変更があります）。たとえば、CSSトランジションを使用して、アプリケーションの一部がサーバーで処理しているHTTP要求を待っていることを示すことができます。 CSS操作は、Ajaxという用語のより広い定義、つまりさまざまな視覚的遷移と効果、およびドラッグアンドドロップと編集中の機能に大きく測られます。 通信：xmlhttpRequest 非常に使いやすいインターフェイスを備えたJavaScriptクラスである XMLHTTPREQUESTは、Webサーバーに対するHTTPリクエストと応答を送信および受信します。 XMLHTTPREQUESTクラスは、真のAJAXアプリケーション開発を可能にするものです。 XMLHTTPRequestで作成されたHTTPリクエストは、まるでブラウザがページのロードまたはフォームの送信を通常のリクエストを行っているかのように機能しているかのように、ユーザーが現在ロードされているWebページを残す必要がありません。 Microsoftは、ActiveXオブジェクトとしてWindows用のInternet Explorer 5にXmlhttpRequestを最初に実装しました。 Mozillaプロジェクトは、バージョン1.0から始まるMozillaブラウザーに互換性のあるAPIを備えたJavaScript-Nativeバージョンを提供しました。（もちろん、Firefoxでも入手できます。）Appleは、バージョン1.2以降、Safariにxmlhttprequestを追加しました。 <smlドキュメントまたは一連のテキストのいずれかのサーバーからの応答をJavaScriptに渡すことができますが、開発者は適切であると考えています。多くの場合、Webアプリケーションのユーザーインターフェイスの一部を更新します。 それをすべてまとめる：javascript JavaScriptは、AJAXアプリケーションを一緒に保持する接着剤です。 Ajax開発で複数の役割を実行します： xmlhttpRequestを使用して作成されたHTTPリクエストの制御 dom操作方法、XSLT、またはカスタムメソッドを使用して、使用されているデータ交換形式に応じて、サーバーから戻ってきた結果を解析する<ul> DOM操作方法を使用してWebページにコンテンツを挿入するか、要素のinnerhtmlプロパティを更新するか、要素のCSSプロパティを変更することにより、結果のデータをユーザーインターフェイスで提示します<li> <li>軽量のWebプログラミングでの使用の長い履歴（および経験の浅いプログラマーの手で）のため、JavaScriptは、多くの従来のアプリケーション開発者から「深刻なプログラミング言語」とは見なされていません。 JavaScriptの「おもちゃ言語」としての誤解は、ブラウザーベースのアプリケーションのパワーと機能を拡大するため、今では急速に変化しています。 Ajaxの出現の結果、JavaScriptは現在、ルネッサンスのようなものを受けているようであり、Ajax開発に利用できるJavaScriptツールキットとライブラリの数の爆発的な成長は、事実の証拠です。<h5>要約この章では、Ajaxとそれをチェックするテクノロジーの簡単な概要を説明しました。私たちは、開発者がインタラクティブUIに似たものを作成するために悪い昔に耐えなければならなかった恐ろしいコーディングのゆがみのいくつかを見ました。 ajaxのビルディングブロック（xml、dom、css、xmlhttprequest、およびjavascript）のまともなコマンドを使用 第2章。基本XmlhttpRequest <h5>この新しい不思議を共有するのが待ちきれません。人々は皆、その光を見て、彼ら全員に自分の音楽を作らせて、司祭たちはこの夜に私の名前を称賛します。 <q> - ラッシュ、発見< ajaxに真の力を与えるのはxmlhttprequestです。ブラウザから非同期http要求を作成し、小さなチャンクでコンテンツを引き下げる能力。> Web開発者は、長い間これを達成するためにトリックとハックを使用していますが、迷惑な制限に苦しんでいます。目に見えないIFRAMEハックにより、親文書とIFRAMEのドキュメントの間でデータをやり取りすることを余儀なくされ、「リモートスクリプティング」メソッドさえも、JavaScript。 xmlhttprequestを使用する最新のajaxテクニックは、これらのKludgyメソッドを大幅に改善し、アプリがページを完全にリロードせずに取得と投稿の両方を作成できるようにします。この章では、すぐに飛び込んで、シンプルなAjax Webアプリケーションを構築します。これは、Webサーバー上のページを時限スケジュールに合わせたシンプルなサイトモニタリングアプリケーションです。しかし、サーバーを投票するために非同期HTTP要求の作成を開始する前に、XMLHTTPREQUESTオブジェクトのさまざまな方法など、すべての小さなブラウザの非互換性を処理することにより、XMLHTTPREQUESTクラスの使用を簡素化する必要があります。単純なajaxライブラリ XMLHTTPREQUESTクラスの使用を簡素化する1つのアプローチは、既存のコードライブラリを使用することです。 Ajax開発の人気の増加のおかげで、XmlhttpRequestを使いやすくするライブラリ、ツールキット、およびフレームワークが利用可能です。 しかし、xmlhttprequestクラスのインスタンスを作成するためのコードはかなり簡単であり、それを使用するためのAPIは理解しやすいので、必要な基本的なものを処理する非常にシンプルなJavaScriptライブラリを書きます。独自のライブラリを作成するプロセスを踏むことで、XMLHTTPREQUESTクラスがどのように機能するかを確認し、それらを使用することを決定したときに他のツールキットやライブラリからより多くを得るのに役立ちます。 ajaxクラスを開始< <ajaxと呼ばれる基本的なクラスを作成することから始めます。このクラスでは、xmlhttprequestクラスの機能をラップします。JavaScriptでオブジェクト指向プログラミングを行ったことはありません - ヘルプ！このセクションでは、JavaScriptでクラスとオブジェクトの作成を開始します。これをこれまでにやったことがない場合は、心配しないでください。オブジェクト指向プログラミングの基本を知っている限り、非常に簡単です。 JavaScriptでは、Java、C、または.NET言語の1つのような複雑な構文のクラスを宣言しません。コンストラクター関数を作成して、クラスのインスタンスを作成するだけです。私たちがする必要があるのは、です コンストラクター関数を提供します - この関数の名前はクラスの名前です キーワードを使用して構築されているオブジェクトにプロパティを追加し、その後にプロパティの名前とその後に JavaScriptのSpecial Function Constructor Syntaxを使用して、プロパティを追加するのと同じ方法で、オブジェクトにメソッドを追加する< <ul> <li>ここに、Helloworld：という単純なクラスを作成するコードがあります。 <li> オブジェクト指向プログラミングのためのJavaScriptのフレームワークは非常に軽量ですが、驚くほどうまく機能します。継承や多型などのより高度なオブジェクト指向の機能は、JavaScriptでは利用できませんが、これらの機能はAJAXアプリケーションでクライアント側ではめったに必要ありません。これらの機能が役立つ複雑なビジネスロジックは、常にWebサーバー上にあり、XMLHTTPREQUESTクラスを使用してアクセスする必要があります。この例では、1つのプロパティ（メッセージ）と1つのメソッド（SayMessage）を持つHelloWorldというクラスを作成します。このクラスを使用するには、以下に示すように、コンストラクター関数を呼び出すだけです。 <li>ここでは、HelloWorld（HWと呼ばれる）のインスタンスを作成し、このオブジェクトを使用して2つのメッセージを表示します。 SayMessageと呼ぶのは初めて、デフォルトの「Hello、World！」メッセージが表示されます。次に、オブジェクトのメッセージプロパティを「さようなら」に変更した後、Saymessageに電話し、「さようなら」が表示されます。これが現時点であまり意味がない場合でも心配しないでください。 Ajaxクラスの構築を進むにつれて、それはより明確になります。 Ajaxクラスのコンストラクター機能の始まりを次に示します。 このコードは、XMLHTTPREQUESTオブジェクトを操作するために、AJAXクラスで必要なプロパティを定義するだけです。それでは、オブジェクトにいくつかの方法を追加しましょう。 xmlhttprequestオブジェクトを設定し、私たちにリクエストを行う方法を伝えるいくつかの機能が必要です。 <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }xmlhttprequestオブジェクトの作成 最初に、initメソッドを追加します。これにより、xmlhttprequestオブジェクトが作成されます。残念ながら、XmlhttpRequestはFirefoxでわずかに異なって実装されています（この本では、Firefoxで何かがどのように機能するかを説明するたびに、Firefox、Mozilla、Camino、SeamOnkey、Safari、OperaなどのすべてのMozillaベースのブラウザーについて言及しています）。将来的にAJAXの開発を簡素化するには）、特定のブラウザをターゲットにしていない場合は、さまざまな方法でオブジェクトをインスタンス化する必要があります。 FirefoxとSafariは、XMLHTTPREQUESTと呼ばれるクラスを使用してXMLHTTPREQUESTオブジェクトを作成し、Internet Explorerバージョン6以前はMicrosoftのスクリプティングエンジンに組み込まれたActiveXObjectという特別なクラスを使用します。これらのクラスには異なるコンストラクターがありますが、同じように振る舞います。 クロスブラウザーコード 幸いなことに、ほとんどの最新のブラウザ（インターネットエクスプローラー6、Firefox 1.0、Safari 1.2、およびOpera 8以降のバージョン、およびこれらのブラウザのバージョン）は、全体的にWeb標準に接着しているため、Ajaxコードで多くのブラウザ固有の分岐を行う必要はありません。 これにより、通常、ブラウザベースのAJAXアプリケーションがデスクトップアプリケーションよりもクロスプラットフォームを開発および展開するために高速になります。 AJAXアプリケーションが利用できるパワーと機能が増加するにつれて、デスクトップアプリケーションはユーザーインターフェイスの観点からより少ない利点を提供します。 initメソッドは次のようになります： initメソッドは、xmlhttprequestオブジェクトが正常に作成されるまでxmlhttprequestオブジェクトを作成する各方法を通過します。このオブジェクトは、呼び出し関数に返されます。 <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }優雅に劣化します 古いブラウザとの互換性を維持する（「古い」という意味で、前のメモで言及した「モダンなブラウザ」よりも古いものを意味します）には、多くの追加コード作業が必要なため、アプリケーションがサポートするブラウザを定義することが重要です。 XMLHTMLRREQUESTクラスをサポートしていない古いブラウザー（例：Internet Explorer 4以前、Netscape 4以前）を介して大幅なトラフィックを受信することがわかっている場合、完全に除外するか、コードを書くか、優雅に劣化するようにコードを書く必要があります。つまり、機能性の低いブラウザで機能を消すだけでなく、これらのブラウザのユーザーが機能的に同等のものを受信するようにコードしますが、おそらくインタラクティブではない、または使いやすい形式です。 WebサイトがJavaScript Disabledで閲覧するユーザーを引き付ける可能性もあります。これらのユーザーに対応したい場合は、デフォルトで代替のオールドスクールインターフェイスを提供する必要があります。その後、最新のブラウザ用にJavaScriptを使用してオンザフライを変更できます。リクエストの送信 xmlhttprequestを作成するメソッドがあります。それでは、それを使用してリクエストを行う関数を書きましょう。このようなdoreqメソッドを開始します： <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } Doreqの最初の部分はinitを呼び出してxmlhttprequestクラスのインスタンスを作成し、成功していない場合は簡単なアラートを表示します。リクエストのセットアップ 次に、私たちのコードはthis.reqのオープンメソッドを呼び出します - xmlhttprequestクラスの新しいインスタンス - HTTPリクエストの設定を開始します： <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage();オープンメソッドには、3つのパラメーターが必要です 1。メソッド - このパラメーターは、使用するHTTPリクエストメソッドのタイプを識別します。最も一般的に使用される方法は、get and postです メソッドは症例に敏感です HTTP仕様（RFC 2616）によると、これらの要求方法の名前はケースに敏感です。また、仕様で説明されている方法はすべて大文字と定義されているため、すべての大文字でメソッドを入力することを常に確認する必要があります。 2。 URL - このパラメーターは、要求されているページを識別します（または、メソッドが投稿されている場合は投稿）。 ドメインの交差 通常のブラウザセキュリティ設定では、HTTPリクエストを別のドメインに送信することはできません。たとえば、ajax.netから提供されるページは、ユーザーがそのようなリクエストを許可していない限り、RemoteScripting.comにリクエストを送信できません。 3。非同期フラグ - このパラメーターがtrueに設定されている場合、JavaScriptはリクエストへの応答を待っている間に標準的に実行を継続します。リクエストの状態が変更されると、イベントが起動され、リクエストの変化する状態に対処できます。 パラメーターをFalseに設定すると、JavaScriptの実行がサーバーから戻ってくるまで停止します。このアプローチには、コールバック関数を使用するよりも少し単純であるという利点があります。コードにリクエストを送信した直後に応答の処理を開始できるためですが、大きな欠点は、リクエストがサーバー上で送信および処理されている間にコードが一時停止し、応答が受信されることです。サーバーと非同期的に通信する能力がAJAXアプリケーションの全体的なポイントであるため、これはtrueに設定する必要があります。 ajaxクラスでは、メソッドと非同期のプロパティが合理的なデフォルトに初期化されます（取得と真）が、もちろんターゲットURLを常に設定する必要があります。 oneadyStateChangeイベントハンドラーのセットアップ HTTP要求がサーバー上で処理されると、その進捗はReadyStateプロパティの変更によって示されます。このプロパティは、リクエストの開始から終了まで順番にリストされている次の状態のいずれかを表す整数です。 <ul> <li> 0：非初期化 - オープンはまだ呼ばれていません。 <li> 1：読み込み - 送信はまだ呼ばれていません。 <li> 2：ロードされた - 送信が呼び出されましたが、応答はまだ利用できません。 <li>3：インタラクティブ - 応答がダウンロードされており、ResponseTextプロパティには部分的なデータが保持されます。 4：完了 - 応答がロードされ、リクエストが完了しました。<li> xmlhttprequestオブジェクトは、ReadyStateChangeイベントを発射することにより、状態の各変更について説明します。このイベントのハンドラーで、リクエストのReadyStateを確認し、リクエストが完了したら（つまり、ReadyStateが4に変更されたら）、サーバーの応答を処理できます。 ajaxコードの基本アウトラインは次のようになります： 少しだけ「応答を処理するために物事を行う」方法について説明します。とりあえず、リクエストが送信される前にこのイベントハンドラーをセットアップする必要があることに留意してください。 <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }リクエストの送信 xmlhttprequestクラスの送信方法を使用して、httpリクエストを開始します。 送信メソッドは、投稿データに使用される1つのパラメーターを取ります。リクエストが単純なGETである場合、現在のリクエストのようにデータをサーバーに渡さない場合、このパラメーターをnullに設定します。 範囲の損失とこれ <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); onreadystateChangeには奇妙な変動的な割り当てが含まれていることに気付いたかもしれません。 この新しい変数である自己は、非同期イベントハンドラーを使用してJavaScript開発者がしばしば経験する「範囲の喪失」と呼ばれる問題の解決策です。非同期イベントハンドラーは、XmlhttpRequestと組み合わせて一般的に使用され、SettimeOutやSetIntervalなどの関数を使用して使用されます。このキーワードは、「現在のオブジェクト」を参照するオブジェクト指向のJavaScriptコードの速記として使用されます。簡単な例を次に示します。Scopetestと呼ばれるクラス： このコードは、scopetestクラスのインスタンスを作成し、そのオブジェクトのドテストメソッドを呼び出します。これは、「scopetestからの挨拶！」というメッセージを表示します。シンプルです、<？> さあ、scopetestクラスに簡単なxmlhttprequestコードを追加しましょう。 Webサーバーのホームページの簡単なGETリクエストを送信し、応答が受信されたら、this.messageとself.messageの両方のコンテンツを表示します。 では、どのメッセージが表示されますか？答えは図2.1に明らかになりました <self.messageは私たちが期待している挨拶メッセージですが、これに何が起こったのかを見ることができます。キーワードを使用すると、これは「このコードを実行しているオブジェクト」を参照する便利な方法です。しかし、これには1つの小さな問題があります。その意味は、オブジェクトの外側から呼び出されると変化します。これは、実行コンテキストと呼ばれるものの結果です。オブジェクト内のすべてのコードは同じ実行コンテキストで実行されますが、イベントハンドラーなどの他のオブジェクトから実行されるコードは、呼び出しオブジェクトの実行コンテキストで実行されます。これが意味することは、オブジェクト指向のJavaScriptを書いている場合、このキーワードを使用してイベントハンドラーのコード内のオブジェクトを参照することができないということです（上記のOnreadedStateChangeなど）。この問題は、範囲の喪失と呼ばれますこの概念がまだ100％明確でない場合は、それについてあまり心配しないでください。次の章では、この問題の実際のデモをご覧ください。それまでの間、コードの例で変数自己を見ると、スコープの喪失問題に対処するために含まれていることに注意してください。 図2.1。 scopetestクラスによって表示されるメッセージ <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145029554646.png" class="lazy" alt="独自のAjax Webアプリケーションを構築します" > 応答の処理 ここで、HTTPリクエストに対するサーバーの応答を処理するコードを記述する準備ができました。 onedeadedStateChangeイベントハンドラーに残した「応答を処理するためのものをしてください」というコメントを覚えていますか？私たちは、そのようなことをするためにいくつかのコードを書いた時です！関数は、次の3つのことを行う必要があります 応答がエラーであるかどうかを把握してください。 目的の形式で応答を準備します目的のハンドラー関数への応答を渡します。 <ol> ajaxクラスの内部関数に以下のコードを含めます：<li> 応答が完了すると、成功した要求がXMLHTTPRequestオブジェクトのステータスプロパティで返されるかどうかを示すコードが表示されます。ステータスプロパティには、完了した要求のHTTPステータスコードが含まれています。これは、要求されたページが欠落している場合はコード404、サーバー側のスクリプトでエラーが発生した場合は500、リクエストが成功した場合は200などです。これらのコードの完全なリストは、HTTP仕様（RFC 2616）に記載されています。 <li>数字は良くありませんか？ <li> コードを覚えておくのに苦労している場合は、心配しないでください。Statustextプロパティを使用できます。これには、エラーについてもう少し詳細に説明する短いメッセージが含まれています（「見つかりません」、「内部サーバーエラー」、「OK」）。 Ajaxクラスは、サーバーからの応答を3つの異なる形式で提供できます。通常のJavaScript文字列として、XMLドキュメントオブジェクトとして、W3C XML DOMを介してアクセス可能であり、リクエストを行うために使用された実際のXMLHTTPREQUESTオブジェクトとして。これらは、AjaxクラスのResponseFormatプロパティによって制御されます。これは、テキスト、XML、またはオブジェクトに設定できます。応答の内容は、XMLHTTPREQUESTオブジェクトの2つのプロパティを介してアクセスできます。 <ul>ResponseText - このプロパティには、サーバーからの応答が通常の文字列として含まれています。エラーの場合、WebサーバーのエラーページHTMLが含まれます。応答が返されている限り（つまり、ReadyStateは4になります）、このプロパティにはデータが含まれますが、予想されるものではない場合があります。 <li>Responsexml - このプロパティにはXMLドキュメントオブジェクトが含まれています。応答がXMLでない場合、このプロパティは空になります。 <li>ajaxクラスは、ResponseFormatプロパティをテキストに初期化するため、デフォルトでは、応答ハンドラーがサーバーからJavaScript文字列として渡されます。 XMLコンテンツを使用している場合は、ResponseFormatプロパティをXMLに変更できます。これは、代わりにXMLドキュメントオブジェクトを引き出します。本当に空想を得たい場合に使用できるもう1つのオプションがあります。実際のxmlhttprequestオブジェクトをハンドラー関数に返すことができます。これにより、ステータスやStatustextプロパティなどのものに直接アクセスでき、特定のクラスのエラーを異なる方法で処理する場合に役立つ可能性があります。たとえば、404エラーの場合に追加のログを完了します。正しいコンテンツタイプの設定 すべての主要なブラウザでのXMLHTTPREQUESTの実装では、応答をXMLとして処理するために、HTTP応答のコンテンツタイプを適切に設定する必要があります。コンテンツタイプのテキスト/XML（またはApplication/XML、またはApplication/XHTML XML）で返された、適切に形成されたXMLは、XMLHTTPREQUESTオブジェクトのResponseXMLプロパティを適切に設定します。 XML以外のコンテンツタイプは、そのプロパティのnullまたは未定義の値をもたらします。ただし、Firefox、Safari、およびInternet Explorer 7は、XMLHTTPREQUESTのXMLHTTPREQUESTのピックネス：XMLHTTPREQUESTクラスのオーバーリデミメタイプメソッドの周りを提供します。 SetmimeTypeメソッドを使用して、私たちのシンプルなAJAXクラスがこれにフックします。 このメソッドは、MIMETYPEプロパティを設定します。 次に、Doreqメソッドでは、Tryの内部でOverdridemimeTypeを呼び出すだけです。 非協力サーバーからコンテンツタイプのヘッダーをオーバーライドできることは、Webアプリケーションの前端と背面の両方を制御できない環境で非常に重要です。これは、今日のアプリの多くのアクセスサービスと多くの異なるドメインやソースからのコンテンツにアクセスできるため、特に当てはまります。ただし、この手法はInternet Explorer 6やOpera 8では機能しないため、今日のアプリケーションでの使用に適していない場合があります。応答ハンドラー HTTP 1.1仕様によると、200〜299のコードを持つ応答は、成功した応答です。 readedStateChangeイベントハンドラーは、応答のステータスを取得するために、ステータスプロパティを見て定義しました。コードが正しい範囲内にある場合、応答を成功させるために、redignedStateChangeイベントハンドラーは、応答ハンドラーメソッド（Handlerespプロパティによって設定されています）への応答を渡します。もちろん、応答ハンドラーは応答が何であるかを知る必要があるので、パラメーターとして応答を渡します。このプロセスは、dogetメソッドについて話すときに後で実行されます。 ハンドラーメソッドはユーザー定義であるため、コードは、メソッドを実行しようとする前にメソッドが適切に設定されていることを確認するために、CRSORYチェックも行います。エラーハンドラー ステータスプロパティが、リクエストにエラーがあることを示している場合（つまり、200〜299コード範囲の外側）、サーバーの応答はHeanddErrerプロパティのエラーハンドラーに渡されます。 Ajaxクラスはすでにエラーハンドラーの妥当なデフォルトを定義しているため、呼び出す前に定義されていることを確認する必要はありません。 handleerrプロパティは、次のように見える関数を指します： このメソッドは、ポップアップがブロックされていないことを確認するためにチェックし、新しいブラウザウィンドウにサーバーのエラーページコンテンツの全文を表示しようとします。このコードは試してみる...キャッチブロックを使用するので、ユーザーがポップアップをブロックした場合、エラーメッセージのカットダウンバージョンを表示し、より詳細なエラーメッセージにアクセスする方法を伝えることができます。 これは、スターターにとってはまともなデフォルトですが、エンドユーザーにはより少ない情報を表示することをお勧めします。これはすべて、パラノイアのレベルに依存します。独自のカスタムエラーハンドラーを使用したい場合は、Sethandlererrを使用することができます： <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } または、1つの真のハンドラー 単一の関数を使用して、成功した応答とエラーの両方を処理する可能性があります。 ajaxクラスの利便性方法であるsethandlerbothは、これを簡単に設定します： <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); sethandlerbothのパラメーターとして渡された関数は、成功した応答とエラーの両方を処理します。このセットアップは、クラスのResponseFormatプロパティをオブジェクトに設定するユーザーにとって役立つ場合があります。これにより、応答テキストまたはResponseXMLプロパティの値だけでなく、リクエストを作成するために使用されるXMLHTTPREQUESTオブジェクトが応答ハンドラーに渡されます。 リクエストの中止 <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; } 時々、自分の経験からわかるように、ウェブページはロードに非常に長い時間がかかります。 Webブラウザには停止ボタンがありますが、Ajaxクラスはどうですか？これは、中止方法が作用する場所です：<pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } このメソッドは、OnreadedStateイベントハンドラーを空の関数に変更し、XMLHTTPREQUESTクラスのインスタンスの中止メソッドを呼び出してから、作成したインスタンスを破壊します。そうすれば、中止されているリクエスト専用に設定されたプロパティはリセットされます。次回リクエストが行われたときに、initメソッドが呼び出され、それらのプロパティが再初期化されます。では、なぜonreadystateイベントハンドラーを変更する必要があるのですか？ XMLHTTPREQUESTの多くの実装は、リクエストの状態が変更されたことを示すために、中止されると、オンリーディステートイベントを発射します。さらに悪いことに、これらのイベントには4のReadyStateが完成していることがあります。これは、すべてが予想どおりに完了したことを示しています（これは部分的に真実です。あなたがそれについて考えるとすぐに、すべてが停止し、XMLHTTPREQUESTのインスタンスが別のリクエストを送信する準備ができているはずです）。明らかに、リクエストを中止したときに応答ハンドラーが呼び出されたくないので、中絶を呼び出す直前に既存のハンドラーを削除しません。 それをラップアップ< これまでのコードを考えると、Ajaxクラスはリクエストを行うために2つのことだけを必要とします。 ターゲットurl 応答のハンドラー関数 <ul> <li>これらのプロパティの両方を設定し、リクエストをキックオフするためにdogetというメソッドを提供しましょう： <li> 2つの予想されるパラメーター、URLとHandに加えて、関数には3番目のパラメーター：形式があることに気付くでしょう。これは、ハンドラー関数に渡されたサーバー応答の形式を変更できるオプションのパラメーターです。 <emat>形式の値を渡さない場合、AjaxクラスのResponseFormatプロパティはデフォルトのテキストになります。つまり、ハンドラーはResponseTextプロパティの値に渡されます。代わりに、XMLまたはオブジェクトを形式として渡すことができます。これにより、応答ハンドラーに渡されるパラメーターがXML DOMまたはXMLHTTPREQUESTオブジェクトに変更されます。 例：簡単なテストページ<pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); ついに、学んだことをすべてまとめる時が来ました！このAjaxクラスのインスタンスを作成し、それを使用してリクエストを送信し、応答を処理しましょう。クラスのコードがajax.jsというファイルにあるので、Ajaxクラスを使用するWebページは、a <script type = "text/javascript" src = "ajax.js">タグにajaxコードを含める必要があります。ページがAJAXコードにアクセスしたら、AJAXオブジェクトを作成できます。 このスクリプトは、Ajaxクラスの光沢のある新しいインスタンスを提供します。それでは、何か便利なことをさせてみましょう。 ajaxクラスで最も基本的なリクエストを行うには、このようなことができます。<pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } これにより、ajaxクラスのインスタンスが作成され、fakeserver.phpというページに簡単なGet requestを作成し、結果をテキストとしてハンド関数に戻します。 fakeserver.phpが使用したいXMLドキュメントを返した場合、次のようにすることができます： この場合、somepage.phpが実際に有効なXMLを提供しており、そのコンテンツタイプのHTTP応答ヘッダーがテキスト/XML（または適切な他の何か）に設定されていることを絶対に確認したいと思うでしょう。 <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage();ページの作成 ajaxオブジェクトを作成し、リクエストのために簡単なハンドラー関数を設定したので、今度はコードを実行する時が来ました。 偽のサーバーページ上記のコードでは、リクエストのターゲットURLがfakeserver.phpというページに設定されていることがわかります。このデモコードを使用するには、同じPHP対応のWebサーバーからajaxtest.htmlとfakeserver.phpの両方を提供する必要があります。これは、単純なASPを使用してIIS Webサーバーからも行うことができます。偽のサーバーページは、以下のPHPコードを使用してWebサーバーのさまざまな応答時間をシミュレートする非常にシンプルなページです。 これがこの小さなコードの廃棄物をすべて行います：3秒から12秒の間に待機してから、印刷します。 fakeserver.phpコードは、テキスト/プレーンへの応答のコンテンツタイプのヘッダーを設定します。渡すページのコンテンツに応じて、応答用の別のコンテンツタイプを選択できます。たとえば、XMLドキュメントを呼び出し元に渡している場合、自然にテキスト/XMLを使用したいと思うでしょう。これはASPでも同様に機能しますが、以下のコードが示すように、一部の機能（睡眠など）は簡単に入手できません。 この本を通して、サーバー側の例はすべてPHPで書かれていますが、ASP、ASP.NET、Java、Perl、またはWebサーバーを介してコンテンツを提供できる言語で簡単に書くことができます。 <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; }setmimeTypeメソッドを使用します< XMLとして解析する有効なXMLドキュメントが含まれていることがわかっている回答があると想像してくださいが、サーバーはそれをテキスト/プレーンとして提供することを主張しています。その応答は、SetMimeTypeに追加の呼び出しを追加することにより、FirefoxおよびSafariのXMLとして解析されるように強制することができます。 当然、サーバーからの応答が有効なXMLであることを確認し、ブラウザがFirefoxまたはSafariであることを確認できる場合にのみ、このアプローチを使用する必要があります。ページを押す 今、真実の瞬間が来ます！ローカルWebサーバーを押して、ajaxtest.htmlをロードして、何が得られるかを確認してください。すべてが正常に機能している場合、少しの瞬間が遅くなり、図2.2のような標準のJavaScriptアラートが表示されます。 <pre class="brush:php;toolbar:false">Example 2.2. ajax.js (excerpt) this.init = function() { if (!this.req) { try { // Try to create object for Firefox, Safari, IE7, etc. this.req = new XMLHttpRequest(); } catch (e) { try { // Try to create object for later versions of IE. this.req = new ActiveXObject('MSXML2.XMLHTTP'); } catch (e) { try { // Try to create object for early versions of IE. this.req = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { // Could not create an XMLHttpRequest object. return false; } } } } return this.req; }; 図2.2。 Ajaxクラスが予想どおりに機能していることの確認すべてが順調で、Ajaxクラスが適切に機能しているので、次のステップに移動する時が来ました。例：単純なajaxアプリ<h5> わかりました。そのため、Ajaxの素晴らしいパワーを使用して、「OK」を読む小さなJavaScriptアラートボックスを生み出していることは、この本を購入したときに念頭に置いていたものではないでしょう。このxmlhttprequestのものをもう少し便利にするために、いくつかの変更をサンプルコードに実装しましょう。同時に、この章の冒頭で言及した簡単な監視アプリケーションを作成します。アプリはWebサイトをpingし、応答を取り戻すのにかかる時間を報告します。基礎を敷設する 2つのJavaScriptファイルにリンクする簡単なHTMLドキュメントから始めます：ajax.jsには、アプリケーションのコードを含むappmonitor1.jsが含まれています。 ページの本文には実質的にコンテンツがないことに気付くでしょう。単一のdiv要素があります。これは、Ajax関数に依存するWebアプリのかなり典型的なものです。多くの場合、Ajaxアプリのコンテンツの多くはJavaScriptによって動的に作成されるため、通常、すべてのコンテンツがサーバーによって生成された非Ajax Webアプリケーションよりも、ページソースのボディにはるかに少ないマークアップが表示されます。ただし、Ajaxがアプリケーションの絶対に重要な部分ではない場合、アプリケーションの平易なHTMLバージョンを提供する必要があります。 aplmonitor1.jsファイルを、Ajaxクラスを使用するいくつかの簡単なコンテンツを使用して開始します。 <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } スタート変数を使用して、各リクエストが開始される時間を記録します。この図は、各リクエストにかかる時間を計算するために使用されます。タイミングリクエストの追加コードを使用してAjaxクラスの作品をガムにする必要がないように、グローバル変数を開始します。Ajaxオブジェクトへの呼び出しの直前と直後に開始の値を設定できます。 ajax変数は、ajaxクラスのインスタンスを保持するだけです。 ドポール関数は、実際にAJAXクラスを使用してHTTP要求を行います。元のテストページからdogetメソッドへの呼び出しを認識する必要があります。 <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage();ターゲットURLにパラメーターとして開始値を持つクエリ文字列を追加したことに注意してください。実際、サーバーでこの値を使用するつもりはありません。 Internet Explorerの熱心なキャッシングに対処するために、ランダムな値として使用しています。 IEキャッシュはすべて、XMLHTTPREQUESTで作成されたリクエストをすべて取得し、その「機能」を無効にする1つの方法は、ランダム値をクエリ文字列に追加することです。 Startのミリ秒値は、そのランダム値を倍増させることができます。このアプローチに代わるものは、XMLHTTPREQUESTクラスのSetRequestHeaderメソッドを使用して、リクエストにif修正型ヘッダーを設定することです。 最後に、dopollをwindow.onloadイベントに取り付けて、すべてをキックオフします。 ショーポールで結果を処理しますdogetに渡す2番目のパラメーターは、ajaxクラスに関数ショーポールへの応答を渡すように指示します。その関数のコードは次のとおりです <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }これはすべて非常に単純です。関数は単一のパラメーターを期待します。これは、すべてが予想どおりに進む場合、fakeserver.phpから返される文字列OKである必要があります。応答が正しい場合、コードは、応答がどれだけ時間がかかるかを把握するために必要な迅速な計算を行い、結果を含むメッセージを作成します。ディスプレイのためにそのメッセージをPollesultに渡しますこの非常に単純な実装では、予想される応答以外は、かなり簡潔で役に立たないメッセージになります。リクエストが失敗しました。次の章でこのアプリをアップグレードするとき、エラー条件の処理をより堅牢にします。 PollResultが設定されたら、それはPrintresult関数に渡されます： printresult関数には、ページの唯一のdiv内のshowpollから送信されたメッセージが表示されます。 上記のコードのテストに注意してください。これは、divに子ノードがあるかどうかを確認するために使用されます。これにより、テキストノードの存在がチェックされます。これには、以前の反復でこのDIVに追加したテキスト、またはページマークアップのDIV内に含まれていたテキストを含めることができます。既存のテキストノードを削除しない場合、コードは新しい結果を新しいテキストノードとしてページに追加するだけです。より多くのテキストが継続的に追加されている長いテキストの文字列を表示します。 <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage();innerhtmlを使用してみませんか？ divのinnerhtmlプロパティを単純に更新することができます。 innerhtmlプロパティはWeb標準ではありませんが、すべての主要なブラウザがサポートしています。そして、それが単一のコードであるという事実からわかるように（DOMメソッドに必要な4つの行と比較して）、DOMメソッドよりも使いやすい場合があります。ページにコンテンツを表示する方法は本質的に優れていません。場合によっては、これら2つのアプローチのレンダリング速度の違いに基づいてメソッドを選択することになる場合があります（InternHTMLはDOMメソッドよりも高速になります）。他の場合には、コードの明確さ、あるいは個人的な好みに基づいて決定を下すことができます。 もう一度プロセスを開始 最後に、Showpollは、以下に示すように、SettimeOutを使用して15秒で元のDoPoll関数への呼び出しをスケジュールすることにより、プロセス全体を開始します。 <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; }コードがドポール関数を継続的に呼び出すという事実は、ページが読み込まれると、httpがfakeserver.phpページを投票する要求を要求することを意味します。 Pollhand変数は、保留中の操作を追跡し、ClearTimeOutを使用してキャンセルできる間隔IDです。 Settimeout Callの最初のパラメーターであるDoPollは、アプリケーションの主な機能へのポインターです。 2番目は、秒単位での時間の長さを表し、リクエスト間で経過しなければなりません。 完全な例コード この簡単な監視アプリケーションを使用した最初の試用版のすべてのコードは次のとおりです。 優れたソフトウェアエンジニアリングの原則に従うために、JavaScriptコードをマークアップから分離し、2つの異なるファイルに入れました。 <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }この本のすべての例コードで同様のアプローチに従って、各例のマークアップ、JavaScriptコード、およびCSSを別々のファイルに分離します。この小さな監視アプリは非常に基本的であるため、CSSファイルがありません。次の章で見栄えを良くするためにいくつかのスタイルを追加します。 アプリを実行している ブラウザにページを読み込んでみてください。 Webサーバーのルートディレクトリにドロップし、ブラウザでページを開きます。 fakeserver.phpページが適切に応答している場合、図2.3に示すディスプレイのようなものが表示されます。 図2.3。単純な監視アプリケーションの実行 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145029764092.png" class="lazy" alt="独自のAjax Webアプリケーションを構築します" >さらに読み取り この章のテクニックと概念について詳しく知るのに役立つオンラインリソースをいくつか紹介します。 javascriptのオブジェクトモデル<h5> http://docs.sun.com/source/816-6409-10/obj.htm http://docs.sun.com/source/816-6409-10/obj2.htm <ul>Sun MicrosystemsがホストするJavaScriptのバージョン1.3のクライアント側JavaScriptガイドのオブジェクトに関するこれらの2つの章をご覧ください。最初の章では、JavaScriptのオブジェクトを使用する方法を理解するために必要なすべての基本概念について説明します。 2番目は、JavaScriptのプロトタイプベースの継承モデルについてより深くなり、JavaScriptを使用してオブジェクト指向のコーディングの力をより多く活用することができます。 <li>これは、JavaScriptオブジェクトを使用してプライベートインスタンス変数を作成するための簡単な紹介です。 JavaScriptのプロトタイプベースの継承スキームをより深く理解するのに役立ちます。 <li>xmlhttpRequest Apple開発者接続からの適切な参照ページです。 XMLHTTPREQUESTクラスの素晴らしい概要と、その方法とプロパティの参照テーブルを提供します。 2002年に最初に投稿されたこの記事は、新しい情報で引き続き更新されています。（取得または投稿するだけでなく）ヘッドリクエストの作成に関する情報、およびJavaScriptオブジェクト表記（JSON）、およびSOAP。 <sulplanetのFirefoxでのxmlhttprequest実装に関するXulplanetの徹底的なリファレンス。 もう1つの優れた概要を示します。これは、Overdridemimimetype、SetRequestheader、getResponseHeaderなど、XMLHTTPREQUESTオブジェクトの使用されていないメソッドの一部も示しています。繰り返しますが、このリファレンスはFirefoxの実装に焦点を当てていますこれは、XMLHTTPREQUESTの実装に関するMSDNに関するMicrosoftのドキュメントです。要約<h5> <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } <ul>システム管理者が投票とタイムアウトのしきい値の間の間隔を構成する方法<li> 監視プロセスを開始および停止する簡単な方法<li> 以前のリクエストの応答時間の棒グラフ。履歴リストのエントリの数はユーザー構成<li>になりますユーザー通知アプリケーションがリクエストを行うプロセスにあるとき<li> リクエストタイムアウトの優雅な取り扱い<li> 図3.1は、すべての拡張機能を使用して実行中のアプリケーションがどのように見えるかを示しています。このアプリケーションのコードは、AppMonitor2.htmlのマークアップ、Appmonitor2.jsのJavaScriptコード、およびAppmonitor2.cssのスタイルの3つのファイルに分割されます。まず、必要なすべてのファイルをappmonitor2.htmlにリンクします： <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); 図3.1。実行中のアプリケーション<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145029861987.png" class="lazy" alt="独自のAjax Webアプリケーションを構築します" > コードの整理 この新しい機能はすべて、アプリにもっと複雑になります。そのため、これはコード内で何らかの組織を確立するのに良い時期です（すべてをグローバル範囲に残すよりもはるかに優れたオプションです）。結局のところ、私たちは完全に機能するAJAXアプリケーションを構築しているので、それを適切に整理してもらいたいと思います。 <h5>オブジェクト指向のデザイン原則を使用して、アプリを整理します。そして、もちろん、アプリケーションのための基本クラスの作成から始めます - モニタークラス。通常、このようなJavaScriptでクラスを作成します： これは素晴らしく通常のコンストラクター機能であり、モニタークラス（または必要に応じてそれらの束）を簡単に使用することができます。 Settimeout < <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; }残念ながら、アプリケーションの場合、事態はそれほど簡単ではありません。私たちはアプリのSetimeOut（およびSetInterval）に多くの呼び出しを使用します。そのため、JavaScriptクラスを作成する通常の方法は、モニタークラスで面倒であることがわかります。 Settimeout関数は、コードの実行を遅らせるのに非常に便利ですが、重大な欠点があります。オブジェクトのそれとは異なる実行コンテキストでそのコードを実行します。（最後の章では、範囲の喪失と呼ばれるこの問題について少し話しました。）オブジェクトキーワードは、新しい実行コンテキストで新しい意味があるため、これは問題です。だから、クラス内でそれを使用すると、それは記憶喪失の突然の試合に苦しんでいます - それが何であるかはわかりません！< これを理解するのは少し難しいかもしれません。簡単なデモンストレーションを進めて、実際にこの迷惑が動作しているのを見ることができます。最後の章で私たちが見たScopetestクラスを覚えているかもしれません。まず、それは1つのプロパティと1つの方法を備えたシンプルなクラスでした：<pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } このコードの結果は、テキスト「Scopetestからの挨拶！」の予測可能なJavaScriptアラートボックスです。 Dotestメソッドを変更して、SetimeOutを使用してメッセージを1秒以内に表示しましょう。 挨拶メッセージの代わりに、このバージョンのコードから生じるアラートボックスは「未定義」と読み取られます。 SettimeOutでTimeTimeOutを呼び出したため、OnTimeOutは新しい実行コンテキスト内で実行されます。その実行コンテキストでは、これはもはやscopetestのインスタンスを指すのではないので、this.messageには意味がありません。 <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage();この範囲の喪失の問題に対処する最も簡単な方法は、シングルトンと呼ばれる特別なクラスをモニタークラスにすることです。 JavaScriptを使用したシングルトン 「シングルトン」は、そのクラスの「単一の」インスタンスのみがいつでも存在するためです。シングルトンにクラスを作るのは驚くほど簡単です： 機能の前に新しいキーワードを使用すると、「ワンショット」コンストラクターが作成されます。 Scopetestの単一のインスタンスを作成し、完了しました。これを使用して、これ以上のScopetestオブジェクトを作成することはできません。このシングルトンオブジェクトのドテストメソッドを呼び出すには、クラスの実際の名前を使用する必要があります（その1つのインスタンスのみがあるため）： <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; }それはすべてうまくいっていますが、スコープの損失の問題を解決していません。今すぐコードを試してみると、以前に見た同じ「未定義の」メッセージが表示されます。これは、scopetestのインスタンスを参照していないためです。ただし、シングルトンを使用すると、問題を解決する簡単な方法が得られます。私たちがしなければならないのは、オブジェクトの実際の名前を使用することです。 <scopetestには1つのインスタンスしかありません。これではなく実際の名前を使用しているため、Scopetestのどのインスタンスがここで参照されているかについて混乱はありません。このコードを実行すると、「scopetestからの挨拶！」の期待値が表示されます。 JavaScriptアラートボックスで 今、私はオブジェクトコード全体で実際のオブジェクト名を使用することにうんざりしており、できる限りこのようなショートカットキーワードを使用するのが好きです。したがって、通常、私はこれの代わりに使用できる可変自己を作成し、それを各メソッドの上部にあるオブジェクト名に向けてください： <pre class="brush:php;toolbar:false">Example 2.2. ajax.js (excerpt) this.init = function() { if (!this.req) { try { // Try to create object for Firefox, Safari, IE7, etc. this.req = new XMLHttpRequest(); } catch (e) { try { // Try to create object for later versions of IE. this.req = new ActiveXObject('MSXML2.XMLHTTP'); } catch (e) { try { // Try to create object for early versions of IE. this.req = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { // Could not create an XMLHttpRequest object. return false; } } } } return this.req; }; これは、それと同じくらい短い方法では少しばかげているように見えますが、コードの長いチャンクでは、オブジェクトを参照するために使用できる速記のソリューションがあると思います。私は自己を使用していますが、あなたが私を使うことができます。 <pre class="brush:php;toolbar:false">Example 2.3. ajax.js (excerpt) this.doReq = function() { if (!this.init()) { alert('Could not create XMLHttpRequest object.'); return; } };モニターオブジェクトの作成 <setimeOutからスコープの損失の問題を修正するコード組織の計画があり、ベースモニタークラスを作成する時が来ました。<pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } 最初の4つのプロパティ、Targeturl、Pollinterval、Maxpollentries、およびTimeoutThresholdは、クラスの初期化の一部として初期化されます。アプリケーションの構成で定義されている値を引き受けます。次のセクションで説明します。他のプロパティに関する簡単な概要です： <ul>ajax - 監視しているサーバーにHTTP要求を行うAJAXクラスのインスタンス。 <li> start - 最後のリクエストが送信された時間を記録するために使用されます。 <li>Pollarray - サーバーの応答時間を保持する配列。一定のmax_poll_entriesは、この配列に保持されているアイテムの数を決定します。 Pollhand、Timeouthand - Settimeoutが返すインターバルIDは、2つの異なるプロセスを呼びます。主なポーリングプロセスと、各リクエストのユーザー定義のタイムアウト期間を制御するタイムアウトウォッチャー。 <li>reqstatus - リクエストが進行中のときにユーザーに通知するステータスアニメーションに使用されます。これを達成したコードはかなり複雑であるため、別のシングルトンクラスを作成して世話をします。 reqstatusプロパティは、そのクラスの単一のインスタンスを指します。 <li>アプリケーションの構成と初期化このアプリケーションを見ているウェブマスターは、それが非常にクールだと思うかもしれませんが、彼または彼女が望む最初のことの1つは、アプリのポーリング間隔を構成する簡単な方法、またはアプリが監視しているサイトに要求する間に経過する時間です。グローバル定数を使用してポーリング間隔を構成するのは簡単です。このスクリプトのユーザーがポーリング間隔を設定することを非常に簡単にするために、コードのこのセクションをappmonitor2.html：<li>のヘッド内のスクリプト要素に配置します。これらの変数名はすべてのキャップで書かれていることに気付くでしょう。これは、それらが定数のように動作することを示しています - コードの早い段階で設定された値であり、コードが実行されたときに変更されません。定数は多くのプログラミング言語の機能ですが、残念ながら、JavaScriptはそれらの1つではありません。（JavaScriptの新しいバージョンでは、Constkeywordで実際の定数を設定できますが、この施設は（多くの最新のブラウザーでも）広くサポートされていません。）これらの定数は、Classの最初の4つのプロパティ、Targeturl、Pollinterval、Maxpollentries、およびTimeoutThresholdに直接関係していることに注意してください。これらのプロパティは、クラスの初期方法で初期化されます。 <h5> クラスの一部のプロパティの一部を初期化するだけでなく、INITメソッドは2つの方法も呼び出します。Pollingの開始と停止を担当するToggleappstatusと、Reqstatusオブジェクトのinitメソッドです。 reqstatusは、私たちがしばらく前に議論したステータスシングルトンクラスのインスタンスです。このinitメソッドは、window.onloadイベントに関連付けられています。<pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } <h5> UIのセットアップこのアプリケーションの最初のバージョンは、ページが読み込まれたときに始まり、ブラウザウィンドウが閉じるまで実行されました。このバージョンでは、ユーザーがポーリングプロセスのオンまたはオフを切り替えるために使用できるボタンを提供します。 ToggleAppStatusメソッドは、これを私たちのために処理します： <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage();わかりました。したがって、toggleappstatusは実際には作業を行いませんが、ボタンを開始するボタンを停止ボタンに変更し、その逆を変更するメソッドを呼び出します。これらの各方法を詳しく見てみましょう。 ToggleButton Method このメソッドは、「停止」状態と「開始」状態の間のメインアプリケーションを切り替えます。ドンマニピュレーション方法を使用して適切なボタンを動的に作成し、正しいテキストとオンクリックイベントハンドラーを割り当てます： この方法の唯一のパラメーターは、停止し、真実である可能性があり、ポーリングが停止されたことを示すか、またはポーリングが開始されたことを示しています。この方法のコードで確認できるように、<pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; }ボタンが作成され、アプリケーションが停止した場合に開始を表示するように設定されるか、アプリケーションが現在サーバーにポーリングしている場合は停止します。また、ボタンのオンクリックイベントハンドラーとしてPollserverstartまたはPollserverStopのいずれかを割り当てます。これらのイベントハンドラーは、それぞれポーリングプロセスを開始または停止します。 このメソッドがinit（toggleappstatus経由）から呼び出されると、停止がtrueに設定されているため、アプリケーションの開始時にボタンが開始されます。このコードがIDボタンアレアを使用してdivを必要とするので、今すぐマークアップに追加しましょう。 TogglestatusMessage Method 「start」または「停止」という単語のあるボタンを表示するだけで、プログラマーやエンジニアがアプリケーションのステータスを把握するために必要なすべてかもしれませんが、ほとんどの普通の人は、アプリケーションで何が起こっているのかを解決するために少し明確で明白なメッセージを必要とします。 <pre class="brush:php;toolbar:false">Example 2.2. ajax.js (excerpt) this.init = function() { if (!this.req) { try { // Try to create object for Firefox, Safari, IE7, etc. this.req = new XMLHttpRequest(); } catch (e) { try { // Try to create object for later versions of IE. this.req = new ActiveXObject('MSXML2.XMLHTTP'); } catch (e) { try { // Try to create object for early versions of IE. this.req = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { // Could not create an XMLHttpRequest object. return false; } } } } return this.req; };アプリケーションのこのアップグレードされたバージョンは、ページの上部にステータスメッセージを表示し、アプリケーションの全体的な状態（停止または実行中）とポーリングプロセスのステータスについてユーザーに伝えます。アプリケーションのステータスを表示するには、アプリのステータスを記載するアプリケーションのステータスバーに、停止またはアプリステータス：実行の優れた明確なメッセージを配置します。 マークアップで、ボタンが表示される場所にステータスメッセージを挿入しましょう。マークアップにメッセージの「アプリステータス」部分のみを含めます。メッセージの残りの部分は、ID currentAppStateを使用してスパンに挿入されます。 TogglestatusMessageメソッドは、現在の適合スパン内に表示できる単語を切り替えます。 UIがセットアップされると、アプリケーションがプライミングされ、投票と記録の応答時間を開始する準備ができています。 進行中の作業の確認 ここまで来たので、あなたの作品が動作しているのを見ることができてうれしいですよね？残念ながら、私たちはまだアプリケーションに多くのゆるい終わりを持っています。ステータスと呼ばれるシングルトンのクラスについて簡単に言及しましたが、まだ作成していません。しかし、決して恐れることはありません！いくつかのクラスと機能スタブですぐにアプリケーションを稼働させることができます。そのステータスシングルトンクラスを1つの空のメソッドで作成することから始めます。 <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }ステータスクラスはモニタークラスで使用されているため、モニターの前にステータスを宣言する必要があります。 次に、ボタンのオンクリックイベントハンドラーをモニタークラスに追加します。アラートダイアログを表示して、舞台裏で何かが起こっている場合に何が起こっているのかを知るようにします。 これら2つの簡単なスタブを配置すると、アプリケーションがテストドライブの準備ができている必要があります。 <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); 図3.2。謙虚な始まり<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145030111068.png" class="lazy" alt="独自のAjax Webアプリケーションを構築します" > 図3.2に示すディスプレイの[スタート]ボタンをクリックすると、今後の大きなものを約束するアラートボックスが表示されます。これらの約束をうまく始めましょう。 サーバーのポーリング 最初のステップは、スタートボタンのオンクリックイベントハンドラー、Pollserverstart：を具体化することです。 <h5> このコードはすぐにDOPOLLメソッドを呼び出します。これは、第2章で作成したApp Monitorのように、基本的なXMLHTTPREQUESTと同様に、サーバーを投票するためにHTTPリクエストを作成する責任があります。リクエストが送信されたら、コードはToggleappstatusを呼び出し、ポーリングが進行中であることを示すために誤って渡します。 投票間隔はどこですか？投票間隔を設定することについてのこのすべての話の後、私たちのコードはサーバーへのリクエストですぐにジャンプするのだろうと思うかもしれません。時間遅延はどこですか？答えは、最初のリクエストで時間遅延を望まないということです。ユーザーがボタンをクリックし、何かが発生する前に10秒の遅延がある場合、アプリが壊れていると思われます。アプリケーションが実行された後に発生する後続のすべてのリクエストの間の遅延が必要ですが、ユーザーが最初にそのボタンをクリックすると、ポーリングをすぐに開始する必要があります。 <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; }アプリモニターのこのバージョンのDoPollと最後の章で見たものの唯一の違いは、クラスのプロパティに接頭するために自己を使用することと、SetimeOutへの呼び出しです。見てください： SettimeOutへの呼び出しは、タイムアウトのしきい値が渡されたら、ブラウザにHandletimeoutを呼び出すように指示します。また、返されたインターバルIDを追跡しているため、応答がshowpollによって受信されたときにHandletimeoutへの呼び出しをキャンセルできます。 <showpollメソッドのコードは次のとおりです。これは、サーバーからの応答を処理します。<pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } この方法が行う最初のことは、DoPollの終わりに作成されたHandletimeOutへの遅延コールをキャンセルすることです。この後、ステータスクラスのインスタンスにアニメーションを停止するように伝えます（少し後で詳細を検討します）。これらの呼び出しの後、showpollは応答が問題ないことを確認するためにチェックし、その応答がサーバーから戻ってくるのにどれだけの時間がかかったかを計算します。 AJAXクラスのエラー処理機能は、サーバーからのエラーを処理する必要があるため、スクリプトはOK以外のものを返すべきではありません。 応答時間を計算したら、showpollはupdatepollarrayでその応答時間を記録し、結果をprintresultで表示します。次のセクションでこれらの両方の方法を見ていきます。 最後に、Dopolldelayで別の投票をスケジュールします。これは、投票間隔が経過したらDoPollへの別の呼び出しをスケジュールする非常に簡単な方法です。 この時点までの進捗状況を確認するには、さらにいくつかのスタブメソッドを追加する必要があります。まず、StartProcとStopProcをステータスクラスに追加しましょう。 <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage();モニタークラスにいくつかのスタブメソッドを追加しましょう： <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; }今では、進捗状況をテストする準備が整いました。 appmonitor2.htmlをWebブラウザで開いて、[開始]をクリックして、fakeserver.phpが睡眠から目覚めてページに返送するのを待ちます。 2つの結果のいずれかが期待できます。ページで応答が受信され、図3.3に示すものと同様のダイアログが表示されるか、図3.4に示すタイムアウトメッセージが表示されます。 <pre class="brush:php;toolbar:false">Example 2.2. ajax.js (excerpt) this.init = function() { if (!this.req) { try { // Try to create object for Firefox, Safari, IE7, etc. this.req = new XMLHttpRequest(); } catch (e) { try { // Try to create object for later versions of IE. this.req = new ActiveXObject('MSXML2.XMLHTTP'); } catch (e) { try { // Try to create object for early versions of IE. this.req = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { // Could not create an XMLHttpRequest object. return false; } } } } return this.req; }; 図3.3。 AJAXアプリケーションが受け取った応答< 図3.4に示すタイムアウトメッセージを受け取っても心配しないでください。 AJAXアプリケーションでは、タイムアウトのしきい値は現在10秒に設定されており、そのfakeserver.phpは現在、3〜12の間でランダムに選択された秒数で眠っています。乱数が10以上の場合、AJAXアプリケーションはタイムアウトを報告します。 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145030396431.png" class="lazy" alt="独自のAjax Webアプリケーションを構築します" > 図3.4。 ajaxアプリケーションは希望をあきらめます 現時点では、ポーリングを停止する方法を実装していないため、ページをリロードするか、ブラウザウィンドウを閉じることで停止する必要があります。 タイムアウトの処理 これまでに書いたコードを実行している場合、タイムアウトが報告されていても、その後すぐにリクエストの応答時間を報告するメッセージが表示されることに気付いたでしょう。これは、HandletimeOutは現時点では単純なスタブに過ぎないために発生します。このスタブの上に構築して、この副作用が得られないようにしましょう。<pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }<pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); ここで、HandletimeoutはStoppollを呼び出して、アプリケーションがサーバーのポーリングを停止します。タイムアウトが発生し、ユーザーインターフェイスを更新し、最後にDopolldelayを介してDoPollへの別の呼び出しを設定することを記録します。ポーリングを停止するコードを別の関数に移動しました。なぜなら、後でそれを再検討し、それを強化する必要があるからです。現在、Stoppollメソッドは、Ajaxクラスの中止方法を介してHTTP要求を中止するだけです。ただし、この関数が処理しないシナリオはいくつかあります。ポーリングプロセスを停止するための完全なコードを作成すると、これらに後で対処しますが、タイムアウトを処理する目的で、Stoppollは問題ありません。 <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; }さて、アプリケーションをリロードすると、タイムアウトは期待どおりに実行されます。 応答時間barグラフ <h5>さて、監視アプリの新しいバージョンの肉に！アプリケーションに、最新のエントリの単一のエントリだけでなく、過去の応答時間のリストを表示したいと考えています。そのリストに迅速かつ簡単に読みやすい方法で表示したいと考えています。ランニングバーグラフディスプレイは、ジョブに最適なツールです。 Pollarrayの実行リスト< すべての応答時間は、モニタークラスのPollarrayプロパティに保存されている配列になります。この配列は、直感的にupdatePollarrayメソッドを使用して更新されます。これは非常にシンプルな方法です： コードは非常に簡単ですが、私たちが使用した関数のいくつかはわずかに混乱している名前を持っています。アレイオブジェクトのUnshiftメソッドは、新しいアイテムを配列の最初の要素に配置し、図3.5に示すように、配列のコンテンツの残りを1つの位置でシフトします。 <pre class="brush:php;toolbar:false">Example 2.2. ajax.js (excerpt) this.init = function() { if (!this.req) { try { // Try to create object for Firefox, Safari, IE7, etc. this.req = new XMLHttpRequest(); } catch (e) { try { // Try to create object for later versions of IE. this.req = new ActiveXObject('MSXML2.XMLHTTP'); } catch (e) { try { // Try to create object for early versions of IE. this.req = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { // Could not create an XMLHttpRequest object. return false; } } } } return this.req; }; 図3.5。 Unshiftを使用して果物を挿入します< 配列がユーザー定義の最大長を超えた場合、updatePollarrayは端からアイテムを「ポップ」することで切り捨てます。これは、配列の最後のアイテムを削除するだけであるPOPメソッドによって実現されます。（メソッド名のポップは非常に奇妙に思えるかもしれませんが、スタックと呼ばれるデータ構造を理解すると、より理にかなっています。スタックは、スタックに追加された順序の逆にのみアクセスできる多くのアイテムを保存します。スタックにアイテムを「プッシュ」して、それを追加するためにスタックを撤回するために担当者が元に設計されていたポップを使用して設計されていました。アレイの最後のアイテムを削除します。）上部にアイテムを追加して配列の下部からアイテムを削除する理由は、ディスプレイで最新のエントリを上部に表示し、古いエントリが徐々に下に移動することです。 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145030523677.png" class="lazy" alt="独自のAjax Webアプリケーションを構築します" >結果を表示 Pollarrayで結果を更新したら、Printresultメソッドを使用してそれらを表示できます。これは実際にはクールな部分です。ユーザーは、AJAXアプリケーションと、コンテンツを更新するためにページ全体を更新する必要がある古いスタイルのアプリとの違いを直接体験します。 レンダリングページpartials Ajax Jargonでは、応答時間のリストを保持するページのチャンクは、ページPartialと呼ばれます。これは、ページの残りの部分とは別に更新されるWebページの領域を指します。 サーバーへの非同期要求に応じてWebページのチャンクを更新することは、「ページの部分的なレンダリング」と呼ばれます。 PrintresultメソッドはPollarrayを繰り返し、DOMメソッドを使用して、ID PollResultsを使用してDIV内に投票結果のリストを描画します。まず、そのdivをマークアップに追加することから始めます： 今では、Printresultメソッドの準備が整いました： <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } ここにかなりありますので、この方法を段階的に見てみましょう。 <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); いくつかの変数を初期化した後、この方法はPolldivからすべてを削除します。WhileLoopはRemoveChildを繰り返し使用して、Polldivからすべての子ノードを削除します。次は、更新された結果の配列を飛び越えて表示するループ用のシンプルなものがあります。 <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; }この配列内の各アイテムの結果のメッセージを生成します。以下に示すように、タイムアウト（0として記録されます）は（タイムアウト）のメッセージを生成します。 次に、DOMメソッドを使用して、リスト内の各エントリのマークアップを動的に追加します。実際には、リスト内のエントリごとに次のHTMLをJavaScriptに作成します。 bar divの幅は実際の応答時間を反映するように変更され、タイムアウトは赤で表示されますが、このリストのすべてのエントリは同じです。その背景色を表示するには、divに何かを入れる必要があることに注意してください。 DIVに固定幅を与えたとしても、divが空であるかどうかは背景色が表示されません。これは迷惑ですが、簡単に修正できます。 このマークアップを挿入するために使用するコードを見てみましょう： <pre class="brush:php;toolbar:false">Example 2.2. ajax.js (excerpt) this.init = function() { if (!this.req) { try { // Try to create object for Firefox, Safari, IE7, etc. this.req = new XMLHttpRequest(); } catch (e) { try { // Try to create object for later versions of IE. this.req = new ActiveXObject('MSXML2.XMLHTTP'); } catch (e) { try { // Try to create object for early versions of IE. this.req = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { // Could not create an XMLHttpRequest object. return false; } } } } return this.req; }; DOM操作機能を使用したことがない場合、このコードは複雑に思えるかもしれませんが、非常に簡単です。名前の付いたCreateElementメソッドを使用して要素を作成します。次に、これらの要素オブジェクトのそれぞれのプロパティに値を割り当てます。 IFステートメントの直後に、各応答を生成するために取られた秒数に応じて、BAR DIVのピクセル幅を設定するコードを見ることができます。その時間の数値を20を掛けて合理的な幅を取得しますが、ページで利用できる水平スペースの量に応じて、より高い数または低い数を使用することをお勧めします。要素にテキストを追加するには、createTextNodeをAppendChildと組み合わせて使用します。これは、他の要素内に要素を配置するためにも使用されます。createTextNodeおよび非壊れたスペース上記のコードでは、U00A0を使用して非壊れた空間を作成します。通常の＆nbsp;を使用しようとする場合ここでのエンティティ、createTextNodeは、アンパサンドを＆amp;に変換することにより、「役立つ」ことを試みます。この結果は、その＆nbsp;ページに表示されます。回避策は、逃げ出したユニコードの非壊れたスペースを使用することです：u00a0。 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145030681400.png" class="lazy" alt="独自のAjax Webアプリケーションを構築します" > 図3.6。アプリケーションが形になり始めました コードの最後の部分はすべてのdiv要素をまとめ、PollResult divをPollResults divに入れます。図3.6は、実行中のアプリケーションを示しています 「瞬時に保持して」、あなたは考えているかもしれません。「私たちが見ているはずの棒グラフはどこにありますか？」 最初のバーはそこにありますが、白で白で表示されています。アプリケーションのCSS：を通して見えるようにしましょう CSSの主な関心のあるポイントは、フロート：時間の左宣言とbar div要素であり、棒グラフの時間リストと色付きのバーを構成します。それらを左に浮かべることが、それらを並べて表示するものです。ただし、このポジショニングテクニックが機能するためには、クリアボスクラスの要素がこれらの2つのdivの直後に表示されなければなりません。 <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }これは、Ajaxが動作しているのを見ることができる場所です。これらすべての異なるテクノロジー（XMLHTTPREQUEST、W3C DOM、およびCSS）のビットとピースを一緒に配線し、JavaScriptで制御します。プログラマーは、CSSの最大の問題と、コード内のインターフェイス要素を構築する実用性を備えた最大の問題を経験します。 AJAXプログラマーとして、CSSの世話をするためにライブラリに依存しようとするか、仕事を成し遂げるのに十分な学習をすることができます。トピックに関する多くの質問に喜んで喜んでいる人を知っているのは便利です。たとえば、CSSに関する良い本（たとえば、CSSアンソロジー：101エッセンシャルヒント、トリック、ハック）。 図3.7。私たちの棒グラフの始まり 図3.7が示すように、CSSが配置されたので、アプリケーションディスプレイに棒グラフが表示されます。 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145030772414.png" class="lazy" alt="独自のAjax Webアプリケーションを構築します" > アプリケーションの停止 アプリを実行した後、Pollserverstartメソッドの最終アクションは、ToggleappStatusに電話してアプリケーションの外観を切り替えることです。 gleappstatusステータスディスプレイをアプリのステータスに変更し、[スタート]ボタンを[停止]ボタンに切り替え、PollserverStopメソッドをボタンのオンクリックイベントに添付します。 PollserverStopメソッドは進行中のポーリングプロセスを停止し、アプリケーションをバックバックして、適切に停止しているように見えるようにします。<pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } このコードは、この章で前に追加したStoppollメソッドを再利用します。現時点では、その方法は現在のHTTP要求を中止することです。これは、タイムアウトを処理しているときに問題ありません。ただし、この方法は他の2つのシナリオも処理する必要があります。これらのシナリオの最初は、投票間隔中にメソッドが呼び出されたときに発生します（つまり、HTTPリクエストへの応答を受け取った後、次のリクエストが送信される前に）。このシナリオでは、DoPollへの遅延コールをキャンセルする必要があります。 このメソッドが処理できる必要がある2番目のシナリオは、リクエストを送信した後、しかし応答を受信する前にStoppollが呼び出されると発生します。このシナリオでは、タイムアウトハンドラーをキャンセルする必要があります。両方の呼び出しのインターバルIDを追跡すると、ClearTimeOutへの2つの呼び出しでこれらのシナリオを処理するためにStoppollを変更できます。 ここで、棒グラフの下にある[開始/停止]ボタンをクリックするだけで、ポーリングプロセスを停止して開始できるはずです。 ステータス通知 AJAXのコンテンツを非同期に更新する能力、および更新がページの小さな領域のみに影響する可能性があるという事実は、ステータス通知の表示をAJAXアプリの設計と開発の重要な部分にします。結局のところ、アプリのユーザーはアプリが何をしているのかを知る必要があります。 <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage();Web開発の昔に戻って、コンテンツの変更を反映するためにページ全体をリロードする必要があったとき、アプリケーションがサーバーと通信しているときにエンドユーザーにとっては完全に明確でした。しかし、私たちのAjax Webアプリはバックグラウンドでサーバーに通信することができます。つまり、ユーザーは、何かが起こっていることを示す完全なページのリロードを表示しません。 では、Ajaxアプリのユーザーは、ページがサーバーと通信していることをどのようにして知っていますか？まあ、ブラウザクロムに表示される古いスピニンググローブやWaving Flagアニメーションの代わりに、AJAXアプリケーションは通常、小さなアニメーションや視覚的な移行を使用して処理が進行中であることをユーザーに通知します。通常、CSSで達成されるこれらの移行は、気を散らすことなくユーザーの目をキャッチします！ - そして、アプリケーションが何をしているかについてのヒントを提供します。優れたAjaxアプリデザインの重要な側面は、これらの種類の通知の開発です。 <h5>ステータスアニメーション アプリケーションの上部には、アプリが実行されているか停止しているかどうかをユーザーに伝える小さなバーが既にあるので、これはもう少しステータス情報を表示するかなり論理的な場所です。ボールの回転や走っている犬のようなアニメーションは、アプリケーションが忙しいことを示す良い方法です。通常、動きを使用してアクティビティを示す画像を表示する必要があります。ただし、ユーザーの注意をリストから遠ざけるキューを使用したり、結果を読み込もうとしているときに人々を注意散漫に追いやったりすることは望まないので、図3.8に示すゆっくりとパルスのアニメーションを使用します。このアニメーションには、CSSで軽量で実装しやすいという利点が追加されています。フラッシュプレーヤーは必要ありません。白いバーの右側は未使用のスペースであるため、この種の通知に理想的な場所になります。ユーザーインターフェイスの上部にあるため、簡単に見ることができますが、右側にあります。 図3.8。私たちのパルスステータスアニメーション<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145030949774.png" class="lazy" alt="独自のAjax Webアプリケーションを構築します" > このアニメーションをホストするには、ドキュメントのステータスメッセージDIVのすぐ下にID PollingMessageを備えたDIVを追加します。 このdivを配置するには、スタイルシートにcssルールを追加します： このアニメーションは、ページの右側に配置されています。 <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }ブラウザでページを開くと、アニメーションが表示されることはありません。現時点では白い背景に白い箱にすぎません。必要に応じて、PollingMessageにコンテンツを追加して、それがどこに配置されているかを確認してください。 setintervalとスコープの損失<pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); JavaScript SetIntervalは、繰り返し発生するタスクを処理する明白で簡単な方法です。たとえば、パルスアニメーションを制御します。 setintervalのすべてのCSSガイレーションは、かなり興味深いかさばるコードをもたらします。したがって、前に述べたように、ステータスアニメーションのコードを独自のクラス（ステータス）に入れて、モニタークラスから参照および使用できることは理にかなっています。これを読んでいる巧妙な開発者の一部は、SetimeOutと同じスコープの喪失の問題に苦しんでいるとすでに推測しているかもしれません。オブジェクトキーワードこれが失われるようになります。モニタリングアプリケーションでは、ステータスアニメーションが1つだけ対処する必要があるため、モニタークラスで行ったように、便宜的なアプローチを取り、ステータスクラスAシングルトンクラスを作成することは理にかなっています。 ステータスの設定 以前のコードを動作させるために、既に作成したステータススタブにいくつかのプロパティを追加することから始めましょう。 ステータスオブジェクトには、4つのプロパティがあります。 <ul> <li>Curolopactyプロパティは、PollingMessage Divの不透明度を追跡します。 setintervalを使用して、このdivの不透明度を迅速に変更し、パルスとフェード効果を生成します。 PROCプロパティは、HTTP要求が現在進行中であるか、正常に完了しているか、完了前に中止されたかどうかを示す3つの州のスイッチです。 <li>ProcIntervalプロパティは、アニメーションを制御するSetIntervalプロセスのインターバルIDを保存するためのものです。実行中のアニメーションを停止するために使用します。 <li>divプロパティは、PollingMessage Divへの参照です。ステータスクラスは、PollingMessage DivのCSSプロパティを操作してアニメーションを作成します。 <li>初期化 divプロパティをPollingMessageにバインドするには、initメソッドが必要です。 initメソッドには、Setalphaという名前のメソッドへの呼び出しも含まれています。 インターネットエクスプローラーメモリリーク<pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } クラスプロパティとして使用されるdom要素参照（Div、TD、またはスパン要素などを指す変数）は、インターネットエクスプローラーのメモリリークの悪名高い原因です。そのようなプロパティをクリアせずに（nullに設定することで）クラスのインスタンスを破壊すると、メモリは回収されません。 window.onloadイベントを処理するモニタークラスAクリーンアップメソッドに追加しましょう。 このメソッドは、そのクラスのクリーンアップ方法を呼び出し、reqstatusプロパティをnullに設定することにより、ステータスクラスをクリーンアップします。 ステータスクラスのクリーンアップ方法は、IEハウスキーピングを行います。 <ed> NullへのDivの参照を設定しないと、Internet Explorerはデスグリップでその変数に割り当てられたメモリを保持し、ページをリロードするたびにメモリがバルーンを使用することがわかります。 実際には、これは私たちの小さなアプリケーションにとってそれほど問題ではありませんが、多くのDHTMLを持っている大規模なWebアプリでは深刻な問題になる可能性があります。これがあなたにとって問題にならないように、あなたのコードのDOM参照をクリーンアップする習慣に入るのは良いことです。 <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage();displayopacityメソッド <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; }ステータスクラスの中心的なコードは、DisplayOpacityメソッドに存在します。これには、PollingMessage Divの適切なCSSプロパティを変更するために必要なブラウザ固有のコードが含まれています。コードは次のとおりです オブジェクトのCurropacityプロパティは、PollingMessage Divを設定する不透明度を表します。私たちの実装では、0〜100の範囲の整数スケールを使用します。これは、MozillaとSafariが予想されるゼロから予想されるゼロまでではなく、インターネットエクスプローラーで採用されています。この選択は単なる個人的な好みです。分数値を使用したい場合は、必ず行います。この方法では、document.allのテストが表示されます。つまり、IEとOperaによってのみサポートされるプロパティと、window.operaのテストは、当然のことながらオペラによってのみサポートされています。そのため、IFステートメントのif句を実行する必要があります。 IFステートメントのこのIEブランチ内では、独自のalpha.Opacityプロパティを使用して不透明度を設定しますが、Else句では、古いMozillaベースのブラウザでサポートされている古いMozopacityプロパティを使用します。 最後に、この方法は不透明度を標準に準拠した方法で設定します。不透明なプロパティを使用します。これは、すべての標準に準拠したブラウザで最終的にサポートされるはずです。 ie gotchas 古いブラウザであるインターネットエクスプローラーバージョン6は、不透明度ベースのCSSの変更をレンダリングしようとする際にいくつかの問題に苦しんでいます。 幸いなことに、これらの最初のものは、PollingMessage CSSルールへの追加によって簡単に解決できます。バックグラウンドプロパティの追加により、Internet Explorerの最初の特定の問題が修正されます。 IEの不透明度を変更する場合は、要素の背景色を設定する必要があります。そうしないと、テキストがジャグ付きエッジで表示されます。透明に背景を設定しても機能しないことに注意してください。特定の色に設定する必要があります。 2番目の問題は、CSSファイルを有効にしたい場合、少し難しいです。 IEは、スタイルシートで最初に宣言されていない限り、style.alpha.opacityを変更することはできません。今、あなたのスタイルシートがW3Cバリデーターによって渡されるのを防ぐことを気にしないなら、別の宣言を追加することでこの問題を簡単に修正することができます： 残念ながら、このアプローチは、デフォルトでJavaScriptコンソールにCSS警告を表示するFirefox 1.5など、その独自のプロパティをサポートしないブラウザでCSS警告を生成します。 IE固有のスタイル情報をグローバルスタイルシートに挿入するよりも優れたソリューションは、JavaScriptを使用して、PollingMessage Divのスタイル属性にIEのみにその宣言を追加することです。それが、INITで達成されるSetalphaメソッドです。その方法のコードは次のとおりです <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } インターネットエクスプローラーでのみ実行されるこのコードは、document.stylesheets配列を使用して、現在のページにリンクされている各スタイルシートを反復します。ルールプロパティを使用して、それらの各スタイルシートのルールにアクセスし、SelectORTextプロパティを調べて必要なスタイルを見つけます。ルールアレイに適切なスタイルがあると、不透明度を変更するために必要な値をフィルタープロパティに与えます。オペラの不透明度？不透明度残念ながら、執筆時点では、Opera（バージョン8.5）の最新バージョンでさえCSSの不透明度をサポートしていないため、そのようなアニメーションはそのブラウザでは機能しません。ただし、この機能はオペラバージョン9で計画されていますアニメーションを実行する<pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage();<pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; }処理アニメーションのコードは、5つの方法で構成されています。最初の3つは「処理…」アニメーションを制御し、残りの2つは「完了」アニメーションを制御します。「処理…」アニメーションを制御する3つの方法は次のとおりです。 <ul>StartProcは、「処理…」アニメーションとスケジュールをセットアップし、setintervalでドプロックに繰り返し呼び出しをスケジュールします<li> このクラスのプロパティを監視し、「処理…」アニメーションの現在のフレームを適切に設定する doproc <li>stopproc、「処理…」アニメーションが停止することを示しています <li> 「完了」アニメーションを制御する2つは、です StartDoneは「完了」アニメーションをセットアップし、SetIntervalでドドンに繰り返される呼び出しをスケジュールします <ul> dodoneは、「完了」アニメーションの現在のフレームを設定し、アニメーションが完了すると終了します<li> <li>起動アニメーションを設定して開始することは、StartProcメソッドのジョブです： ProcプロパティをProc（処理）に設定した後、このコードはPollingMessage Divの色と内容を設定するSetDisplayメソッドを呼び出します。次にsetDisplayを詳しく見ていきます。 <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }コードがPollingMessage Divの色とコンテンツを設定すると、Divの不透明度を100（完全に不透明）に初期化し、DisplayOpacityを呼び出してこの設定を有効にします。 最後に、このメソッドはsetintervalを呼び出して、アニメーションプロセスの次のステップをスケジュールします。 SettimeOutと同様に、SetIntervalコールはインターバルIDを返すことに注意してください。これをProcintervalプロパティに保存して、後でプロセスを停止できるようにします。「処理…」と「完了」アニメーションの両方が、setDisplayメソッドを共有しています： PollingMessage Divの「処理…」と「完了」状態の唯一の違いはその色とテキストであるため、この共通の関数を使用してPollingMessage Divの2つの状態を切り替えることは理にかなっています。色はPollingMessage Divにクラスを割り当てることで制御されるため、完了したクラスのCSSクラスルールをスタイルシートに追加する必要があります。 停止するようにします <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage();アニメーションをスムーズに停止するには、特定のタイミングが必要です。アニメーションがパルスの真ん中で突然停止することを望んでいません。「処理…」画像の不透明度がゼロになったときに、自然な休憩でそれを止めたいです。アニメーションを停止するためのStopProcメソッドは、実際にそれ自体を停止するわけではありません。アニメーションプロセスに、便利なポイントに達したときに停止する時が来たことをフラグに設定するだけです。これは、1日の終わりに妻や夫がコードの論理的な停止ポイントに到達したときに家に帰ることを思い出させることから受けた多くのプログラマーが受け取った電話によく似ています。 ここではほとんどアクションが発生していないため、この方法はかなり短いです：<pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } この方法は、2種類の停止を区別する必要があります。正常に完了した要求（完了）と、アプリケーションを停止するためのユーザーからのリクエスト（abort）。 DoProcメソッドは、このフラグを使用して、「完了」メッセージを表示するか、停止するかどうかを把握します。 ドプロックでアニメーションを実行します 90ミリ秒間隔で呼び出されるドプロック法は、PollingMessage Divの不透明度を変化させて、処理アニメーションのパルス効果を生成します。コードは次のとおりです この方法はシンプルです。その主な目的は、単にPollingMessage Divの不透明度を10％減らすことです。 最初のifステートメントは、divが完全に消えてしまったかどうかを確認します。それが持っている場合、アニメーションがまだ実行されているはずである場合、不透明度を100（完全に不透明）にリセットします。このコードを90ミリ秒ごとに実行すると、PollingMessage Divがフェードアウト、再び現れ、再びフェードアウトするスムーズな効果が生じます。アプリケーションが何かをするのに忙しいことを示すおなじみのパルス効果。アニメーションが実行され続けることになっていない場合、ClearIntervalを呼び出すことでアニメーションを停止し、Procプロパティが完了した場合、StartDoneへの呼び出しで「完了」アニメーションをトリガーします。 <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage();startdone で「完了」アニメーションを開始します StartDoneメソッドは、StartProcメソッドが「処理…」アニメーションに役立つ「完了」アニメーションと同じ目的を果たします。 StartProcにも非常に似ているように見えます： 今回は、TrueをSetDisplayに渡します。次に、setintervalを使用してドドンに呼び出しを設定します。これは実際にフェードアウトを実行します。 最後のフェード ドドンのコードは、ドプロックのコードよりも大幅に単純です。 DoProcが行うように、停止するように言われるまで継続的に処理する必要はありません。 PollingMessage Divの不透明度をゼロに達するまで10％減少させ続けてから、それ自体を止めます。かなりシンプルなもの： <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; } 図3.9。パルスステータスインジケータを備えたアプリケーション 最後に、このコードをブラウザでテストする準備が整いました。 Open AppMonitor2.htmlブラウザでは、[スタート]ボタンをクリックすると、パルス処理が表示されます。図3.9に示すように、ブラウザのビューポートの右上隅の近くにメッセージが表示されます。 <pre class="brush:php;toolbar:false">Example 2.2. ajax.js (excerpt) this.init = function() { if (!this.req) { try { // Try to create object for Firefox, Safari, IE7, etc. this.req = new XMLHttpRequest(); } catch (e) { try { // Try to create object for later versions of IE. this.req = new ActiveXObject('MSXML2.XMLHTTP'); } catch (e) { try { // Try to create object for early versions of IE. this.req = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { // Could not create an XMLHttpRequest object. return false; } } } } return this.req; };その世論調査の間隔に注意してください！ ページでアニメーションが実行されているので、前のOneが停止する前にアニメーションを再度開始しないように注意する必要があります。このため、Poll_intervalを2秒未満に設定しないことを強くお勧めします。<h5>モニターのスタイリング アプリケーションを稼働させたので、CSSを使用して見栄えを良くしましょう。目的のレイアウトを実現するには、次のマークアップを追加する必要があります。ご覧のとおり、3つのDIVを追加して、スタイルを掛けることができます。このページの完成したCSSは次のとおりです。スタイルのインターフェイスを図3.10：<pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }に示します <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145029861987.png" class="lazy" alt="独自のAjax Webアプリケーションを構築します" >図3.10。完成したアプリモニター< 要約 最初の作業アプリケーションは、ユーザーが現在ロードされているページを離れることなく、Ajaxを使用してサーバーに複数のリクエストを作成する方法を示しました。また、複数のタスクを非同期に実行する際に対処しなければならない種類の複雑さについて、かなり現実的な絵を描きました。この複雑さの良い例は、XMLHTTPREQUESTリクエストを時間をかけるためのSetimeOutの使用でした。この例は、範囲の喪失や接続タイムアウトなど、AJAXアプリを開発する際に遭遇する一般的な問題のいくつかを調査する良い機会を提供し、それらに対処するのに役立つ実用的なソリューションを提供しました。 <sultion> ajax Webアプリケーションを構築する<h5>からのこの抜粋のためののはそれです - 忘れないでください、この記事を.pdf形式でダウンロードできます。この本には合計8つの章があり、それが終了するまでに、読者は複数のプレイヤーがリアルタイムで再生できるオンラインチェスゲームを含む多くの完全に機能するWebアプリを構築するでしょう。 Ajax Webアプリの構築に関するよくある質問（FAQ） Web開発におけるAJAXの重要なコンポーネントは何ですか？ Ajaxは、非同期JavaScriptとXMLを表しています。これは、既存のページの表示と行動に干渉することなく、サーバーから非同期からデータを更新および取得できるWeb開発手法です。 AJAXの主要なコンポーネントには、情報を提示するためのHTML（またはXHTML）およびCSS、データとの動的表示と相互作用のためのドキュメントオブジェクトモデル（DOM）、データをキャリングするためのXML、データを操作するためのXSLT、XMLHTTPREQUESTオブジェクトのXMLHTTPREQUESTオブジェクトがアサインクロナスコミュニケーションをもたらすこと、およびこれらの技術をImputsiprivesに導きます。ウェブサイトでのエクスペリエンス？ajaxは、ウェブサイトをより応答性が高くインタラクティブにすることで、ユーザーエクスペリエンスを向上させます。これにより、Webページは、リクエストごとに完全なページをリロードすることなく、背景のサーバーと通信できます。これは、サーバーがリクエストを処理している間、ユーザーがWebページと対話し続けることができ、よりスムーズでシームレスなユーザーエクスペリエンスにつながることを意味します。<h3 > ajaxにおけるxmlhttprequestオブジェクトの役割は何ですか？xmlhttprequestオブジェクトは、ajaxの重要なコンポーネントです。ページ全体をリロードせずに、サーバーとデータを交換し、Webページの部分を更新する方法を提供します。 HTTPまたはHTTPSリクエストをWebサーバーに直接送信し、サーバーの応答データをスクリプトに直接ロードするために使用されます。特にJSONは、JavaScriptで作業しやすく、XMLよりも効率的である可能性があるため、AJAXでよく使用されます。これには、ライブ検索結果、自動完成フォームフィールド、インタラクティブマップ、動的コンテンツの更新などのアプリケーションが含まれます。ソーシャルメディアフィード、電子メールクライアント、およびeコマースサイトは、Ajaxを使用してスムーズでインタラクティブなユーザーエクスペリエンスを提供することがよくあります。<h3 >AJAXを使用する潜在的な欠点や課題は何ですか？これらには、検索エンジンがAJAXコンテンツのインデックスに苦労する可能性があるため、ブラウザの互換性の問題、デバッグとテストの難しさ、検索エンジン最適化（SEO）の課題が含まれます。さらに、AJAXはJavaScriptに依存しているため、ブラウザでJavaScriptを無効にしたユーザーはAJAXベースの機能を使用できません。AJAXアプリケーションがアクセス可能でSEOに優しいことを確認するにはどうすればよいですか？これは、HTMLを使用してコアWebページを構築し、JavaScriptを有効にしているユーザーのAJAX機能で強化することを意味します。 SEOの場合、サーバー側のレンダリングを使用して完全にレンダリングされたページを検索するためにエンジンを配信し、ユーザーに高速でAJAX駆動型のエクスペリエンスを提供します。<h3 >AJAXはデータセキュリティをどのように処理しますか？処理する前にすべてのデータを検証およびサニタイズし、HTTPSなどのデータを送信するための安全な方法を使用することが重要です。さらに、Ajaxはアプリケーションの内部の動作をより多くのクライアント側に露出できるため、サーバー側で敏感な操作が保護されるようにすることが重要です。これらのフレームワークは、Ajaxリクエストを作成するための独自の抽象化を提供することがよくありますが、ネイティブxmlhttprequestオブジェクトやjqueryやaxiosなどの他のライブラリを使用することもできます。<h3 > AJAXアプリケーションをデバッグするにはどうすればよいですか？Ajaxアプリケーションのデバッグは、Ajaxの非同期性のために従来のWebアプリケーションをデバッグするよりも複雑にすることができます。ただし、ほとんどの最新のブラウザは、AJAXのリクエストと応答を検査し、ネットワークアクティビティを監視し、JavaScriptコードを介した開発者ツールを提供します。さらに、多くのJavaScriptライブラリとフレームワークは、AJAXエラーと例外を処理するためのツールと方法を提供します。</script>

以上が独自のAjax Webアプリケーションを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jQueryリストにアルファベット順に挿入します次の記事：jQueryリストにアルファベット順に挿入します

続きを見る