xmlhttprequest vs ajaxのフェッチAPI

コアポイント

JavaScriptでは、Fetch APIとXMLHTTPREQUESTの両方がHTTP要求を行うために使用されますが、Fetch APIは一般に、コードとエラー処理を簡素化する可能性を使用するため、より強力で柔軟と見なされます。ただし、すべてのブラウザがフェッチAPI、特に古いブラウザーをサポートするわけではありません。
XMLHTTPREQUEST約束がないため、古くて複雑なものですが、すべてのブラウザで広くサポートされており、デフォルトでCookieを送信します。
Fetch APIは、すべてのXHR機能をサポートしておらず、いくつかのオプションが面倒な場合があるため、AJAXテクノロジーの完全な代替品ではありません。また、タイムアウトをサポートせず、エラーキャプチャの実装をより複雑にします。
Fetch APIには制限がありますが、JavaScriptでHTTPリクエストを行うための将来の方向です。ただし、比較的新しくて変化するため、開発者は今後数年間で慎重に使用する必要があります。

のトレードオフの比較 この記事では、XMLHTTPREQUESTの長所と短所とFetch APIの最新のAJAX実装を比較します。 2019年3月は、Ajaxの20周年を迎えます（ある程度）。 XMLHTTPREQUESTの最初の実装は、1999年にIE5.0のActiveXコンポーネントとしてリリースされました（尋ねないでください）。これには、フルページの更新を行わずにサーバーからデータを抽出する方法もありましたが、多くの場合、インジェクションやサードパーティのプラグインなどの不器用なテクニックに依存しています。 XMLHTTPREQUESTを開発するというマイクロソフトの主な目的は、ブラウザベースのOutlookメールクライアントに代わるものを提供することです。

ajaxからajax

へ

ajaxは、非同期JavaScriptとXMLの略語です。 「async」は間違いなく正しいですが、
おそらくJavaScriptですが、VBScriptとFlashもオプションです。

ペイロードはXMLである必要はありませんが、XMLは当時非常に人気がありました。任意のデータ形式を使用でき、最近ではJSONが通常推奨されています。

1. 一般に、サーバーからデータを取得し、フルページの更新を実行することなくDOMを動的に更新するクライアントプロセスを一般的に参照するクライアントプロセスの一般用語として「ajax」を使用します。 Ajaxは、ほとんどのWebアプリケーションとシングルページアプリケーション（SPA）のコアテクノロジーです。
の詳細な理解
次のJavaScriptコードは、xmlhttprequest（通常はxhrと略された）の使用を示しています。

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.php.cn/link/f589a241141007eb225cd68eed7bc06c');

// 请求状态更改事件
xhr.onreadystatechange = function() {

  // 请求完成？
  if (xhr.readyState !== 4) return;

  if (xhr.status === 200) {
    // 请求成功 - 显示响应
    console.log(xhr.responseText);
  }
  else {
    // 请求错误
    console.log('HTTP error', xhr.status, xhr.statusText);
  }
};

// 开始请求
xhr.send();

XMLHTTPREQUESTオブジェクトには、他の多くのオプション、イベント、および応答プロパティがあります。たとえば、ミリ秒単位でのタイムアウトを設定して検出できます。

// 设置超时
xhr.timeout = 3000; // 3 秒
xhr.ontimeout = () => console.log('timeout', xhr.responseURL);

進行状況イベントは、長期にわたるファイルのアップロードを報告できます：

// 上传进度
xhr.upload.onprogress = p => {
  console.log( Math.round((p.loaded / p.total) * 100) + '%') ;
};

のオプションの数はまばゆいばかりであり、XmlhttpRequestの以前のバージョンにはクロスブラウザーの矛盾があります。したがって、ほとんどのライブラリとフレームワークは、jquery.ajax（）メソッドなどの複雑さを処理するためのajaxラッパー関数を提供します。

// jQuery Ajax
$.ajax('https://www.php.cn/link/f589a241141007eb225cd68eed7bc06c')
  .done(data => console.log(data))
  .fail((xhr, status) => console.log('error:', status));

fetch

について簡単に学びます

Fetch APIは、xmlhttprequestの最新の代替品です。一般的なヘッダー、リクエスト、および応答インターフェイスは一貫性を提供しますが、約束により、コールバックなしで簡単にチェーンおよび非同期/待ち望んでいます。上記のXHRの例は、よりシンプルなフェッチベースのコードに変換できます。これにより、返されたJSONを解析できます。

フェッチはシンプルでエレガントで、理解しやすく、PWAサービスワーカーで広く使用されています。

古代のxmlhttprequestの代わりに使用してみませんか？

fetch(
    'https://www.php.cn/link/f589a241141007eb225cd68eed7bc06c',
    { method: 'GET' }
  )
  .then( response => response.json() )
  .then( json => console.log(json) )
  .catch( error => console.error('error:', error) );

残念ながら、Web開発はそれほど単純ではありません。フェッチはAjaxテクノロジーに完全に置き換えられていません...

ブラウザサポート

Fetch APIは非常によくサポートされていますが、Internet Explorerのすべてのバージョンで失敗します。 2017年以前にChrome、Firefox、およびSafariバージョンを使用するユーザーも問題が発生する場合があります。これらのユーザーは、ユーザーベースのごく一部のみを構成する場合があります...または、それは主要な顧客かもしれません。

コーディングを開始する前に必ず確認してください！

さらに、Fetch APIは比較的新しく、成熟したXHRオブジェクトよりも多くの継続的な変更を受けます。これらの更新はコードを破る可能性は低いですが、今後数年間で何らかのメンテナンスが必要になると予想されます。

クッキーはデフォルトでは含まれていません
エラーは拒否されません

驚くべきことに、httpエラー（404ページが見つかりませんまたは500の内部サーバーエラーなど）は、catch（）を実行しないようにします。通常、応答を解析および設定します。

fetch(
    'https://www.php.cn/link/f589a241141007eb225cd68eed7bc06c',
    {
      method: 'GET',
      credentials: 'same-origin'
    }
  )

割引は、要求が完了できない場合にのみ発生します（ネットワーク障害など）。これにより、エラーキャプチャの実装がより複雑になります。
タイムアウトはサポートされていません
Fetchはタイムアウトをサポートしておらず、リクエストはブラウザの選択された時間を持続します。たとえば、別の約束でフェッチをラップするには、さらなるコードが必要です。
…またはpromize.race（）を使用します。これは、最初にフェッチまたはタイムアウトが完了したときに解析します。
abort fetch

何年もの間、フェッチを中止することは不可能でしたが、現在はAbortController APIを実装するブラウザでサポートされています。これにより、Fetch Initializationオブジェクトに渡すことができる信号がトリガーされます。

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.php.cn/link/f589a241141007eb225cd68eed7bc06c');

// 请求状态更改事件
xhr.onreadystatechange = function() {

  // 请求完成？
  if (xhr.readyState !== 4) return;

  if (xhr.status === 200) {
    // 请求成功 - 显示响应
    console.log(xhr.responseText);
  }
  else {
    // 请求错误
    console.log('HTTP error', xhr.status, xhr.statusText);
  }
};

// 开始请求
xhr.send();

controller.abort（）を呼び出すと、フェッチを中止できます。約束は拒否されるため、.catch（）関数が呼び出されます。

進捗状況

執筆時点では、Fetchは進捗イベントをサポートしていません。したがって、ファイルアップロードまたは同様の大きなフォームの提出のステータスを報告することはできません。

xmlhttprequest with fetch api？

時間の終わりに、選択はあなたにあります...

アプリケーションには、進行状況バーをアップロードする必要があるIEクライアントがない限り。

ajax呼び出しをより簡単にするには、xmlhttprequestは低レベルでより複雑であり、関数をラップする必要があります。残念ながら、タイムアウトの複雑さについて考え始めると、コール中断、エラーキャプチャについては、Fetchも機能をラップする必要があります。
Promise PolyFillと組み合わせて使用​​されるフェッチポリフィルを選択できるため、IEでフェッチコードを記述できます。ただし、XHRはフォールバックとして使用されます。たとえば、すべてのオプションが設定に関係なく送信されます。
フェッチは未来です。ただし、APIは比較的新しいものであり、すべてのXHR機能を提供するわけではなく、一部のオプションは面倒です。今後数年間で慎重に使用してください。

xmlhttpRequestとFetch apis

についての

FAQ（FAQS）

XMLHTTPRequestとFetch APIの主な違いは何ですか？

フェッチAPIはxmlhttprequestよりも優れていますか？
フェッチAPIは、約束の使用により、JavaScriptでHTTPリクエストを作成するためのより良い選択と見なされることがよくあります。約束により、コードがより簡潔になり、読みやすくなり、エラー処理が容易になります。 Fetch APIの機能は、XmlhttpRequestよりも強力で柔軟です。ただし、XmlhttpRequestは依然として広く使用され、サポートされており、フェッチAPIをサポートしていない古いブラウザをサポートする必要がある場合など、場合によってはより良い選択になる場合があります。
フェッチAPIはxmlhttprequestを置き換えることができますか？
はい、Fetch APIは、HTTPリクエストを作成するために使用されるJavaScriptのxmlhttprequestを置き換えることができます。 Fetch APIは新しいテクノロジーであり、より強力で柔軟な機能セットがあります。それは約束を使用します。これにより、コードがより簡潔になり、読みやすくなり、エラー処理が容易になります。ただし、XmlhttpRequestは依然として広く使用され、サポートされており、フェッチAPIをサポートしていない古いブラウザをサポートする必要がある場合など、場合によってはより良い選択になる場合があります。

フェッチAPIを使用することの利点は何ですか？

Fetch APIには、xmlhttprequestよりもいくつかの利点があります。それは約束を使用します。これにより、コードがより簡潔になり、読みやすくなり、エラー処理が容易になります。 Fetch APIには、リクエストオブジェクトと応答オブジェクトの一般的な定義を含む、より強力で柔軟な機能セットもあります。また、XMLHTTPREQUESTはそうではありませんが、他のソースにリクエストを行うこともできます。

フェッチAPIを使用することの欠点は何ですか？

Fetch APIを使用する主な欠点の1つは、すべてのブラウザがそれをサポートしているわけではないことです。特に、古いブラウザはフェッチAPIをサポートしない場合があります。これらの場合、xmlhttprequestまたはポリフィルを使用する必要がある場合があります。もう1つの欠点は、Fetch APIがデフォルトでCookieを送信しないことです。したがって、Cookieを送信する場合は、資格情報オプションを「含める」ために手動で設定する必要があります。

xmlhttprequestを使用することの利点は何ですか？

xmlhttprequestを使用することの欠点は何ですか？

xmlhttprequestは約束を使用せず、コードをより複雑で維持が困難になる可能性があります。また、リクエストと応答オブジェクトの一般的な定義はなく、他のソースにリクエストを行うことはできません。 XMLHTTPREQUESTは、Fetch APIなどの新しいテクノロジーと比較して、少し時代遅れであると考えられています。

xmlhttprequestを選択してAPIを取得する方法は？

xmlhttprequestとフェッチAPIを選択すると、特定のニーズとサポートする必要があるブラウザに依存します。 Fetch APIをサポートしていない古いブラウザをサポートする必要がある場合、xmlhttprequestがより良い選択かもしれません。ただし、新しいブラウザを使用していて、Fetch APIのクリーナー、よりモダンな構文、より強力で柔軟な機能セットを利用したい場合は、Fetch APIがより良い選択になります。

同じプロジェクトでxmlhttprequestとFeth APIの両方を使用できますか？

はい、同じプロジェクトでXMLHTTPRequestとFeth APIの両方を使用できます。特定のタスクにxmlhttprequestを使用し、特定のニーズとサポートする必要があるブラウザに基づいて、他のタスクにAPIをフェッチすることを選択できます。ただし、一貫性とメンテナンスの容易さのために、これらのいずれかに固執することをお勧めします。

JavaScriptでHTTPリクエストを行うためのXMLHTTPREQUESTとFETCH APIはありますか？

はい、javaScriptでHTTPリクエストを作成するために、XMLHTTPREQUESTおよびFETCH APIにいくつかの代替品があります。これらには、Axios、JQueryの$ .Ajax、Superagentなどのライブラリが含まれます。これらのライブラリは、HTTPリクエストを行い、XMLHTTPREQUESTおよびFETCH APIと比較して追加の機能と便利さを提供するためのより高いレベルのインターフェイスを提供します。

以上がxmlhttprequest vs ajaxのフェッチAPIの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。