JavaScript의 XMLHttpRequest 객체

XMLHttpRequest 객체를 사용하면 스크립트에서 양식 데이터 전송이나 서버로부터의 비동기 데이터 로딩과 같은 HTTP 클라이언트 기능을 수행할 수 있습니다.

XMLHttpRequest API는 W3C XHR Level 1 표준 을 부분적으로 구현한 것이지만, 다음 예외가 있습니다:

• 동일 출처 정책을 적용하지 않습니다.

요청 보내기

XMLHttpRequest API를 사용하여 요청을 보내려면 다음 단계를 따르십시오:

1. XMLHttpRequest 객체를 생성합니다.
2. onreadystatechange 신호 핸들러에 콜백 함수를 할당합니다.
3. 요청할 적절한 HTTP 메서드와 URL을 지정하여 open()을 호출합니다.
4. send()를 호출합니다.

콜백 함수는 요청에 대한 HTTP 응답을 처리합니다. 다음 메서드 중 하나를 사용하여 응답을 읽기 전에, 핸들러 내에서 readyState가 DONE 상태인지 확인하는 것이 좋습니다:

• response
• responseText
• responseXML

다음 예제는 요청을 보내고 응답을 읽는 방법을 보여줍니다:

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import "request.js" as XHR

ApplicationWindow {
      width: 640
      height: 640
      visible: true

      ColumnLayout {
           anchors.fill: parent

           RowLayout {
               Layout.fillWidth: true

               TextField {
                   id: urlTextField
                   text: "https://www.example.com/index.html"
                   Layout.fillWidth: true
               }
               Button {
                   text: qsTr("Send!")
                   onClicked: XHR.sendRequest(urlTextField.text, function(response) {
                       statusTextField.text = response.status;
                       let isPlainText = response.contentType.length === 0

                       contentTypeTextField.text = isPlainText ? "text" : response.contentType;

                       if (isPlainText)
                           contentTextArea.text = response.content;
                   });
               }
           }

           GridLayout {
               columns: 2

               Layout.fillWidth: true

               Label {
                   text: qsTr("Status code")

                   Layout.fillWidth: true
               }
               Label {
                   text: qsTr("Response type")

                   Layout.fillWidth: true
               }
               TextField {
                    id: statusTextField

                    Layout.fillWidth: true
               }
               TextField {
                    id: contentTypeTextField

                    Layout.fillWidth: true
               }
           }
           Flickable {
               clip: true
               contentWidth: contentTextArea.width
               contentHeight: contentTextArea.height
               Text {
                    id: contentTextArea
               }

               Layout.fillWidth: true
               Layout.fillHeight: true
               ScrollBar.vertical: ScrollBar {}
               ScrollBar.horizontal: ScrollBar {}
           }
      }
}

앞서 소개한 코드 조각은 버튼의 clicked 신호를 외부 sendRequest 함수에 연결합니다. 첫 번째 인자로 리소스 URL이 전달되고, 두 번째 인자로 UI 업데이트를 처리할 콜백 함수가 전달됩니다. 외부 request.js 파일에 존재하는 sendRequest 함수는 다음과 같이 구현할 수 있습니다:

function sendRequest(url, callback)
{
    let request = new XMLHttpRequest();

    request.onreadystatechange = function() {
        if (request.readyState === XMLHttpRequest.DONE) {
            let response = {
                status : request.status,
                headers : request.getAllResponseHeaders(),
                contentType : request.responseType,
                content : request.response
            };

            callback(response);
        }
    }

    request.open("GET", url);
    request.send();
}

앞서 소개한 코드 조각은 서두에서 언급한 네 가지 간단한 단계를 따릅니다. 먼저 XMLHttpRequest 객체를 인스턴스화하고, 응답을 처리할 콜백 함수를 할당합니다. 또한 서버로 요청을 전송하기 전에 HTTP 메서드와 URL을 지정하여 open()을 호출합니다. sendRequest 의 두 번째 인자는 HTTP 응답에 기반한 UI 업데이트를 처리하기 위해 onreadystatechange가 끝날 때 호출된다는 점에 유의하십시오.

요청을 디버그하려면 QML_XHR_DUMP 환경 변수를 1 로 설정하십시오. 이렇게 하면 다음 정보가 로그에 기록됩니다:

• 메서드 유형(GET 또는 POST), URL, 그리고 전송된 요청의 본문.
• 수신된 응답의 URL 및 본문.
• 발생한 경우 네트워크 오류.

로컬 파일 액세스

기본적으로 XMLHttpRequest 객체를 사용하여 로컬 파일 시스템의 파일을 읽을 수 없습니다. 이 기능을 사용하여 로컬 파일에 액세스하려면 다음 환경 변수를 1 로 설정하십시오.

• QML_XHR_ALLOW_FILE_READ
• QML_XHR_ALLOW_FILE_WRITE

responseXML 문서

QML에서 현재 지원하는 responseXML XML DOM 트리는 웹 브라우저에서 지원하는 DOM Level 3 Core API의 축소된 하위 집합입니다. QML 구현체에서는 다음 객체와 속성을 지원합니다:

void XMLHttpRequest::abort()

현재 요청을 취소합니다.

이 함수는 readyState 속성을 ' XMLHttpRequest.UNSENT '로 변경하고 readystatechange 신호를 발생시킵니다.

string XMLHttpRequest::getAllResponseHeaders()

마지막 응답에서 수신된 헤더의 String 를 반환합니다.

다음은 응답 헤더의 예시입니다:

content-encoding: gzip
content-type: text/html; charset=UTF-8
date: Mon, 06 Feb 2023 09:00:08 GMT
expires: Mon, 13 Feb 2023 09:00:08 GMT
last-modified: Thu, 17 Oct 2019 07:18:26 GMT

string XMLHttpRequest::getResponseHeader(headerName)

마지막 응답에서 가져온 headerName 값을 반환하거나, 해당 headerName 가 없는 경우 빈 String 를 반환합니다.

void XMLHttpRequest::open(method, url, async)

요청에 사용할 HTTP method 와 요청할 url 을 지정합니다. send()를 호출하기 전에 반드시 이 함수를 호출해야 합니다. 선택적 세 번째 매개변수 async 를 사용하여 요청을 비동기 방식으로 처리할지 여부를 결정할 수 있습니다. 기본값은 true 입니다.

readystatechange 신호를 발생시킵니다. 이 신호는 readyState 속성이 XMLHttpRequest.OPENED 로 설정된 상태에서 onreadystatechange 핸들러를 호출합니다.

void XMLHttpRequest::send(data)

서버로 요청을 전송합니다. 선택적 인자 data 를 사용하여 요청 본문에 추가 데이터를 포함시킬 수 있습니다. 이는 일반적으로 요청에 추가 데이터를 포함시켜야 하는 POST 요청에 유용합니다.

readyState 속성은 서버로부터 응답을 수신했을 때와 응답이 처리되는 동안 업데이트됩니다. 이 속성은 처음에 HEADERS_RECEIVED 로 설정된 후, LOADING 로 변경되며, 응답 처리가 완전히 완료되면 DONE 로 최종 설정됩니다. readyState가 업데이트될 때마다 readystatechange 신호가 발생합니다.

void XMLHttpRequest::setRequestHeader(header, value)

다음에 전송할 요청에 새로운 헤더를 추가합니다. 이는 키-값 쌍으로, 이름이 header 이고 해당 값이 value 입니다.

void XMLHttpRequest::overrideMimeType(mime)

XMLHttpRequest 가 다음 HTTP 응답에서 수신된 데이터를 서버에서 제공한 MIME 유형이 아닌 mime 의 MIME 유형인 것처럼 해석하도록 강제합니다.

function XMLHttpRequest::onreadystatechange

XMLHttpRequest 객체의 readyState가 변경될 때마다 호출될 콜백 함수를 선택합니다.

열거형 XMLHttpRequest::readyState

XMLHttpRequest 객체의 현재 상태를 나타냅니다.

값은 다음 중 하나일 수 있습니다:

string XMLHttpRequest::responseURL

리디렉션이 발생한 후, 응답 데이터를 가져오는 데 사용된 URL을 반환합니다.

string XMLHttpRequest::responseText

마지막 응답에서 수신한 데이터가 포함된 XMLHttpRequest 객체( String )를 반환합니다.

var XMLHttpRequest::responseXML

Document 을 반환하거나, 응답 내용을 XML 또는 HTML로 파싱할 수 없는 경우 null 을 반환합니다. 자세한 내용은 responseXML 문서 섹션을 참조하십시오.

var XMLHttpRequest::response

마지막 요청의 responseType에 따라 String, ArrayBuffer 또는 Document 중 하나를 반환합니다.

string XMLHttpRequest::responseType

마지막으로 수신된 응답의 콘텐츠 유형을 설명하는 ` String `를 반환합니다.

• 응답 유형이 "text"이거나 빈 String 인 경우, 응답 콘텐츠는 UTF-16으로 인코딩된 String 입니다.
• 응답 유형이 "arraybuffer"인 경우, 응답 콘텐츠는 바이너리 데이터를 포함하는 ArrayBuffer 입니다.
• 응답 유형이 "json"인 경우, 응답 내용은 JSON Document 이어야 합니다.
• 응답 유형이 "document"인 경우, 응답 내용은 XML Document 이며, responseXML 속성을 사용하여 안전하게 읽을 수 있습니다.

int XMLHttpRequest::status

마지막으로 수신한 응답의 상태 코드를 반환합니다.

string XMLHttpRequest::statusText

마지막으로 수신된 응답의 상태 코드와 관련된 상태 메시지가 포함된 String 를 반환합니다.