AJAX の長所と短所

May 28, 2018 pm 05:19 PM
ajax 展望 仕事

1. AJAX とは

2005 年、Adaptive Path Company の Jesse James Garrett は、「Web アプリケーションへの新しいアプローチは読み込みのアウトライン テクニックに使用される」という記事で Ajax という言葉を明確に定義しました。ページのコンテンツを非同期的に取得します。ページクリックイベントを通じてリクエストが継続的にサーバーに送信され、サーバーは最新のデータをリアルタイムで返します。これが AJAX の機能です。

複数のアイデアとテクノロジーの融合として、それを細分化すると、これらのキーワードになります: 非同期 JavaScript と XML、非同期 JavaScript と XML。 AJAX を使用するプロセスでは、XHTML と CSS 標準ベースの表現テクノロジの使用、動的表示と対話のための DOM の使用、データ交換と処理のための XML と XSLT の使用、および XML HttpRequest の使用が、間違いなく不可欠です。非同期データ処理の場合は、JavaScript を取得して使用し、上記の手法を組み合わせます。その中でもAjaxの中核となる技術がXHRと呼ばれるXMLHttpRequestです。

2. 開発の展望

Gmail はメールの送受信に関して Outlook Express とほぼ同じ機能を備えており、クライアント プログラムのインストールは必要ありません。既存のブラウザーは、PhotoShop のようなデスクトップ プログラムのように複雑な画像を処理できません。しかし、その影響と影響を無視することはできません。

3. メリット (ユーザーエクスペリエンスの向上)

ユーザーエクスペリエンス たとえば、あなたの家がある地域が何らかの事情で断水に直面した場合、関連部門は2つの計画を発表します。1つは完全に断水することです。 8 時間給水を続けた場合、8 時間の間は完全に給水が停止され、8 時間後には通常の給水に戻ります。第二に、10 時間の間、水の供給は完全に停止されませんが、流量は以前よりも大幅に減少します。つまり、10 時間後には通常の流量に戻ります。あなただったらどの方法を選びますか?どうやら後者のようです。

非同期伝送はキャラクタを単位とする伝送であり、同期伝送はビットを基準とする伝送であり、伝送される際の受信側と送信側のクロックは異なります。一貫性があることが求められます。

非同期では、通常、各グループは 8 ビット文字であり、各グループの先頭と末尾に ストップ ビット があり、送信プロセス中に受信側と送信側のクロックは必要ありません。一貫性、つまり、非同期送信者は、受信者がいつ到着するかを知らなくても、いつでもこれらのグループを送信できます。 各非同期送信情報は、

スタート ビット

で始まり、データが到着したことを受信者に通知します。これにより、受信者は送信の最後に応答、受信、キャッシュする時間が与えられます。 は情報の送信を終了することを示します。ストップ ビットは信号を 1 に戻し、次のスタート ビットが到着するまで信号を維持します。 同時に送信されるビットパケットははるかに大きくなります。各文字を独自のスタート ビットとストップ ビットとともに個別に送信するのではなく、それらを結合して一緒に送信します。これらの組み合わせをデータ フレーム、または単にフレームと呼びます。受信側のサンプリング速度がビットの到着速度と一致していることを確認して、送信側と受信側が同期しているようにします。

同期には利点もあります。通常、同期転送は非同期転送よりもはるかに高速です。受信側は各文字を開始および停止する必要はありません。フレーム同期文字が検出されると、次のデータの到着と同時にそれを受信します。また、同期送信のオーバーヘッドも比較的小さいです。

短所: データビットが長ければ長いほど、データをキャッシュするために必要なバッファが大きくなり、フレームのサイズが制限されます。また、フレームが大きくなるほど、伝送媒体を占有する連続時間が長くなります。極端な場合、これにより他のユーザーが長時間待たされることになります。

4. 動作原理とその基盤となるテクノロジー

は、

XmlHttpRequest

オブジェクトを使用してサーバーに非同期リクエストを送信し、サーバーからデータを取得し、JavaScript を使用して DOM を操作し、ページを更新します。

XMLHttpRequest オブジェクトの属性。

その

プロパティ

は次のとおりです:

onreadystatechange

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

responseText サーバープロセスから返されたデータの文字列形式。

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

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

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

ReadyState オブジェクトのステータス値

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

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

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

3 (データ送信)レスポンスとhttpヘッダーが不完全なため、データの一部を受信しました

この時点でデータの一部を取得しています。完全な応答データは、responseXml と responseText を通じて取得できます

5. 欠点

ajax の欠点

私たちのほとんどは通常、ajax がもたらす利点に注目しているため、ここでは ajax の欠点に焦点を当てます。 、ユーザーエクスペリエンスの向上など。 ajax によって引き起こされる欠点は無視されています。

以下で説明する ajax の欠陥はすべて ajax が原因です。

1. Ajax は「戻る」ボタンを無効にし、ブラウザーの「戻る」メカニズムを破壊します。 「戻る」ボタンは標準的な Web サイトの重要な機能ですが、JavaScript ではうまく機能しません。ユーザーは前に戻って前の操作をキャンセルしたい場合が多いため、これは ajax によって引き起こされる深刻な問題です。では、この問題に対する解決策はあるのでしょうか?答えは「はい」です。Gmail で使用されている ajax テクノロジーがこの問題を解決することは知っていますが、これは単なる愚かな方法です。これを行うには、非表示の IFRAME を作成または使用して、ユーザーが履歴にアクセスするために戻るボタンをクリックしたときにページ上の変更を再現します。 (たとえば、ユーザーが Google マップでクリックして戻ると、非表示の IFRAME が検索され、検索結果が Ajax 要素に反映され、アプリケーションの状態がその時点の状態に復元されます。)

ただし、この問題は発生しますが、解決できるとしても、開発コストは非常に高くつき、ajax フレームワークに必要な迅速な開発とは相反します。これは、ajax によって引き起こされる非常に深刻な問題です。

2. セキュリティの問題

テクノロジーは IT 企業に新たなセキュリティ脅威ももたらします。Ajax テクノロジーは企業データの直接チャネルを確立するようなものです。これにより、開発者は以前よりも多くのデータとサーバー ロジックを誤って公開してしまう可能性があります。 Ajax ロジックはクライアント側のセキュリティ スキャン テクノロジから隠蔽できるため、ハッカーがリモート サーバーから新たな攻撃を作成できるようになります。また、Ajax は、クロスサイト スクリプティング攻撃、SQL インジェクション攻撃、資格情報ベースのセキュリティの脆弱性など、いくつかの既知のセキュリティの弱点を回避するのが困難です。

3. 検索エンジンのサポートは比較的弱いです。

4. プログラムの例外メカニズムを破壊しました。少なくとも現在の観点からは、ajax.dll や ajaxpro.dll などの ajax フレームワークはプログラムの例外メカニズムを破壊します。この問題に関しては、私も開発過程で遭遇したことがありますが、調べてみるとネット上には関連する紹介がほとんどありません。その後、私は自分自身で実験を行い、ajax と従来のフォーム送信モードを使用してデータの一部を削除しました...これはデバッグに大きな困難をもたらしました。

5. さらに、URL やリソースの配置の本来の意図に反するなど、他にもいくつかの問題があります。たとえば、URL アドレスを指定した場合、Ajax テクノロジーが使用されている場合、その URL アドレスの下に表示される内容は、この URL アドレスの下に表示される内容と異なる可能性があります。これは、リソースの配置の本来の目的に反します。

6. 一部のハンドヘルド デバイス (携帯電話、PDA など) は現在、ajax を十分にサポートしていません。たとえば、モバイル ブラウザーで ajax テクノロジを使用して Web サイトを開く場合、現時点ではサポートされていません。もちろん、この問題は私たちとは何の関係もありません。

6.ajaxのいくつかのフレームワーク

現在、私たちが主に使用しているajaxフレームワークには、ajax.dll、ajaxpro.dll、magicajax.dll、およびMicrosoftのatlasフレームワークが含まれます。 Ajax.dll と Ajaxpro.dll の 2 つのフレームワークには大きな違いはありませんが、magicajax.dll はカプセル化においてより強力であるだけです。たとえば、前に述べたように、ajax はすべての文字列を返します。 .magicajax はそれをカプセル化するだけです。しかし、この機能は非常に便利です。たとえば、ページにリストがあり、リスト内のデータが常に変化する場合、magicajax を追加した後の操作は非常に簡単です。更新されたリスト コントロールは、magicajax コントロール内に配置され、更新間隔はページロードで定義されます。atlas の原理は、magicajax の原理と似ています。ただし、注意が必要な点は、これらのフレームワークは IE のみをサポートしており、ブラウザの互換性には対応していないことです。これは、逆コンパイル ツールでコードを確認することでわかります。

これらのフレームワークに加えて、最も一般的に使用される方法は、xmlHttpRequest オブジェクトを独自に作成することです。この方法は、以前のフレームワークよりも柔軟です。さらに、ここで aspnet2.0 に付属する非同期コールバック インターフェイスについても触れておきたいと思います。ajax と同様に、ローカルの非リフレッシュも実現できますが、その実装は実際には xmlhttprequest オブジェクトのみをサポートしています。もちろん、これはマイクロソフトの競争戦略です。

以上がAJAX の長所と短所の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

jQuery AJAX リクエストで発生した 403 エラーを解決する方法 jQuery AJAX リクエストで発生した 403 エラーを解決する方法 Feb 20, 2024 am 10:07 AM

タイトル: jQuery AJAX リクエストの 403 エラーを解決する方法とコード例。403 エラーは、サーバーがリソースへのアクセスを禁止するリクエストを指します。このエラーは通常、リクエストにアクセス許可がないか、サーバーによって拒否されたために発生します。 jQueryAJAX リクエストを行うときにこのような状況に遭遇することがありますが、この記事ではこの問題の解決方法とコード例を紹介します。解決策: 権限を確認します。まず、要求された URL アドレスが正しいことを確認し、リソースにアクセスするための十分な権限があることを確認します。

jQuery AJAXリクエスト403エラーを解決する方法 jQuery AJAXリクエスト403エラーを解決する方法 Feb 19, 2024 pm 05:55 PM

jQuery は、クライアント側の開発を簡素化するために使用される人気のある JavaScript ライブラリです。 AJAX は、Web ページ全体をリロードせずに、非同期リクエストを送信し、サーバーと対話するテクノロジーです。ただし、jQuery を使用して AJAX リクエストを行うと、403 エラーが発生することがあります。 403 エラーは通常、セキュリティ ポリシーまたは権限の問題が原因で、サーバーによってアクセスが拒否されたエラーです。この記事では、jQueryAJAX リクエストで 403 エラーが発生した場合の解決方法について説明します。

PHP と Ajax: オートコンプリート提案エンジンの構築 PHP と Ajax: オートコンプリート提案エンジンの構築 Jun 02, 2024 pm 08:39 PM

PHP と Ajax を使用してオートコンプリート候補エンジンを構築します。 サーバー側スクリプト: Ajax リクエストを処理し、候補を返します (autocomplete.php)。クライアント スクリプト: Ajax リクエストを送信し、提案を表示します (autocomplete.js)。実際のケース: HTML ページにスクリプトを組み込み、検索入力要素の識別子を指定します。

jQuery AJAX エラー 403 の問題を解決するにはどうすればよいですか? jQuery AJAX エラー 403 の問題を解決するにはどうすればよいですか? Feb 23, 2024 pm 04:27 PM

jQueryAJAX エラー 403 の問題を解決するにはどうすればよいですか? Web アプリケーションを開発する場合、非同期リクエストを送信するために jQuery がよく使用されます。ただし、jQueryAJAX の使用時に、サーバーによってアクセスが禁止されていることを示すエラー コード 403 が発生する場合があります。これは通常、サーバー側のセキュリティ設定が原因ですが、回避する方法があります。この記事では、jQueryAJAX エラー 403 の問題を解決する方法と具体的なコード例を紹介します。 1.作る

Ajaxを使用してPHPメソッドから変数を取得するにはどうすればよいですか? Ajaxを使用してPHPメソッドから変数を取得するにはどうすればよいですか? Mar 09, 2024 pm 05:36 PM

Ajax を使用して PHP メソッドから変数を取得することは、Web 開発では一般的なシナリオであり、Ajax を使用すると、データを更新せずにページを動的に取得できます。この記事では、Ajax を使用して PHP メソッドから変数を取得する方法と、具体的なコード例を紹介します。まず、Ajax リクエストを処理し、必要な変数を返すための PHP ファイルを作成する必要があります。以下は、単純な PHP ファイル getData.php のサンプル コードです。

PHP と Ajax: 動的に読み込まれるコンテンツを作成するためのソリューション PHP と Ajax: 動的に読み込まれるコンテンツを作成するためのソリューション Jun 06, 2024 pm 01:12 PM

Ajax (非同期 JavaScript および XML) を使用すると、ページをリロードせずに動的コンテンツを追加できます。 PHP と Ajax を使用すると、製品リストを動的にロードできます。HTML はコンテナ要素を含むページを作成し、Ajax リクエストはロード後に要素にデータを追加します。 JavaScript は Ajax を使用して XMLHttpRequest を通じてサーバーにリクエストを送信し、サーバーから JSON 形式で商品データを取得します。 PHP は MySQL を使用してデータベースから製品データをクエリし、それを JSON 形式にエンコードします。 JavaScript は JSON データを解析し、ページ コンテナーに表示します。ボタンをクリックすると、製品リストをロードするための Ajax リクエストがトリガーされます。

PHP と Ajax: Ajax のセキュリティを向上させる方法 PHP と Ajax: Ajax のセキュリティを向上させる方法 Jun 01, 2024 am 09:34 AM

Ajax セキュリティを向上させるには、いくつかの方法があります。 CSRF 保護: トークンを生成してクライアントに送信し、それを検証リクエストのサーバー側に追加します。 XSS 保護: htmlspecialchars() を使用して入力をフィルタリングし、悪意のあるスクリプトの挿入を防ぎます。 Content-Security-Policy ヘッダー: 悪意のあるリソースの読み込みを制限し、スクリプトとスタイル シートの読み込みを許可するソースを指定します。サーバー側の入力を検証する: Ajax リクエストから受け取った入力を検証して、攻撃者による入力の脆弱性の悪用を防ぎます。安全な Ajax ライブラリを使用する: jQuery などのライブラリによって提供される自動 CSRF 保護モジュールを利用します。

フロントエンドエンジニアの責任分析:主な仕事は何ですか? フロントエンドエンジニアの責任分析:主な仕事は何ですか? Mar 25, 2024 pm 05:09 PM

フロントエンドエンジニアの責任分析:主な仕事は何ですか?インターネットの急速な発展に伴い、フロントエンドエンジニアは非常に重要な専門的役割を果たし、ユーザーとWebサイトアプリケーションの間の橋渡しとして重要な役割を果たします。では、フロントエンドエンジニアは主に何をするのでしょうか?この記事では、フロントエンド エンジニアの責任を分析して調べてみましょう。 1. フロントエンド エンジニアの基本的な責任 Web サイトの開発と保守: フロントエンド エンジニアは、Web サイトの HTML、CSS、JavaScr の作成など、Web サイトのフロントエンド開発を担当します。

See all articles