皆さん、こんにちは!興味深いプロジェクトに取り組んでいるときに、fetch と XMLHTTPRequest の違いについて説明することを思いつきました。実際、この質問は、少し間違っているという意味で、その作成の歴史を知っていれば非常に興味深いように思えますが、それでもそれについて知っておく必要があります。日々さまざまな API を使用するので、不要なコードを作成しないように知っておくと役立ちます。
XMLHTTPRequest とは何か、およびその作成の簡単な歴史
JavaScript では、XMLHttpRequest オブジェクトを使用してサーバーと対話します。ページ全体を更新しなくても、URL からデータを取得できます。これにより、Web ページは、ユーザーの作業を中断することなく、ページの一部だけを更新できます。しかし、一般的に言って、率直に言って、それは API です。これを聞くと、イベント ループ、非同期 (コードの実行が一定時間後に完了する) などの概念がすぐに思い出されます。たとえば、XMLHTTPRequest を使用するコードは次のようになります。
const xhr = new XMLHttpRequest(); // method, URL, [isAsync, user, password] xhr.open("GET", "/api/getPage"); // body xhr.send()
XMLHTTPRequest 自体の作成の歴史は、恐竜が歩いていた遠い昔に遡ります。まあ、冗談です。実際、この API は Microsoft によって最初に開発され、Microsoft Exchange Server ソフトウェア 2000 製品の Web コンポーネントの Outlook に導入されました。
当時、それは IXMLHTTPRequest という別の名前で呼ばれており、インターフェースの最初のバージョンでは、現在のものとは少し異なっていました。つまり、ベースは明らかに残っているが、25年間にわたって調整が加えられたことは明らかである。その後、MSXML 2.0 に追加され、さらにその後、1999 年 3 月に Internet Explorer 5 に追加されました。
その後、Mozilla プログラマーは、IXMLHTTPRequest に基づいて独自のバージョンの API を開発し、nsIXMLHttpRequest と呼ばれ、私たちが愛用する XMLHttpRequest を通じてアクセスできるようにしました。これらはすべて、2000 年 12 月に Gecko バージョン 0.6 に追加されました (Gecko は、FireFox や他の多くの場所で使用されるブラウザ エンジンです)。最初のバージョンが 2002 年 9 月にリリースされ、Phoenix、次に FireBird、そして 2004 年までに FireFox と呼ばれていたため、当時は FireFox などというものはありませんでした。そして、このすべての前に Netscape Navigator がありましたが、Internet Explorer との対立とそれだけです - それはまた別の話であり、この記事で書く意味はありません。その後、Safari、Opera、その他のブラウザにサポートが追加されました。したがって、このオブジェクトは古いブラウザとの互換性のために使用されていると言われると、もちろんそれは正しいのです。Web 開発がまだ発展途上だった 90 年代後半の話になるからです。ドットコム バブルの頃のことさえ覚えているかもしれませんが、確かにそれはもう少し前、あるいは当時 (Internet Explorer の場合) でしたが、とにかく当時のことでした。
それで、違いは何ですか?
それで、違いについての質問に戻りますが、最も重要な違いはすでに歴史の中に隠されています。XMLHTTPRequest は古いながらもサポートされている API であり、fetch はそれを置き換える新しい API にすぎないからです。現在、XMLHTTPRequest 2.0 は 2012 年 1 月にリリースされましたが、1.0 標準の最新版は同年 12 月にリリースされました。これがこのオブジェクトの現在の標準です。しかし今、これをいつも書いていた開発者の顔を想像してみてください:
const xhr = new XMLHttpRequest(); // method, URL, [isAsync, user, password] xhr.open("GET", "/api/getPage"); // body xhr.send()
これの代わりに
var xhr = new XMLHttpRequest(); xhr.open('GET', '/api/getData', true); xhr.onload = function () { if (xhr.status >= 200 && xhr.status <p>数年前。すぐに思い浮かぶのはそれだけです。</p> <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173164813124292.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="✅What is the difference between fetch and XMLHTTPRequest?"></p> <p>しかし真剣に、ここに違いの短いリストを示します:</p> <ol> <li><p>Promise 指向: Fetch API は Promise を使用するため、非同期コードの操作が容易になり、.then() や async and await などの便利な構造を使用できるようになります。</p></li> <li><p>簡素化されたインターフェイス: Fetch API の構文はよりシンプルで直感的です。たとえば、リクエストを行う場合、XHR の場合のように、オブジェクトを作成してそのプロパティを設定する必要はありません。</p></li> <li><p>新機能のサポート: Fetch API は、リクエスト、レスポンス、およびそれらの変換を操作するための便利なメソッドを提供する、リクエスト オブジェクトやレスポンス オブジェクトなどの新機能をサポートします。</p></li> <li><p>ストリームのサポート: Fetch API はストリーミング データをサポートしているため、受信した大量のデータを処理できます。</p></li> <li><p>リクエストのキャンセル: Fetch API にはリクエストのキャンセルのサポートが組み込まれていませんが、中止コントローラーを使用してリクエストをキャンセルすることができ、リクエストの管理がより柔軟になります。</p></li> <li><p>カスタマイズの改善: Fetch API には、ヘッダー、キャッシュ モード、その他のパラメーターの設定など、リクエストを構成するためのオプションが追加されました。</p></li> <li><p>cors サポート: Fetch API は、CORS (Cross-Origin Resource Sharing) と連携する際の柔軟性を高め、他のドメインからのリソースへのリクエストをより柔軟に構成できます。</p></li> <li><p>エラー処理の改善: Fetch API を使用する場合、リクエスト エラー (ネットワークが利用できないなど) は Promise を拒否しますが、4xx または 5xx コードによる成功した応答は拒否されないため、応答ステータスをより適切に処理できます。拒否する場合は、ステータス コードを自分で確認する必要があります。</p></li> </ol> <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173164813671282.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="✅What is the difference between fetch and XMLHTTPRequest?"><br> <em>これはもちろん私ではありませんが、ただのクールな写真です</em></p><p>そして、もちろん、他にも多くの違いがありますが、今それらを列挙することに意味はないと思います。なぜなら、すべての点から見て、これが最新のブラウザ要件に合わせた古い標準の単なる改良版であることは明らかだからです。 </p> <h2> あとがき </h2> <p>最初は、fetch が新しい標準であるということを 1 行書こうと思ったのですが、実際にはそれを伝えることができる素晴らしいものがたくさんあるのに、それは単純すぎて情報が少なくなります。 fetch だけで記事を 1 つ書くこともできますが、この記事には特に意味はありません。しかし、全体的には、私の意見では、すべてがうまくいっているようです。</p> <p>記事をお読みいただきありがとうございます!</p> <h2> 追伸 </h2> <p>ちなみにこのプロジェクトはHMPLでした。これは、サーバーからクライアントに UI を表示するための小さなテンプレート言語です。このプロジェクトを星で評価していただければ幸いです。ありがとうございます!</p> <p>スターHMPL </p>
以上が✅fetch と XMLHTTPRequest の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScriptコアデータ型は、ブラウザとnode.jsで一貫していますが、余分なタイプとは異なる方法で処理されます。 1)グローバルオブジェクトはブラウザのウィンドウであり、node.jsのグローバルです2)バイナリデータの処理に使用されるNode.jsの一意のバッファオブジェクト。 3)パフォーマンスと時間の処理にも違いがあり、環境に従ってコードを調整する必要があります。

javascriptusestwotypesofcomments:シングルライン(//)およびマルチライン(//)

PythonとJavaScriptの主な違いは、タイプシステムとアプリケーションシナリオです。 1。Pythonは、科学的コンピューティングとデータ分析に適した動的タイプを使用します。 2。JavaScriptは弱いタイプを採用し、フロントエンドとフルスタックの開発で広く使用されています。この2つは、非同期プログラミングとパフォーマンスの最適化に独自の利点があり、選択する際にプロジェクトの要件に従って決定する必要があります。

PythonまたはJavaScriptを選択するかどうかは、プロジェクトの種類によって異なります。1)データサイエンスおよび自動化タスクのPythonを選択します。 2)フロントエンドとフルスタック開発のためにJavaScriptを選択します。 Pythonは、データ処理と自動化における強力なライブラリに好まれていますが、JavaScriptはWebインタラクションとフルスタック開発の利点に不可欠です。

PythonとJavaScriptにはそれぞれ独自の利点があり、選択はプロジェクトのニーズと個人的な好みに依存します。 1. Pythonは、データサイエンスやバックエンド開発に適した簡潔な構文を備えた学習が簡単ですが、実行速度が遅くなっています。 2。JavaScriptはフロントエンド開発のいたるところにあり、強力な非同期プログラミング機能を備えています。 node.jsはフルスタックの開発に適していますが、構文は複雑でエラーが発生しやすい場合があります。

javascriptisnotbuiltoncorc;それは、解釈されていることを解釈しました。

JavaScriptは、フロントエンドおよびバックエンド開発に使用できます。フロントエンドは、DOM操作を介してユーザーエクスペリエンスを強化し、バックエンドはnode.jsを介してサーバータスクを処理することを処理します。 1.フロントエンドの例:Webページテキストのコンテンツを変更します。 2。バックエンドの例:node.jsサーバーを作成します。

PythonまたはJavaScriptの選択は、キャリア開発、学習曲線、エコシステムに基づいている必要があります。1)キャリア開発:Pythonはデータサイエンスとバックエンド開発に適していますが、JavaScriptはフロントエンドおよびフルスタック開発に適しています。 2)学習曲線:Python構文は簡潔で初心者に適しています。 JavaScriptの構文は柔軟です。 3)エコシステム:Pythonには豊富な科学コンピューティングライブラリがあり、JavaScriptには強力なフロントエンドフレームワークがあります。


ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

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

MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

ドリームウィーバー CS6
ビジュアル Web 開発ツール

ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境

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