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)

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

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


void send(data)

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

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


void setRequestHeader(header, value)

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


©2024 The Qt Company Ltd. 本書に含まれる文書の著作権は、それぞれの所有者に帰属します。 本書で提供されるドキュメントは、Free Software Foundation が発行したGNU Free Documentation License version 1.3に基づいてライセンスされています。 Qtおよびそれぞれのロゴは、フィンランドおよびその他の国におけるThe Qt Company Ltd.の 商標です。その他すべての商標は、それぞれの所有者に帰属します。