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

前述のコードスニペットでは、ボタンのクリックイベントを外部のsendRequest 関数に接続しています。最初の引数としてリソースのURLが渡され、2番目の引数として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();
}

前述のコードスニペットは、冒頭で述べた4つの簡単な手順に従っています。まずXMLHttpRequest オブジェクトをインスタンス化し、レスポンスを処理するためのコールバック関数を割り当てます。また、サーバーにリクエストを送信する前に、HTTPメソッドとURLを指定してopen()を呼び出します。sendRequest の2番目の引数は、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 ツリーは、Web ブラウザでサポートされているDOM Level 3 CoreAPI の縮小されたサブセットです。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)

リクエストで使用するHTTPmethod と、リクエスト対象のurl を指定します。この関数は必ずsend()の前に呼び出すようにしてください。オプションの3番目のパラメータ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 を持つものとして解釈するよう強制します。

function XMLHttpRequest::onreadystatechange

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

列挙型 XMLHttpRequest::readyState

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

値は以下のいずれかになります：

string XMLHttpRequest::responseURL

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

string XMLHttpRequest::responseURLリダイレクトがすべて発生した後の、応答データを取得するために使用された URL を返します。

最後のレスポンスから受信したデータを含む `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」の場合、レスポンスの内容は JSONDocument である必要があります。
• レスポンスのタイプが「document」の場合、レスポンスの内容は XMLDocument であり、responseXMLプロパティを使用して安全に読み取ることができます。

int XMLHttpRequest::status

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

string XMLHttpRequest::statusText

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