XMLHttpRequest JavaScript オブジェクト

XMLHttpRequest オブジェクトにより、スクリプトはフォームデータの送信やサーバーからのデータの非同期読み込みなどの HTTP クライアント機能を実行することができます。

XMLHttpRequest API はW3C XHR Level 1 標準の部分的な実装ですが、以下の例外があります：

• 同じオリジン・ポリシーは適用されません。

リクエストの送信

XMLHttpRequest API を使用してリクエストを送信するには、以下の手順を実行します：

1. XMLHttpRequest オブジェクトを作成します。
2. コールバック関数をonreadystatechangeシグナル・ハンドラに割り当てます。
3. 適切な HTTP メソッドと要求する URL を指定してopen() を呼び出します。
4. send() を呼び出します。

コールバック関数は、リクエストに対するHTTPレスポンスを処理します。以下のメソッドのいずれかを使用してレスポンスを読み取る前に、ハンドラでreadyStateが DONE ：

• レスポンス
• レスポンステキスト
• 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 {}
           }
      }
}

先ほどのスニペットでは、ボタンのクリックシグナルを外部のsendRequest 関数に接続しています。最初の引数としてリソースURLが渡され、2番目の引数としてUIの更新を処理するコールバック関数が渡されます。sendRequest 関数は、外部のrequest.js ファイルに存在し、このように実装することができる：

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

先ほどのスニペットは、冒頭で述べた4つの簡単なステップに従っている。まずXMLHttpRequest オブジェクトをインスタンス化し、レスポンスを処理するコールバック関数を割り当てる。また、リクエストをサーバーに送信する前に、HTTPメソッドとURLを指定してopen()を呼び出しています。HTTPレスポンスに基づいてUIの更新を処理するために、sendRequest の第2引数が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 ツリーは、Web ブラウザでサポートされているDOM Level 3 CoreAPI のサブセットを縮小したものです。QML の実装では以下のオブジェクトとプロパティがサポートされています：

void XMLHttpRequest::abort()

現在のリクエストをキャンセルします。

readyStateプロパティをXMLHttpRequest.UNSENT に変更し、readystatechange シグナルを発行します。

文字列 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

文字列 XMLHttpRequest::getResponseHeader(headerName)

最後のレスポンスからのheaderName 値、またはheaderName がない場合は空のString を返します。

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

リクエストに使用したいHTTPmethod と、リクエストしたいurl を指定する。この関数は、必ずsend() の前にコールするようにしましょう。オプションの第3パラメータasync を使って、リクエストを非同期にするかどうかを決めることができる。デフォルト値はtrue である。

readystatechange シグナルを発行し、readyStateプロパティをXMLHttpRequest.OPENED に設定したonreadystatechangeハンドラを呼び出します。

void XMLHttpRequest::send(data)

リクエストをサーバーに送信します。オプションの引数data を使用して、リクエストの本文に追加データを追加することができます。これは、通常リクエストに余分なデータを含めたい POST リクエストに便利です。

readyStateプロパティは、サーバから応答を受信すると、その応答が処理されている間に更新されます。レスポンスが完全に処理されると、最初にHEADERS_RECEIVED に設定され、次にLOADING に設定され、最後にDONE に設定されます。readystatechange シグナルは、readyStateが更新されるたびに発行される。

void XMLHttpRequest::setRequestHeader(header, value)

次に送信するリクエストに新しいヘッダを追加します。これはキーと値のペアで、header という名前と、対応するvalue を持ちます。

void XMLHttpRequest::overrideMimeType(mime)

XMLHttpRequest に、次の HTTP 応答で受信したデータを、サーバから提供された MIME タイプではなく、mime の MIME タイプであるかのように解釈させます。

関数 XMLHttpRequest::onreadystatechange

XMLHttpRequest オブジェクトのreadyStateが変更されたときに呼び出されるコールバック関数を選択します。

列挙型 XMLHttpRequest::readyState

XMLHttpRequest オブジェクトの現在の状態を表します。

値は以下のいずれかです：

文字列 XMLHttpRequest::responseURL

リダイレクトが発生した場合に、レスポンスデータの取得に使用した URL を返します。

文字列 XMLHttpRequest::responseText

最後のレスポンスから受け取ったデータを含むString を返します。

var XMLHttpRequest::responseXML

レスポンスの内容が XML あるいは HTML として解析できない場合はDocument あるいはnull を返します。詳細はresponseXML ドキュメントのセクションを参照してください。

var XMLHttpRequest::response

最後のリクエストのresponseTypeに応じて、String 、ArrayBuffer 、Document のいずれかを返します。

string XMLHttpRequest::responseType

最後に受け取ったレスポンスのコンテントタイプを表すString を返します。

• レスポンスタイプが "text" または空のString の場合、レスポンスコンテンツは UTF-16 でエンコードされたString である。
• レスポンスタイプが "arraybuffer "の場合、レスポンスコンテンツはバイナリデータを含むArrayBuffer であることを意味する。
• レスポンスタイプが「json」の場合、レスポンスコンテンツはJSONDocument でなければならない。
• レスポンスタイプが "document "の場合、レスポンスコンテンツがXMLDocument であることを意味する。

int XMLHttpRequest::status

最後に受信したレスポンスのステータスコードを返します。

文字列 XMLHttpRequest::statusText

最後に受信したレスポンスのステータスコードに関連づけられたステータスメッセージをString で返します。