Convert XMLHttpRequest example to a snippet and add doc page

The XmlHttpRequest is poorly documented, and should have its own
documentation page, instead of being part of the qml global object page.

The XmlHttpRequest example might as well be converted to a snippet, that
can be present on the new doc page.

Fixes: QTBUG-110003
Pick-to: 6.5 6.5.0
Change-Id: I0ffee43046d4fb71e64f04008b444e11dc8b21ff
Reviewed-by: Volker Hilsheimer <volker.hilsheimer@qt.io>

2 files changed, 108 insertions, 0 deletions

diff --git a/src/qml/doc/snippets/qml/XHRForm.qml b/src/qml/doc/snippets/qml/XHRForm.qml
new file mode 100644
index 0000000000..90c918ddbb
--- /dev/null
+++ b/src/qml/doc/snippets/qml/XHRForm.qml
@@ -0,0 +1,83 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+//![0]
+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 {}
+           }
+      }
+}
+
+//![0]
+
diff --git a/src/qml/doc/snippets/qml/xmlhttprequest.js b/src/qml/doc/snippets/qml/xmlhttprequest.js
new file mode 100644
index 0000000000..f395a15d8d
--- /dev/null
+++ b/src/qml/doc/snippets/qml/xmlhttprequest.js
@@ -0,0 +1,25 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+//![0]
+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();
+}
+//![0]