技術共有

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Ajax と Fetch はどちらも、クライアントからサーバーにリクエストを送信してデータを取得するために使用される JavaScript の技術ですが、それらの間にはいくつかの大きな違いがあります。 2 つのテクノロジーの詳細な比較は次のとおりです。

1. 技術的根拠と実装方法

1. アヤックス：

   • ベース：AjaxとはAsynchronous JavaScript and XML（非同期JavaScriptとXML）の略で、ページ全体を再読み込みせずにWebページの一部を更新できる技術です。
   • 実現方法 : Ajax は通常、リクエストとレスポンスの処理に XMLHttpRequest オブジェクトを使用します。このメソッドの構文は比較的複雑で、コールバック関数と状態を処理するにはさらに多くのコードを記述する必要があります。

2. フェッチ：

   • ベース: Fetch は、ネットワーク リクエストを処理するための Request オブジェクトと Response オブジェクトの共通定義を提供する最新の JavaScript の API です。
   • 実現方法 : Fetch は Promise オブジェクトを使用して非同期操作を処理し、チェーンで呼び出すことができるため、コードの理解と保守が容易になります。 Fetch の API スタイルはより簡潔で強力です。

2. 非同期処理とコーディングスタイル

1. アヤックス：

   • 非同期処理: Ajax はコールバック関数を使用して非同期操作を処理します。これにより、特に複雑なリクエスト チェーンでコールバック 地獄 (コールバック 地獄) の問題が発生する可能性があります。
   • コーディングスタイル: Ajax のコーディング スタイルは比較的伝統的で、リクエストと応答の多くの側面を手動で処理する必要があります。

2. フェッチ：

   • 非同期処理 : Fetch は Promise オブジェクトを使用して非同期操作を処理します。これにより、非同期リクエストの処理がより柔軟かつ簡潔になります。 async/await を使用すると、明確な非同期コードを記述し、コールバック地獄の問題を回避できます。
   • コーディングスタイル: Fetch のコード スタイルはより現代的で簡潔で、理解と保守が容易です。

3. クロスドメインリクエストとCORS

1. アヤックス：

   • クロスドメインリクエスト : Ajax リクエストは異なるドメイン名にまたがることができますが、CORS (Cross-Origin Resource Sharing) の問題を適切に処理する必要があります。 Ajax は、JSONP やプロキシ サーバーなどのテクノロジーを通じてクロスドメイン リクエストを行うことができます。

2. フェッチ：

   • クロスドメインリクエスト : Fetch は同一オリジン ポリシーに従っているため、クロスドメイン リクエストに対してより厳しい制限があります。クロスドメイン要求が必要な場合は、クロスドメイン要求を許可するためにサーバー側で適切な CORS ヘッダーを設定する必要があります。 フェッチ リクエストは CORS の問題を自動的に処理できますが、場合によっては追加の構成が必要になる場合があります。

4. その他の機能

1. アヤックス：

   • 柔軟性：Ajaxはリクエストヘッダー、リクエストボディ、レスポンスフォーマットなどをカスタマイズできるため、高い柔軟性が得られます。
   • 互換性: Ajax は、古いバージョンのブラウザでは互換性の問題が発生する可能性がありますが、最新のブラウザの普及により、この問題は大幅に改善されました。

2. フェッチ：

   • タイムアウト処理付き: リクエストがタイムアウトになった後、フェッチは自動的にリクエストを中断できるため、長い待ち時間を回避できます。
   • 応答処理: Fetch は、.json()、.text()、.blob() など、応答データを処理するための豊富なメソッドを提供し、応答データの処理をより便利にします。

使用法

fetch これは、JavaScript による最新の強力なネットワーク リクエスト API であり、ネットワーク全体でリソースを非同期に取得するためのシンプルかつ論理的な方法を提供します。fetch を返すPromiseこれにより、JavaScript の async/await 構文を簡単に使用できるようになります。基本的な使用例をいくつか示します。

基本的な GET リクエスト

fetch('https://api.example.com/data')
  .then(response =
                                   

                    上一篇
                    下一篇