 |
XMLHttpRequest (XHR) は、JavaScriptなどのウェブブラウザ搭載のスクリプト言語でサーバとのHTTP通信を行うための、組み込みオブジェクト（API）である。
すでに読み込んだページからさらにHTTPリクエストを発することができ、ページ遷移することなしにデータを送受信できるAjaxの基幹技術である。
XMLHttpRequestを利用したウェブアプリケーションは非常に多く存在し、例として、Google マップ、Facebookなどが挙げられる。
XMLHttpRequestは、マイクロソフトがOutlook Web Access 2000のダイナミックHTMLによるウェブインタフェースに活用するため、1999年公開のInternet Explorer 5においてActiveXオブジェクトとして実装したのが始まりである[1]。その後、2001年にMozillaプロジェクトがこれと互換性のある組み込みオブジェクトをMozilla 0.9.7およびNetscape 7で実装し、Appleも2004年にSafari 1.2でMozillaと同様の組み込みオブジェクトを実装し始めた[2]。
このように徐々にInternet Explorer以外のブラウザにも実装されていったXMLHttpRequestは、2005年にAjaxによって一躍有名になった。オペラ・ソフトウェアも同年、組み込みオブジェクトとしてXMLHttpRequestを実装したOpera 8をリリースするなど、XMLHttpRequestはスクリプトの実行環境がある多くのブラウザで実装された。またマイクロソフトは2006年リリースのInternet Explorer 7で、ユーザーがActiveXを無効にしていてもAjaxアプリケーションを利用できるよう、XMLHttpRequestを組み込みオブジェクトとして標準実装した[3]。
ウェブブラウザで実装されているデファクトスタンダードとなったことから、W3Cで仕様の標準化が進められ、XMLHttpRequest Level 1およびXMLHttpRequest Level 2の策定が始まった。その後、2014年11月18日に Level 2 が廃止され、Level 1 に統合された。また、今後の仕様策定はWHATWG で議論することになった[4]。
それ以降、WHATWGのXMLHttpRequest Living Standardが仕様として扱われている。
以下のAPIは、全ての主要なブラウザの最新版ではいずれも実装されている。
Internet Explorer 5および6ではActiveXオブジェクトでしか存在しないため、以下のようなフォールバックコードが多用される。
varxhr;if(XMLHttpRequest){// 組み込みオブジェクトとして定義されていればそれを利用xhr=newXMLHttpRequest();}else{// さもなくばActiveXオブジェクトを利用try{xhr=newActiveXObject('MSXML2.XMLHTTP.6.0');}catch(e){try{xhr=newActiveXObject('MSXML2.XMLHTTP.3.0');}catch(e){try{xhr=newActiveXObject('MSXML2.XMLHTTP');}catch(e){alert("ActiveXを有効にしてください");}}}}
MSXMLのどのバージョンを利用するかについて、マイクロソフトのXMLチームはベストとして6.0、代替として3.0を推奨している[5]。
また、見やすさと利便性を考慮してこのようなコードも使われる。関数化により簡単に扱えるようにし、return文は関数を終了する働きを持っていることを利用して見やすさを向上させている。
functioncreateXMLHttpRequest(){if(window.XMLHttpRequest){returnnewXMLHttpRequest()}if(window.ActiveXObject){try{returnnewActiveXObject("Msxml2.XMLHTTP.6.0")}catch(e){}try{returnnewActiveXObject("Msxml2.XMLHTTP.3.0")}catch(e){}try{returnnewActiveXObject("Microsoft.XMLHTTP")}catch(e){}}returnfalse;};
さらに、このように圧縮したコードを書くこともできる。
functioncreateXMLHttpRequest(a,e,i){if(XMLHttpRequest){returnnewXMLHttpRequest()}if(ActiveXObject){a="Msxml2.XMLHTTP.";a=["Microsoft.XMLHTTP",a+"3.0",a+"6.0"];for(i=3;i--;){try{returnnewActiveXObject(a[i])}catch(e){}}}return!1};
xhr.onreadystatechange=function(){if(xhr.readyState==4){// DONEif(xhr.status==200){// OKalert(xhr.responseText);}else{alert("status = "+xhr.status);}}}xhr.open("GET","hoge.txt");xhr.send();
xhr.onreadystatechange=function(){if(xhr.readyState==4){// DONEif(xhr.status==200){// OKalert(xhr.responseText);}else{alert("status = "+xhr.status);}}}xhr.open("POST","hoge.cgi");xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xhr.send("a=b&c=d");
通信はセキュリティ上の理由により同一生成元ポリシーによって制限され、基本的には、XMLHttpRequestは同一ドメイン（正確には同一生成元）としか通信ができない。しかし、XMLHttpRequest Level 2には、異なるドメインと通信する機能が追加になっており、Firefox 3.5以降、Google Chrome、Safari 4以降で利用可能である。また、Internet Explorer 8には、非標準の XDomainRequest があり、似たようなことが可能である。
クロスドメインを認めるには、サーバ側のHTTPレスポンスヘッダーに追加が必要であり、例えば、Access-Control-Allow-Origin: *と書くと全てのドメインからのアクセスが許可される。Access-Control-Allow-Origin は Internet Explorer を含め全てのクロスドメイン対応ブラウザで使える。W3Cの仕様は、Cross-Origin Resource Sharing にて規定されている。
また、Firefox では POST などで、text/plain など以外の Content-Type をクロスドメインで送信する場合、OPTIONS を使いプレフライトが行われる[6]。
また、ブラウザの拡張機能などでは特別に制限を受けずに通信を行える機能が用意されている場合もある。
readyState が 3 (LOADING) の状態で、基本的には、受信途中の通信内容を取ることができるので、そのことを使うと、受信ストリーミングが使用できる。ただし、各ブラウザで以下の制限事項がある[7]。
HTTPの接続を張りっぱなしにしておいて、サーバから情報を送りたいときに初めてレスポンスを返すことをロングポーリングと呼ぶ。Cometの実装に使われる。利用時に以下の注意点がある。
なおこれらの問題を根本的に解決することを目的として、IETF・W3C他で2011年に代替プロトコルであるWebSocketが標準化された。
マイクロソフトのAPIとフレームワーク | |
|---|---|
| グラフィック | |
| オーディオ | |
| マルチメディア | |
| ウェブ | |
| データアクセス | |
| ネットワーク | |
| コミュニケーション | |
| 管理 | |
| コンポーネントモデル | |
| ライブラリ | |
| デバイスドライバ | |
| セキュリティ | |
| .NET | |
| ソフトウェアファクトリー | |
| IPC | |
| アクセシビリティ | |
テキストと多言語 サポート | |
| 人工知能 | |
