XMLHttpRequest

XMLHttpRequest(XHR) は,JavaScriptなどのウェブブラウザĐáp tái のスクリプト ngôn ngữでサーバとのHTTPThông tín を hành うための, tổ み込みオブジェクト(API) である.

すでに đọc み込んだページからさらにHTTPリクエストを phát することができ, ページ thiên di することなしにデータを tống thụ tín できるAjaxの cơ càn kỹ thuật である.

XMLHttpRequestを lợi dụng したWebアプリケーションは phi thường に đa く tồn tại し, lệ として,Google マップ,Facebookなどが cử げられる.

Lịch sử

XMLHttpRequestは,マイクロソフトがOutlook Web Access2000のダイナミックHTMLによるウェブインターフェースに hoạt dụng するため,1999 niênCông khai のInternet Explorer5においてActiveXオブジェクトとして thật trang したのが thủy まりである.その hậu,2001 niênにMozillaプロジェクトがこれと hỗ hoán tính のある tổ み込みオブジェクトをMozilla 0.9.7およびNetscape 7で thật trang し,Appleも2004 niênにSafari1.2でMozillaと đồng dạng の tổ み込みオブジェクトを thật trang し thủy めた.

このように từ 々にInternet Explorer dĩ ngoại のブラウザにも thật trang されていったXMLHttpRequestは,2005 niênにAjaxによって nhất dược hữu danh になった.オペラ・ソフトウェアも đồng niên, tổ み込みオブジェクトとしてXMLHttpRequestを thật trang したOpera8をリリースするなど, XMLHttpRequestはスクリプトの thật hành hoàn cảnh がある đa くのブラウザで thật trang された. またマイクロソフトは2006 niênリリースのInternet Explorer 7で, ユーザーがActiveXを vô hiệu にしていてもAjaxアプリケーションを lợi dụng できるよう, XMLHttpRequestを tổ み込みオブジェクトとして tiêu chuẩn thật trang した.

ウェブブラウザで thật trang されているデファクトスタンダードとなったことから, W3Cで sĩ dạng の tiêu chuẩn hóa が tiến められ,XMLHttpRequest Level 1およびXMLHttpRequest Level 2の sách định が thủy まった. その hậu, 2014 niên 11 nguyệt 18 nhật に Level 2 が廃 chỉ され, Level 1 に thống hợp された. また, kim hậu の sĩ dạng sách định はWHATWGで nghị luận することになった.

それ dĩ hàng, WHATWGのXMLHttpRequest Living Standardが sĩ dạng として tráp われている.

オブジェクトの cấu thành

Dĩ hạ のAPIは, toàn ての chủ yếu なブラウザの tối tân bản ではいずれも thật trang されている.

• メソッド
  • abort
  • getAllResponseHeaders
  • getResponseHeader
  • open
  • overrideMimeType
  • send
  • setRequestHeader
• イベントハンドラ
  • onloadstart
  • onprogress
  • onabort
  • onerror
  • onload
  • ontimeout
  • onloadend
  • onreadystatechange
• プロパティ
  • readyState
    • 0 = UNSENT
    • 1 = OPENED
    • 2 = HEADERS_RECEIVED
    • 3 = LOADING
    • 4 = DONE
  • response
  • responseText
  • responseType
  • responseXML
  • status
  • statusText
  • timeout
  • upload
  • withCredentials

Lợi dụng pháp

オブジェクトの tác thành

Internet Explorer 5および6ではActiveXオブジェクトでしか tồn tại しないため, dĩ hạ のようなフォールバックコードが đa dụng される.

varxhr;
if(XMLHttpRequest){
// tổ み込みオブジェクトとして định nghĩa されていればそれを lợi dụng
xhr=newXMLHttpRequest();
}else{
// さもなくばActiveXオブジェクトを lợi dụng
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を hữu hiệu にしてください");
}
}
}
}

MSXMLのどのバージョンを lợi dụng するかについて, マイクロソフトのXMLチームはベストとして6.0, đại thế として3.0を thôi thưởng している.

また, kiến やすさと lợi tiện tính を khảo lự してこのようなコードも sử われる. Quan sổ hóa により giản 単に tráp えるようにし, return văn は quan sổ を chung liễu する động きを trì っていることを lợi dụng して kiến やすさを hướng thượng させている.

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;
};

さらに, このように áp súc したコードを thư くこともできる.

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
};

GET

xhr.onreadystatechange=function(){
if(xhr.readyState==4){// DONE
if(xhr.status==200){// OK
alert(xhr.responseText);
}else{
alert("status ="+xhr.status);
}
}
}
xhr.open("GET","hoge.txt");
xhr.send();

POST

xhr.onreadystatechange=function(){
if(xhr.readyState==4){// DONE
if(xhr.status==200){// OK
alert(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");

クロスドメイン

Thông tín はセキュリティ thượng の lý do によりĐồng nhất sinh thành nguyên ポリシーによって chế hạn され, cơ bổn đích には, XMLHttpRequestは đồng nhất ドメイン ( chính xác には đồng nhất sinh thành nguyên ) としか thông tín ができない. しかし, XMLHttpRequest Level 2には, dị なるドメインと thông tín する cơ năng が truy gia になっており, Firefox 3.5 dĩ hàng, Google Chrome, Safari 4 dĩ hàng で lợi dụng khả năng である. また, Internet Explorer 8には, phi tiêu chuẩn の XDomainRequest があり, tự たようなことが khả năng である.

クロスドメインを nhận めるには, サーバー trắc のHTTPレスポンスヘッダーに truy gia が tất yếu であり, lệ えば,Access-Control-Allow-Origin: *と thư くと toàn てのドメインからのアクセスが hứa khả される. Access-Control-Allow-Origin は Internet Explorer を hàm め toàn てのクロスドメイン đối ứng ブラウザで sử える. W3Cの sĩ dạng は, Cross-Origin Resource Sharing にて quy định されている.

また, Firefox では POST などで, text/plain など dĩ ngoại の Content-Type をクロスドメインで tống tín する tràng hợp, OPTIONS を sử いプレフライトが hành われる.

また, ブラウザの拡 trương cơ năng などでは đặc biệt に chế hạn を thụ けずに thông tín を hành える cơ năng が dụng ý されている tràng hợp もある.

ストリーミング

readyState が 3 (LOADING) の trạng thái で, cơ bổn đích には, thụ tín đồ trung の thông tín nội dung を thủ ることができるので, そのことを sử うと, thụ tín ストリーミングが sử dụng できる. ただし, các ブラウザで dĩ hạ の chế hạn sự hạng がある.

1. Internet ExplorerのXMLHttpRequestはreadyStateが3の trạng thái では, nội dung がとれなく, Internet Explorer 8 dụng のXDomainRequestを sử dụng する tất yếu があり, gia えて, tối sơ に2KBのダミーデータをサーバーから tống る tất yếu がある. Internet Explorer 7 dĩ tiền では, ストリーミングは sử えない.
2. Google Chrome はバージョン6 hiện tại, readyStateが3の trạng thái に di hành するために, Content-Type: application/octet-stream とするか, 1024バイト dĩ thượng のデータをサーバーから tống る tất yếu がある.
3. Opera dĩ ngoại のブラウザでは, ブラウザ trắc でデータを thụ け thủ るたびに onreadystatechange が phát sinh するが, Opera 11.0 では phát sinh しないので, định kỳ đích にresponseTextの nội dung を kiến に hành く tất yếu がある.

ロングポーリング

“Comet”も tham chiếu

HTTPの tiếp 続を trương りっぱなしにしておいて, サーバーから tình báo を tống りたいときに sơ めてレスポンスを phản すことをロングポーリングと hô ぶ.Cometの thật trang に sử われる. Lợi dụng thời に dĩ hạ の chú ý điểm がある.

1. ブラウザのHTTP tiếp 続のタイムアウト ( 30 miểu など ) があるため, tiếp 続が thiết れたら, tiếp 続し trực すロジックが tất yếu である.
2. サーバー đương たりの đồng thời tiếp 続 sổ が, sơ kỳ thiết định では, Internet Explorer 8 dĩ hàng や Internet Explorer dĩ ngoại の chủ yếu ブラウザでは6,Internet Explorer 7 dĩ tiền では2に chế hạn されているため, phục sổ のロングポーリングをこの chế hạn まで đồng thời に hành うと, tân たにサーバーに tiếp 続できなくなる. ダイアルアップ tiếp 続の tràng hợp, Internet Explorer 8でも đồng thời tiếp 続 sổ は2に chế hạn されている.
3. HTTPの tiếp 続が chung liễu するまでサーバーが chung liễu できなかったり, tiếp 続ごとにスレッドを tác thành し, đồng thời tiếp 続 sổ が đa いとそれがメモリなどのリソースを đại lượng に tiêu phí するなどの vấn đề があるため, ロングポーリングに đối ứng したサーバー trắc の thật trang phương pháp が tất yếu である. Lệ えばJavaの tràng hợp は,Jettyならば độc tự のContinuationクラス,Apache Tomcatならば độc tự のCometProcessorクラスなど, Servlet 3.0ならばHTTPServletRequestにstartAsync()が dụng ý されていて, それらのロングポーリング dụng のAPIを hoạt dụng することが vọng ましい.

なおこれらの vấn đề を căn bổn đích に giải quyết することを mục đích として, IETF・W3C tha で2011 niênに đại thế プロトコルであるWebSocketが tiêu chuẩn hóa された.

Quan liên hạng mục

• Ajax
• Extensible Markup Language
• Hypertext Transfer Protocol
• WebSocket
• Outlook Web Access

Ngoại bộ リンク

Sĩ dạng

• XMLHttpRequest Level 1- W3C Working Draft( anh ngữ )
• XMLHttpRequest Level 2- 廃 chỉ され Level 1 に thống hợp された
• XMLHttpRequest Living Standard-WHATWG( anh ngữ )
  • XMLHttpRequest Standard ( nhật bổn ngữ 訳 )
• Cross-Origin Resource Sharing( anh ngữ )
• Progress Events 1.0( anh ngữ )

ブラウザ trắc の giải thuyết

• MSDN ライブラリ
  • XMLHttpRequest Object
  • XDomainRequest Object
  • IXMLHTTPRequest
• XMLHttpRequest-Mozilla Developer Center( nhật bổn ngữ )
• オペラのXMLHttpRequest ( "Ajax" ) サポート( nhật bổn ngữ )
• Dynamic HTMLとXML: XMLHttpRequestオブジェクト-Apple Developer Connection( nhật bổn ngữ )