El objeto JavaScript XMLHttpRequest

El objeto XMLHttpRequest permite a los scripts realizar funciones de cliente HTTP, como enviar datos de formulario o cargar datos de forma asíncrona desde un servidor.

La API XMLHttpRequest es una implementación parcial del estándar XHR Nivel 1 del W3C con la siguiente excepción:

• No aplica la misma política de origen.

Envío de solicitudes

Siga estos pasos para enviar una solicitud utilizando la API XMLHttpRequest:

1. Cree un objeto XMLHttpRequest.
2. Asigne una función callback al manejador de señal onreadystatechange.
3. Llame a open() con el método HTTP apropiado y la URL a solicitar.
4. Llamar a send()

La función callback maneja la respuesta HTTP para una petición. Es una buena práctica comprobar si el readyState es DONE en el manejador, antes de utilizar uno de los siguientes métodos para leer la respuesta:

• respuesta
• responseText
• responseXML

El siguiente ejemplo muestra cómo enviar una solicitud y leer la respuesta:

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

El fragmento anterior conecta la señal de clic del botón a una función externa sendRequest. Como primer argumento se pasa una URL de recurso y como segundo una función de devolución de llamada para gestionar las actualizaciones de la interfaz de usuario. La función sendRequest, que existe en un archivo externo request.js, puede implementarse así:

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

El fragmento anterior sigue los cuatro sencillos pasos mencionados al principio. Primero instantiza el objeto XMLHttpRequest, y asigna una función callback para manejar la respuesta. También llama a open() con un método HTTP y una URL, antes de enviar la petición al servidor. Observa que el segundo argumento de sendRequest se llama al final de onreadystatechange, para gestionar las actualizaciones de la interfaz de usuario basadas en la respuesta HTTP.

Establezca la variable de entorno QML_XHR_DUMP en 1 si desea depurar una petición. Esto registrará la siguiente información:

• Tipo de método (GET o POST), URL y cuerpo de las peticiones enviadas.
• URL y cuerpo de las respuestas recibidas.
• Error de red, si lo hubiera.

Acceso a archivos locales

Por defecto, no puede utilizar el objeto XMLHttpRequest para leer archivos de su sistema de archivos local. Si desea utilizar esta función para acceder a archivos locales, puede establecer las siguientes variables de entorno en 1.

• QML_XHR_PERMITIR_LEER_ARCHIVOS
• QML_XHR_ALLOW_FILE_WRITE

documento responseXML

El árbol DOM XML de responseXML que admite actualmente QML es un subconjunto reducido de la API DOM Level 3 Core que admite un navegador web. La implementación de QML admite los siguientes objetos y propiedades:

void XMLHttpRequest::abortar()

Cancela la petición actual.

Cambia la propiedad readyState a XMLHttpRequest.UNSENT y emite la señal readystatechange.

string XMLHttpRequest::getAllResponseHeaders()

Devuelve un String de las cabeceras recibidas de la última respuesta.

A continuación se muestra un ejemplo de cabecera de respuesta:

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)

Devuelve el valor headerName de la última respuesta, o un String vacío, si falta headerName.

void XMLHttpRequest::open(método, url, asíncrono)

Especifique el HTTP method que desea que utilice la petición, así como el url que desea solicitar. Debe asegurarse de llamar siempre a esta función antes de send(). Se puede utilizar un tercer parámetro opcional async para decidir si la petición debe ser asíncrona o no. El valor por defecto es true.

Emite la señal readystatechange, que llama al manejador onreadystatechange con la propiedad readyState establecida a XMLHttpRequest.OPENED.

void XMLHttpRequest::send(datos)

Envía la petición al servidor. Puede utilizar el argumento opcional data para añadir datos adicionales al cuerpo de la petición. Esto puede ser útil para peticiones POST, en las que normalmente se desea que la petición contenga datos extra.

La propiedad readyState se actualiza una vez que se ha recibido una respuesta del servidor, y mientras la respuesta está siendo procesada. Primero se establecerá a HEADERS_RECEIVED, luego a LOADING, y finalmente a DONE, una vez que la respuesta haya sido completamente procesada. La señal readystatechange se emite cada vez que se actualiza readyState.

void XMLHttpRequest::setRequestHeader(cabecera, valor)

Añade una nueva cabecera a la siguiente petición que desee enviar. Se trata de un par clave-valor, que tiene el nombre header y el correspondiente value.

void XMLHttpRequest::overrideMimeType(mime)

Obliga a XMLHttpRequest a interpretar los datos recibidos en la siguiente respuesta HTTP, como si tuvieran el tipo MIME mime, en lugar del proporcionado por el servidor.

function XMLHttpRequest::onreadystatechange

Elija la función de callback que desea que se invoque cada vez que cambie el readyState del objeto XMLHttpRequest.

enumeración XMLHttpRequest::readyState

Indica el estado actual del objeto XMLHttpRequest.

El valor puede ser uno de los siguientes

string XMLHttpRequest::responseURL

Devuelve la url que se utilizó para recuperar los datos de respuesta, después de que se haya producido cualquier redirección.

cadena XMLHttpRequest::responseText

Devuelve un String que contiene los datos recibidos de la última respuesta.

var XMLHttpRequest::responseXML

Devuelve un Document, o null, si el contenido de la respuesta no puede analizarse como XML o HTML. Consulte la sección del documento responseXML para obtener más información.

var XMLHttpRequest::response

Devuelve un String, un ArrayBuffer, o un Document, dependiendo del responseType de la última petición.

string XMLHttpRequest::responseType

Devuelve un String que describe el tipo de contenido de la última respuesta recibida.

• Si el tipo de respuesta es "text" o un String vacío, el contenido de la respuesta es un String codificado en UTF-16 .
• Si el tipo de respuesta es "arraybuffer", significa que el contenido de la respuesta es un ArrayBuffer que contiene datos binarios.
• Si el tipo de respuesta es "json", el contenido de la respuesta debe ser un JSON Document.
• Si el tipo de respuesta es "document", significa que el contenido de la respuesta es un XML Document, que puede leerse de forma segura con la propiedad responseXML.

int XMLHttpRequest::status

Devuelve el código de estado de la última respuesta recibida.

string XMLHttpRequest::statusText

Devuelve un String con el mensaje de estado asociado al código de estado de la última respuesta recibida.