XMLHttpリクエスト

XMLHttpRequest ( XHR ) は、JavaScriptオブジェクト形式のAPIであり、そのメソッドはWeb ブラウザからWeb サーバーにHTTPリクエストを送信します。^[1]メソッドを使用すると、ブラウザベースのアプリケーションは、ページの読み込みが完了した後にサーバーにリクエストを送信し、情報を受け取ることができます。^{[2] XMLHttpRequest は}Ajax プログラミングのコンポーネントです。Ajax 以前は、ハイパーリンクとフォームの送信がサーバーと対話するための主なメカニズムであり、現在のページを別のページに置き換えることが多かったです。^[2]

XMLHttpRequest の概念は、2000 年にMicrosoft Outlookの開発者によって考案されました。^[3]この概念はその後、Internet Explorer 5ブラウザ (2001) に実装されました。ただし、元の構文ではXMLHttpRequest 識別子は使用されていませんでした。代わりに、開発者は識別子ActiveXObject("Msxml2.XMLHTTP")と を使用しましたActiveXObject("Microsoft.XMLHTTP")。^[4] Internet Explorer 7 (2006)以降、すべてのブラウザがXMLHttpRequest識別子をサポートしています。^[4]

このXMLHttpRequest識別子は現在、MozillaのGeckoレイアウトエンジン（2002年）^{[5] 、} Safari 1.2（2004年）、Opera 8.0（2005年）^[6]など、すべての主要ブラウザの事実上の標準となっています。

ワールドワイドウェブコンソーシアム（W3C）は、2006年4月5日にXMLHttpRequestオブジェクトのワーキングドラフト仕様を公開しました。 ^{[7] [a]} 2008年2月25日、W3Cはワーキングドラフトレベル2仕様を公開しました。 ^[8]レベル2では、イベントの進行状況を監視し、サイト間リクエストを許可し、バイトストリームを処理する方法が追加されました。2011年末に、レベル2仕様は元の仕様に吸収されました。^[9]

2012年末にWHATWGが開発を引き継ぎ、Web IDLを使用したライブドキュメントを維持管理しています。^[10]

一般的に、XMLHttpRequestでリクエストを送信するには、いくつかのプログラミング手順が必要です。^[11]

1. コンストラクターを呼び出して XMLHttpRequest オブジェクトを作成します。

   constリクエスト=新しいXMLHttpRequest ();    
   

2. 「open」メソッドを呼び出して、リクエスト タイプを指定し、関連するリソースを識別し、同期操作または非同期操作を選択します。

   request . open ( 'GET' , '/api/message' , true /* 非同期 */ );   
   

3. 非同期リクエストの場合は、リクエストの状態が変化したときに通知されるリスナーを設定します。

   リクエスト.onreadystatechange =リスナー;​  
   

4. 「send」メソッドを呼び出してリクエストを開始します。

   リクエスト.send ( ) ;
   

5. イベント リスナーの状態の変化に応答します。サーバーが応答データを送信すると、デフォルトではそのデータが "responseText" プロパティにキャプチャされます。オブジェクトが応答の処理を停止すると、状態 4 ("done" 状態) に変わります。

   function listener () { // リクエストが完了して成功したかどうかを確認します。if ( request . readyState == 4 && request . status == 200 ) console . log ( request . responseText ); // テキストを表示します。}  
     
            
        
   
   

これらの一般的な手順以外にも、XMLHttpRequest には、リクエストの送信方法とレスポンスの処理方法を制御するためのオプションが多数あります。カスタムヘッダー フィールドをリクエストに追加して、サーバーがリクエストをどのように処理するかを示すことができます。 ^[12]また、データを "send" 呼び出しで提供することで、サーバーにデータをアップロードできます。^[13]レスポンスは、JSON形式からすぐに使用できる JavaScript オブジェクトに解析することも、テキスト全体を待つのではなく、到着時に徐々に処理することもできます。^{[14]リクエストは途中で中止することも、 [15]}指定時間内に完了しない場合は失敗するように設定することもできます。 ^[16]

World Wide Webの開発初期には、JavaScript を使用してある Web サイトと評判の低い別の Web サイトとの間で情報を交換することで、ユーザーのセキュリティを侵害できることが判明しました。そのため、すべての最新ブラウザーは、クロスサイト スクリプティングなどの多くの攻撃を防ぐ同一生成元ポリシーを実装しています。 XMLHttpRequest データはこのセキュリティ ポリシーの対象ですが、Web 開発者が意図的にその制限を回避したい場合もあります。これは、サブドメインの正当な使用が原因である場合があります。たとえば、 によって作成されたページから情報を取得するためにXMLHttpRequest を発行すると、通常は失敗します。 foo.example.combar.example.com

このセキュリティ機能を回避するには、JSONP、クロスオリジンリソース共有（CORS）、 FlashやSilverlight （どちらも現在は非推奨）などのプラグインを使用するなど、さまざまな代替手段があります。クロスオリジンXMLHttpRequestは、W3CのXMLHttpRequestレベル2仕様で指定されています。^[17] Internet Explorerはバージョン10までCORSを実装していませんでした。以前の2つのバージョン（8と9）では、XDomainRequest（XDR）APIを通じて同様の機能を提供していました。CORSは現在、すべての最新ブラウザ（デスクトップとモバイル）でサポートされています。^[18]

CORSプロトコルにはいくつかの制限があり、2つのサポートモデルがあります。シンプルモデルでは、カスタムリクエストヘッダーの設定は許可されず、クッキーも省略されます。さらに、HEAD、GET、POSTリクエストメソッドのみがサポートされ、POSTでは次のMIMEタイプのみが許可されます：「text/plain」、「application/x-www-urlencoded」、および「multipart/form-data」。当初は「text/plain」のみがサポートされていました。^{[19]もう1つのモデルは、}シンプルではない機能の1つが要求されたことを検出し、その機能をネゴシエートするために事前フライトリクエスト^[20]をサーバーに送信します。

非同期 XHR コールバックを使用するプログラム フローは、読みやすさとメンテナンスの点で問題が生じる可能性があります。ECMAScript 2015 (ES6) では、非同期ロジックを簡素化するために promise 構造が追加されました。それ以来、ブラウザーはコールバックの代わりにpromisefetch()を使用して XHR と同じ機能を実現する代替インターフェイスを実装しています。

FetchもWHATWGによって標準化されている。^[21]

fetch ( '/api/message' ) 
.then ( response => { if ( response . status != 200 ) throw new Error ( 'リクエストが失敗しました' ) ; return response . text (); }) .then ( text = > { console . log ( text ); });    
          
     
  
    
    
  

• ウェブソケット
• 表現状態転送(REST)

Wikibooksには、 XMLHttpRequestに関する書籍があります。

• WHATWGによる XMLHttpRequest Living Standard
• W3Cによる XMLHttpRequest レベル 1 ドラフト