XMLHttpRequest

XMLHttpRequest
"XHR"은 여기서 리다이렉트 됩니다.라디오 방송국에 대해서는, 「XHR-FM」을 참조해 주세요.
HTTP
HTTP logo.svg
요구 방식
헤더 필드
응답 상태 코드
보안 접근 제어 방법
보안 취약성

XMLHttpRequest(XHR)는 메서드가 웹 브라우저와 웹 서버 간에 데이터를 전송하는 객체 형식의 API입니다.오브젝트는 브라우저의 JavaScript 환경에서 제공됩니다.특히 로드된 웹 페이지를 지속적으로 수정하기 위해 XHR에서 데이터를 검색하는 것이 Ajax 설계의 기본 개념입니다.이름에도 불구하고 XHR은 HTTP 이외의 프로토콜과 함께 사용할 수 있으며 데이터는 [1]XML뿐만 아니라 JSON,[2] HTML 또는 일반 [3]텍스트 형식으로도 사용할 수 있습니다.

WHATWG는 XHR 표준을 살아있는 문서로 유지합니다.안정된 사양을 작성하기 위한 W3C의 지속적인 작업은 WHATWG 표준의 스냅샷을 기반으로 합니다.

역사

XMLHttpRequest 객체의 배후에 있는 개념은 원래 Microsoft Exchange Server [4]2000용 Outlook Web Access 개발자에 의해 작성되었습니다.IXMLHTTPRequest라는 인터페이스가 개발되어 이 [4][5]개념을 사용하여 MSXML 라이브러리의 두 번째 버전에 구현되었습니다.MSXML 라이브러리의 두 번째 버전은 1999년 3월에 Internet Explorer 5.0과 함께 출고되었으며, MSXML [6]라이브러리의 XMLHTTP 래퍼를 사용하여 ActiveX를 통해 IXMLHTTP Request 인터페이스에 액세스할 수 있습니다.

Internet Explorer 버전5 및 6에서는 XMLHttpRequest ID 자체가 출시 당시 [6]표준이 아니었기 때문에 XMLHttpRequest 개체 ID는 스크립트 언어로 정의되지 않았습니다.XMLHttpRequest ID가 [7]존재하지 않는 경우 오브젝트 검출을 통해 하위 호환성을 확보할 수 있습니다.마이크로소프트는 2006년 [6]10월에 출시된 Internet Explorer 7.0에서 XMLHttpRequest 객체 식별자를 스크립트 언어에 추가했습니다.

Mozilla 프로젝트는 nsIXMLHttpRequest라는 인터페이스를 개발하여 Gecko 레이아웃 엔진에 구현했습니다.이 인터페이스는 가능한 [8][9]한 Microsoft의 IXMLHTTPRequest 인터페이스에 가깝게 동작하도록 설계되어 있습니다.Mozilla는 XMLHttpRequest라고 [10]불리는 JavaScript 개체를 통해 이 인터페이스를 사용하기 위한 래퍼를 만들었습니다.XMLHttpRequest 객체는 [11][12]Gecko 버전 0.6이 2000년 12월 6일에 출시되었을 때부터 액세스할 수 있었지만,[11][12] 2002년 6월 5일에 출시된 Gecko 버전 1.0이 되어서야 완전히 기능했습니다.XMLHttpRequest 객체는 [13]2004년2월에 출시된 Safari 1.2, [14]2005년4월에 출시된 Konqueror, Opera 8.0 및 [15]2005년9월에 출시된 iCab 3.0b352에서 구현된 기타 주요 웹 클라이언트에서 사실상의 표준이 되었습니다.

jQuery와 같은 크로스 브라우저 JavaScript 라이브러리의 등장으로 개발자는 XMLHttpRequest 기능을 간접적으로 호출할 수 있습니다.

표준

World Wide Web Consortium은 2006년 4월 5일 Opera Software의 Anne van Kesten과 [16]W3C의 Dean Jackson에 의해 편집된 XMLHttpRequest 객체의 작업 초안 사양을 발표했습니다.그 목적은 "기존 실장을 기반으로 상호 운용 가능한 최소한의 기능 세트를 문서화하여 웹 개발자가 플랫폼 고유의 코드 없이 이러한 기능을 사용할 수 있도록 하는 것"입니다.

또한 W3C는 2008년2월 25일 XMLHttpRequest 객체의 작업용 초안 사양인 "XMLHttpRequest Level 2"[17]를 발표했습니다.레벨 2는 XMLHttpRequest 객체에 대한 확장 기능(프로그레스 이벤트, 크로스 사이트 요구 지원, 바이트 스트림 처리 등)으로 구성됩니다.2011년 말 레벨 2 규격은 폐기되고 원래 [18]규격으로 흡수되었습니다.

2012년 말, WHATWG는 개발을 인계받아 Web IDL을 [19]사용하여 생활 표준을 유지하고 있습니다. W3C의 현재 초안은 WHATWG 표준의 스냅샷을 기반으로 합니다.

HTTP 요구

다음 항에서는 W3C Working Draft에 기초한 적합 사용자 에이전트 내에서 XMLHttpRequest 개체를 사용한 요구가 어떻게 기능하는지에 대해 설명합니다.XMLHttpRequest 객체의 W3C 표준은 아직 초안이기 때문에 사용자 에이전트는 W3C 정의의 모든 기능을 준수하지 않을 수 있으며 다음 중 하나가 변경될 수 있습니다.여러 사용자 에이전트에서 XMLHttpRequest 개체를 사용하여 스크립팅할 때는 매우 주의해야 합니다.이 문서에서는 주요 사용자 에이전트 간의 불일치를 나열하려고 합니다.

오픈 메서드

XMLHttpRequest 객체의 HTTP 및 HTTPS 요청은 오픈 메서드를 사용하여 초기화해야 합니다.이 메서드는 요구에 사용되는 요청 방식, URL 및 URI 사용자 정보를 검증하고 해결하기 위해 실제로 요청을 전송하기 전에 호출해야 합니다.이 방법으로는 URL이 존재하거나 사용자 정보가 올바른지 확인할 수 없습니다.이 메서드는 최대 5개의 파라미터를 받아들일 수 있지만 요구를 초기화하기 위해서는 2개만 필요합니다. 

open(메서드, URL, 비동기, 사용자 이름, 비밀번호)

메서드의 첫 번째 파라미터는 사용하는HTTP 요구 방식을 나타내는 텍스트 문자열입니다.XMLHttpRequest 객체의 W3C 드래프트에서 정의된 적합 사용자 에이전트에 의해 지원되어야 하는 요청 메서드는 현재 다음과 같습니다.[20]

  • GET(Internet Explorer 7+, Mozilla 1+에서 지원)
  • POST(IE7+, Mozilla 1+에서 지원)
  • HEAD(IE7+에서 지원)
  • 놓다
  • 삭제
  • OPTIONS (IE7+에서 지원)

단, 요청 방법은 위의 방법에만 국한되지 않습니다.W3C 초안에는 브라우저가 자체 재량으로 추가 요청 방식을 지원할 수 있다고 명시되어 있습니다.

메서드의 두 번째 파라미터는 HTTP 요청의 URL을 나타내는 다른 텍스트 문자열입니다.W3C에서는 브라우저에 오류가 발생하여 현재 [21]문서와 다른 포트 또는 ihost URI 컴포넌트를 가진 URL 요구를 허용하지 않도록 권장합니다.

세 번째 파라미터(요구가 비동기인지 아닌지를 나타내는 부울값)는 W3C 드래프트에서 필수 파라미터가 아닙니다.W3C 준거 사용자 에이전트가 이 파라미터를 지정하지 않으면 이 파라미터의 기본값은 true로 간주해야 합니다.비동기 요구("true")는 현재 스크립트의 실행을 계속하기 전에 서버 응답을 대기하지 않습니다.대신 요청의 다양한 단계에서 XMLHttpRequest 객체의 onreadystatechange 이벤트청취자를 호출합니다.그러나 동기요구("false")는 요구가 완료될 때까지 현재 스크립트의 실행을 차단하므로 onreadystatechange 이벤트청취자를 호출하지 않습니다.Gecko 30.0(Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27), Blink 39.0(Chrome) 및 Edge 13부터는 메인 스레드의 동기 요구가 요구 실행 중에 UI가 정지되기 때문에 사용자 경험에 부정적인 영향을 미치기 때문에 권장되지 않습니다.

네 번째 파라미터와 다섯 번째 파라미터는 각각 사용자 이름과 비밀번호입니다.이러한 파라미터 또는 사용자 이름만 서버에서 이 요구에 필요한 경우 인증 및 인가를 위해 제공할 수 있습니다. 

변화하다 xmlhttp;  한다면 (윈도.XMLHttpRequest) {     xmlhttp = 신규 XMLHttpRequest();     xmlhttp.열다.(「취득」, 파일 패스, 거짓의);     xmlhttp.보내세요(무효); }

set Request(setRequest)헤더 방식

요구가 정상적으로 초기화되면 setRequest는XMLHttpRequest 객체의 헤더 메서드를 호출하여 요청과 함께 HTTP 헤더를 전송할 수 있습니다. 

setRequest(setRequest(설정요구)헤더(이름, 값)

이 메서드의 첫 번째 파라미터는 헤더의 텍스트 문자열 이름입니다.두 번째 파라미터는 텍스트 문자열 값입니다.이 메서드는 요청과 함께 전송해야 하는 각 헤더에 대해 호출해야 합니다.다음에 W3C 준거 사용자 에이전트에서 오픈 메서드가 호출되면 여기에 첨부된 헤더는 삭제됩니다.

송신 방식

HTTP 요구를 송신하려면 , XMLHttpRequest 의 송신 메서드를 호출할 필요가 있습니다.이 메서드는 요청과 함께 전송되는 내용을 포함하는 단일 매개 변수를 허용합니다. 

send(데이터)

콘텐츠를 전송할 필요가 없는 경우 이 매개 변수를 생략할 수 있습니다.W3C 초안에서는 DOM 문서 객체를 제외하고 텍스트 문자열로 변환할 수 있는 한 이 파라미터는 스크립트 언어에서 사용할 수 있는 모든 유형이라고 명시되어 있습니다.사용자 에이전트가 매개 변수를 직렬화할 수 없는 경우 매개 변수를 무시해야 합니다.단, Firefox 3.0.x 및 이전 버전은 다음과 같은 경우에 예외를 발생시킵니다.send는 [22]인수 없이 호출됩니다.

매개 변수가 DOM 문서 개체인 경우 사용자 에이전트는 문서 개체의 inputEncoding 속성에 의해 나타나는 인코딩을 사용하여 문서가 올바른 형식의 XML로 변환되었는지 확인해야 합니다.setRequest를 통해 Content-Type 요청 헤더가 추가되지 않은 경우그러나 헤더는 적합한 사용자 에이전트에 의해 "application/xml;charset=charset"로 자동으로 추가됩니다. 여기서 charset은 문서 인코딩에 사용되는 인코딩입니다.

사용자 에이전트가 프록시 서버를 사용하도록 설정되어 있는 경우 XMLHttpRequest 객체는 요구를 적절히 변경하여 오리진서버가 아닌 프록시에 접속하여 송신합니다.Proxy-Authorizationheader를 참조해 주세요.

onready statechange 이벤트청취자

XMLHttpRequest 객체의 오픈 메서드가 세 번째 파라미터가 true로 설정된 상태에서 호출된 경우 XMLHttpRequest 객체의 readyState 속성을 변경하는 다음 각 액션에 대해 onreadystatechange 이벤트청취자가 자동으로 호출됩니다.

상태 변경은 다음과 같이 동작합니다.

  • 상태 설명
0 요청이 초기화되지 않았습니다. 1 요청이 설정되었습니다. 2 요청이 전송되었습니다. 3 요청이 진행 중입니다. 4 요청이 완료되었습니다.
  • 오픈 메서드가 정상적으로 호출되면 XMLHttpRequest 객체의 readyState 속성에 1(OPENED)의 값을 할당해야 합니다.
  • 송신 메서드가 호출되어 HTTP 응답 헤더가 수신되면 XMLHttpRequest 객체의 readyState 속성에는 2(HEADERS_RECEVED)의 값이 할당됩니다.
  • HTTP 응답 콘텐츠의 로드가 시작되면 XMLHttpRequest 객체의 readyState 속성에 3(LOADING)의 값을 할당해야 합니다.
  • HTTP 응답 콘텐츠 로드가 완료되면 XMLHttpRequest 객체의 readyState 속성에는 4(DONE)의 값이 할당됩니다.

리스너는 리스너를 정의한 후에 발생하는 상태 변경에만 응답합니다.상태 1과 상태2를 검출하려면 오픈 메서드를 호출하기 전에 리스너를 정의해야 합니다.송신 메서드를 호출하기 전에 오픈 메서드를 호출해야 합니다. 

변화하다 부탁한다 = 신규 XMLHttpRequest(); 부탁한다.준비 상태 변경 = 기능. () {     변화하다 다 했어요. = 이것..다 했어요.    4;     한다면 (이것..준비 상태 === 다 했어요.){         경계.(이것..준비 상태);     } }; 부탁한다.열다.(「취득」, 'somepage.xml', 진실의); 부탁한다.setRequest(setRequest(설정요구)헤더('X-Requested-With', 'XMLHttpRequest');  // 이 콜이 Ajax 목적으로 발신되었음을 서버에 알립니다.                                                                  // jQuery/Protype/Dojo와 같은 대부분의 라이브러리가 이 기능을 수행합니다. 부탁한다.보내세요(무효);  // 요청과 함께 데이터를 전송할 필요가 없습니다.

HTTP 응답

XMLHttpRequest의 송신 메서드에 대한 콜이 정상적으로 완료된 후 서버 응답이 올바른 형식의 XML이고 서버에서 전송된 Content-Type 헤더가 사용자 에이전트에 의해 XML의 인터넷미디어 유형으로 인식되면 responseX는XMLHttpRequest 객체의 ML 속성에는 DOM 문서 객체가 포함됩니다.또 다른 속성인 responseText에는 XML로 인식되는지 여부에 관계없이 적합한 사용자 에이전트에 의한 서버의 응답이 일반 텍스트로 포함됩니다.

크로스 도메인 요구

주요 기사:크로스 오리진 자원 공유

World Wide Web의 초기 개발에서는 JavaScript를 사용하여 사용자의 보안을 침해하고 한 웹사이트의 정보를 다른 웹사이트의 정보와 교환하는 것이 가능했다.따라서 최신 브라우저는 모두 사이트 간 스크립팅과 같은 많은 공격을 방지하는 동일한 오리진 정책을 구현합니다.XMLHttpRequest 데이터는 이 보안 정책의 적용을 받지만 웹 개발자가 의도적으로 제한을 회피하려고 할 수 있습니다.이것은, 예를 들면, 에 의해서 작성된 페이지에서 XMLHttpRequest 를 작성하는 등, 서브 도메인을 합법적으로 사용하는 것이 원인인 경우가 있습니다.foo.example.com에서 정보를 얻으려면bar.example.com는 보통 실패합니다.

JSONP, Cross-Origin Resource Sharing(CORS; 발신기지 자원 공유) 또는 Flash나 Silverlight 등의 플러그인과 함께 사용하는 방법(둘 다 현재 권장되지 않음)을 포함한 다양한 방법이 있습니다.Cross-origin XMLHttpRequest는 W3C의 XMLHttpRequest 레벨2 [23]사양으로 지정되어 있습니다.Internet Explorer는 버전 10까지 CORS를 구현하지 않았습니다.이전 버전(8과 9)은 XDR(XDomainRequest) API를 통해 유사한 기능을 제공했습니다. CORS는 현재 모든 최신 브라우저(데스크탑 및 모바일)[24]에서 지원됩니다.

CORS 프로토콜에는 두 가지 지원 모델이 있는 몇 가지 제한이 있습니다.단순 모델에서는 사용자 지정 요청 헤더를 설정할 수 없으며 쿠키를 생략합니다.또한 HEAD, GET 및 POST 요청 메서드만 지원되며 POST는 "text/plain", "application/x-www-urlencoded" 및 "multipart/form-data"의 MIME 유형만 허용합니다.처음에는 "[25]text/plain"만 지원되었습니다.다른 모델은 단순하지 않은 기능 중 하나가 요구되었을 때 검출하여 서버에 전송[26] 전 요구를 전송하여 기능을 네고시에이트합니다.

대체 가져오기

비동기 XHR 콜백을 사용하는 프로그램플로우는 가독성과 유지보수에 문제가 있을 수 있습니다.ECMAScript 2015(ES6)는 비동기 로직을 단순화하는 약속 구성을 추가했습니다.그 후 브라우저는 대체 기능을 구현했습니다.fetch()콜백 대신 약속을 사용하여 XHR과 동일한 기능을 구현합니다.

또한 Fetch는 WHATWG에 [27]의해 표준화됩니다.

「 」를 참조해 주세요.

레퍼런스

  1. ^ "The responseXML attribute of the XMLHttpRequest object explained by the W3C Working Draft". W3.org. Retrieved 2009-07-14.
  2. ^ "Response entity body of XMLHttpRequest, W3C Editor's Draft". W3.org. 2012-02-06. Retrieved 2012-02-05.
  3. ^ "The responseText attribute of the XMLHttpRequest object explained by the W3C Working Draft". W3.org. Retrieved 2009-07-14.
  4. ^ a b "Article on the history of XMLHTTP by an original developer". Alexhopmann.com. 2007-01-31. Archived from the original on 2009-01-30. Retrieved 2009-07-14.
  5. ^ "Specification of the IXMLHTTPRequest interface from the Microsoft Developer Network". Msdn.microsoft.com. Retrieved 2009-07-14.
  6. ^ a b c Dutta, Sunava (2006-01-23). "Native XMLHTTPRequest object". IEBlog. Microsoft. Retrieved 2006-11-30.
  7. ^ "Ajax Reference (XMLHttpRequest object)". JavaScript Kit. 2008-07-22. Retrieved 2009-07-14.
  8. ^ "Specification of the nsIXMLHttpRequest interface from the Mozilla Developer Center". Developer.mozilla.org. 2008-05-16. Archived from the original on 2008-10-17. Retrieved 2009-07-14.
  9. ^ "Specification of the nsIJSXMLHttpRequest interface from the Mozilla Developer Center". Developer.mozilla.org. 2009-05-03. Archived from the original on 2008-11-17. Retrieved 2009-07-14.
  10. ^ "Specification of the XMLHttpRequest object from the Mozilla Developer Center". Developer.mozilla.org. 2009-05-03. Retrieved 2009-07-14.
  11. ^ a b "Version history for the Mozilla Application Suite". Mozilla.org. Retrieved 2009-07-14.
  12. ^ a b "Downloadable, archived releases for the Mozilla browser". Archive.mozilla.org. Retrieved 2009-07-14.
  13. ^ "Archived news from Mozillazine stating the release date of Safari 1.2". Weblogs.mozillazine.org. Archived from the original on 2009-06-02. Retrieved 2009-07-14.
  14. ^ "Press release stating the release date of Opera 8.0 from the Opera website". Opera.com. 2005-04-19. Retrieved 2009-07-14.
  15. ^ Soft-Info.org. "Detailed browser information stating the release date of iCab 3.0b352 from". Soft-Info.com. Retrieved 2009-07-14.
  16. ^ "Specification of the XMLHttpRequest object from the Level 1 W3C Working Draft released on April 5th, 2006". W3.org. Retrieved 2009-07-14.
  17. ^ "Specification of the XMLHttpRequest object from the Level 2 W3C Working Draft released on February 25th, 2008". W3.org. Retrieved 2009-07-14.
  18. ^ "XMLHttpRequest Editor's Draft 5 December 2011". w3.org. Retrieved 5 December 2011.
  19. ^ "XMLHttpRequest Standard". xhr.spec.whatwg.org.
  20. ^ "Dependencies of the XMLHttpRequest object explained by the W3C Working Draft". W3.org. Retrieved 2009-07-14.
  21. ^ "The "open" method of the XMLHttpRequest object explained by the W3C Working Draft". W3.org. Retrieved 2009-10-13.
  22. ^ 테스트 주도의 JavaScript Development, Christian Johansen, ADDON-WESley, 2010, 페이지 270
  23. ^ "XMLHttpRequest Level 2". Retrieved 2013-11-14.
  24. ^ "Can I use Cross-Origin Resource Sharing?". Retrieved 2013-11-14.
  25. ^ "XDomainRequest - Restrictions, Limitations and Workarounds". Retrieved 2013-11-14.
  26. ^ "7.1.5 Cross-Origin Request with Preflight". Retrieved 2014-04-25.
  27. ^ "Fetch Standard".

외부 링크

Wikibooks는 XMLHttpRequest에 관한 책을 가지고 있습니다.