Back to Qt.io
Contact Us Blog Download Qt

XMLHttpRequest QML Type

サーバーにリクエストを送信するためのオブジェクト。詳細...

Import Statement: import QtQml

プロパティ

方法

詳しい説明

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

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

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

リクエストの送信

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

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

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

次の例は、リクエストを送信し、レスポンスを読み取る方法を示しています：

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の更新を処理するために、onreadystatechange の最後でsendRequest の第2引数が呼び出されることに注意してください。

リクエストをデバッグしたい場合は、環境変数QML_XHR_DUMP を1 に設定する。これは以下の情報をログに記録する：

  • 送信されたリクエストのメソッドタイプ(GETまたはPOST)、URL、ボディ。
  • 受信した応答のURLと本文。
  • もしあれば、ネットワークエラー。

ローカルファイルへのアクセス

デフォルトでは、XMLHttpRequest オブジェクトを使用してローカルファイルシステムからファイルを読み取ることはできません。この機能を使ってローカルファイルにアクセスしたい場合は、以下の環境変数を1 に設定してください。

  • qml_xhr_allow_file_read
  • qml_xhr_allow_file_write

警告 この機能を使うのは、アプリケーションが信頼できるQMLとJavaScriptのコードを実行していることが分かっている場合だけにしてください。

responseXML ドキュメント

現在 QML がサポートしているresponseXML XML DOM ツリーは、Web ブラウザでサポートされているDOM Level 3 CoreAPI のサブセットを縮小したものです。QML の実装では以下のオブジェクトとプロパティがサポートされています：

ノードドキュメント要素Attr文字データテキスト
  • ノード名
  • ノード値
  • ノードタイプ
  • 親ノード
  • 子ノード
  • 最初の子
  • 最後の子
  • 前の兄弟
  • 次の兄弟
  • 属性
  • xmlバージョン
  • xmlEncoding
  • xmlスタンダロン
  • ドキュメント要素
  • タグ名
  • 名前
  • 値
  • オーナー要素
  • データ
  • 長さ
  • isElementContentWhitespace
  • テキスト全体

プロパティの説明

onreadystatechange : function

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

readyStateも参照してください 。


readyState : enumeration [read-only]

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

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

定数説明
XMLHttpRequest.UNSENTリクエストは初期化されていない。これはopen() を呼び出す前の状態である。
XMLHttpRequest.OPENEDリクエストは初期化されています。つまり、open() が以前に呼び出されましたが、それ以上の進行はありません。
XMLHttpRequest.HEADERS_RECEIVEDサーバからの応答を受信したが、リクエストはまだ完全に処理されていない。
XMLHttpRequest.LOADINGサーバーからデータをダウンロードしています。
XMLHttpRequest.DONEリクエストの処理が終了しました。

onreadystatechangeも参照 。


response : var [read-only]

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

responseType 、responseText 、およびresponseXMLも参照のこと 。


responseText : string [read-only]

最後の応答から受け取ったデータを含むString を返す。

responseXMLも参照のこと 。


responseType : string

最後に受け取った応答のコンテンツタイプを記述したString を返す。

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

responseも参照のこと 。


responseURL : string [read-only, since 6.6]

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

このプロパティは Qt 6.6 で導入されました。


responseXML : var [read-only]

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

responseTextも参照してください 。


status : int [read-only]

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

statusTextも参照して ください。


statusText : string [read-only]

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

status も参照 。


メソッドの説明

void abort()

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

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


string 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

getResponseHeader()も参照のこと 。


string getResponseHeader(headerName)

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

getAllResponseHeaders()も参照して ください。


void open(method, url, async)

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

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


[since 6.6] void overrideMimeType(mime)

XMLHttpRequest に、次の HTTP レスポンスで受け取ったデータを、サーバから提供された MIME タイプではなく、mime の MIME タイプであるかのように解釈させます。

このメソッドはQt 6.6で導入されました。


void send(data)

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

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


void setRequestHeader(header, value)

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


© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.