ホームページ ウェブフロントエンド jsチュートリアル XMLHttpRequest オブジェクトのプロパティと ajax の長所と短所

XMLHttpRequest オブジェクトのプロパティと ajax の長所と短所

Jun 04, 2018 am 11:05 AM
ajax

今回は XMLHttpRequest オブジェクトの属性と ajax のメリットとデメリットについてお届けします。 XMLHttpRequest オブジェクトの属性と ajax のメリットとデメリットを使用する際の 注意点 については以下のとおりです。

XMLHttpRequest オブジェクトには 3 つの重要な属性があります:

onreadystatechange

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

readyState は 0 から 4 に変わります

0 = 初期化されていません

1 =読み込み中/サーバー接続が確立されました

2 = 読み込み済み/リクエストを受信しました

3 =対話中/リクエスト処理中

4 =リクエストが完了しました

ステータス サーバーのHTTPステータスコード

:1プレフィックス:メッセージ。このタイプのステータス コードは、リクエストが受け入れられ、処理を続行する必要があることを意味します。

2 接頭辞: 成功。 このタイプのステータス コードは、リクエストがサーバーによって正常に受信、理解され、受け入れられたことを意味します。 (200:'OK')

3 プレフィックス: リダイレクト。このタイプのステータス コードは、クライアントがリクエストを完了するためにさらなるアクションを実行する必要があることを示します。 (304:'未変更')

4 プレフィックス: リクエスト エラー。このタイプのステータス コードは、クライアントでエラーが発生し、サーバーの処理を妨げている可能性があることを意味します。プレフィックス 5 および 6: サーバー エラー。このタイプのステータス コードは、サーバーがリクエストを処理しているときにエラーまたは異常な状態が発生したことを表します

Ajax の利点

更新せずにデータを更新する

AJAX の最大の利点は、更新せずにサーバーと通信してデータを維持できることですページ全体。これにより、Web アプリケーションはユーザーの操作により迅速に応答できるようになり、変更されていない情報がネットワーク上に送信されることがなくなり、ユーザーの待ち時間が短縮され、非常に優れたユーザー エクスペリエンスが実現されます。

サーバーとの非同期通信;

AJAX は、ユーザーの操作を中断することなく、非同期方式を使用してサーバーと通信し、より高速な応答機能を備えています。ブラウザとサーバー間の通信を最適化し、ネットワーク上の不要なデータ送信、時間、データ トラフィックを削減します。

フロントエンドとバックエンドの負荷分散

AJAX は、クライアントのアイドル処理能力を使用して、これまでサーバーが負担していた作業の一部をクライアントに転送し、サーバーと帯域幅の負担を軽減し、スペースとブロードバンドのレンタルを節約します。費用がかかります。
そしてサーバーの負荷を軽減します。AJAX の原則は「オンデマンドでデータを取得する」ことであり、サーバー上の冗長なリクエストと応答によって引き起こされる負荷を最小限に抑え、サイトのパフォーマンスを向上させることができます

標準に基づいて広くサポートされています:
AJAX はこれは、ブラウザのプラグインやアプレットのダウンロードを必要とせず、ブラウザ上で JavaScript を実行するために顧客の許可を必要とする、広くサポートされているテクノロジです。 Ajax が成熟するにつれて、Ajax の使用を簡素化するいくつかのプログラム ライブラリも登場しました。同様に、JavaScript をサポートしていないユーザーに代替機能を提供する別の支援プログラミング テクノロジが登場しました。

インターフェイスとアプリケーションの分離:

Ajax は WEB のインターフェイスとアプリケーションを分離します (データとプレゼンテーションを分離するとも言えます)。これは分業と協力に役立ち、非技術者によって引き起こされる WEB アプリケーションのエラーを削減します。ページを変更することで効率が向上し、現在の公開システムにも適しています。
Ajaxの欠点

AJAX は履歴機能を無効にし、これはブラウザのメカニズムを破壊します。
ページを動的に更新する場合、ブラウザは履歴に静的なページしか記憶できないため、ユーザーは前のページの状態に戻ることができません。完全に読み取られたページと動的に変更されたページの違いは非常に微妙です。ユーザーは多くの場合、「戻る」ボタンをクリックすると前の操作がキャンセルされると期待しますが、Ajax アプリケーションではこれは実現できません。 。
Gmail を使用したことがある人は、Gmail で使用されている Ajax テクノロジーがこの問題を解決することを知っています。
ただし、これは Ajax のメカニズムを変更するものではありません。ユーザーが戻るボタンをクリックして履歴にアクセスすると、
非表示の IFRAME を作成または使用して、ページ上の変更を再現します。これに関連する点は、動的ページ更新を使用すると、ユーザーが特定の状態をお気に入りに保存することが困難になるということです。この問題に対する解決策も登場しており、そのほとんどは URL フラグメント識別子 (多くの場合アンカーと呼ばれ、URL の # の後の部分) を使用して追跡し、ユーザーが指定されたアプリケーションの状態に戻れるようにします。 (多くのブラウザーでは、JavaScript でアンカーを動的に更新できるため、Ajax アプリケーションは表示されたコンテンツを更新しながらアンカーを更新できます。) これらのソリューションは、戻るボタンをサポートしていないことに関する議論の多くも解決します

AJAX セキュリティ問題:

AJAX テクノロジーは、 Ajax テクノロジは、ユーザーに優れたユーザー エクスペリエンスを提供しますが、IT 企業に新たなセキュリティ脅威をもたらします。これは、企業データの直接チャネルを確立するようなものです。これにより、開発者は以前よりも多くのデータとサーバー ロジックを誤って公開してしまう可能性があります。

Ajax ロジックはクライアント側のセキュリティ スキャン テクノロジから隠蔽できるため、ハッカーがリモート サーバーから新しい攻撃を作成できるようになります。 Ajax は、クロスサイト スクリプティング攻撃、SQL インジェクション攻撃、資格情報ベースのセキュリティ脆弱性など、いくつかの既知のセキュリティ上の弱点を回避することも困難です。

検索エンジンのサポートが弱い: 検索エンジンのサポートが弱い。 AJAX を不適切に使用すると、ネットワーク データ トラフィックが増加し、システム全体のパフォーマンスが低下します。

標準に基づいて広くサポートされています:
AJAX は標準化され、広くサポートされているテクノロジーに基づいています。ブラウザーのプラグインや小さなプログラムをダウンロードする必要はありませんが、お客様はブラウザーで JavaScript を実行できるようにする必要があります。 Ajax が成熟するにつれて、Ajax の使用を簡素化するいくつかのプログラム ライブラリも登場しました。同様に、JavaScript をサポートしていないユーザーに代替機能を提供する別の支援プログラミング テクノロジが登場しました。

AJAX はモバイル デバイスをあまりサポートしていません:
一部のハンドヘルド デバイス (携帯電話、PDA など) はまだ Ajax を十分にサポートしていません。たとえば、モバイル ブラウザーで Ajax テクノロジを使用して Web サイトを開くと、現在サポートされていません。

クライアントが太すぎるため、クライアントコードが多すぎると開発コストが発生します
記述が複雑でエラーが発生しやすくなります(JSファイルのレイヤーが含まれることは、大量のサーバーと相まってAJAXの一般的な問題です) -過去のサイドコードは現在クライアントに配置されており、Web の元の標準を破壊します。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Ajaxの中核的な動作原理とオブジェクト


Polyfillアノテーションの使用とJSでの変更の防止

以上が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衣類リムーバー

AI Hentai Generator

AI Hentai Generator

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 エラーが発生した場合の解決方法について説明します。

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

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

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

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

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: オートコンプリート提案エンジンの構築 PHP と Ajax: オートコンプリート提案エンジンの構築 Jun 02, 2024 pm 08:39 PM

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

Ajax フレームワークを理解する: 5 つの一般的なフレームワークを探索する Ajax フレームワークを理解する: 5 つの一般的なフレームワークを探索する Jan 26, 2024 am 09:28 AM

Ajax フレームワークを理解する: 特定のコード例を必要とする 5 つの一般的なフレームワークを調べます。 はじめに: Ajax は、最新の Web アプリケーション開発において不可欠なテクノロジの 1 つです。非同期データ対話のサポートやユーザー エクスペリエンスの向上などの機能により、フロントエンド開発に不可欠な要素となっています。 Ajax フレームワークをよりよく理解して習得するために、この記事では 5 つの一般的な Ajax フレームワークを紹介し、読者がこれらのフレームワークの使用法と利点を深く理解できるように具体的なコード例を示します。 1. jQuery jQuery は現在最も

Ajax機能を利用した非同期データ交換 Ajax機能を利用した非同期データ交換 Jan 26, 2024 am 09:41 AM

Ajax 機能を使用して非同期データ対話を実現する方法 インターネットと Web テクノロジーの発展に伴い、フロントエンドとバックエンド間のデータ対話が非常に重要になってきました。ページの更新やフォームの送信などの従来のデータ操作方法では、ユーザーのニーズを満たすことができなくなりました。 Ajax (非同期 JavaScript および XML) は、非同期データ対話のための重要なツールとなっています。 Ajax により、Web で JavaScript と XMLHttpRequest オブジェクトを使用できるようになります

See all articles