# XMLHttpRequest

XMLHttpRequest es un objeto Javascript que incorpora la misma funcionalidad que el objeto originalmente desarrollado por Microsoft. Nos da una forma sencilla de obtener datos de una url. Aunque el nombre pueda despistar, XMLHttpRequest puede ser usado para obtener cualquier tipo de dato, no sólo XML.

Requiere importarla previamente a su uso:

`importClass ( "XMLHttpRequest" );`

{% hint style="warning" %}
Si la clase la vamos a usar en un script de [QML](https://doc.velneo.com/velneo-vdevelop/scripts/lenguajes/qml) el nombre del objeto ha de ser **VXMLHttpRequest**.
{% endhint %}

{% hint style="info" %}
Si no hacemos **import**, haremos uso de la implementación del propio motor de JavaScript, que tiene su propio XMLHttpRequest, que funciona según [esta documentación](https://doc.qt.io/qt-6/qml-qtqml-xmlhttprequest.html).
{% endhint %}

Para el **acceso mediante proxy**, esta clase accederá a Internet con la configuración Proxy del sistema.

También podremos establecer una configuración diferente en caso de que lo necesitemos. En este caso, debemos configurar en el registro correspondiente a la rama del cliente una rama proxy, con los siguientes valores de cadena:

enabled: true para habilitar, false para deshabilitar la configuraicón.

hostName: Dominio o ip del proxy.

port: Puerto del proxy.

userName: Usuario del proxy.

password: Contraseña del proxy.

type: 0 = socket5, 1 = http

En Windows, por ejemplo en:

HKEY\_CURRENT\_USER\Software\Velneo\vClient\proxy

En Linux en:

/home/usuario/.config/Velneo/vClient.conf

En Mac en:

\~/Library/Preferences/com.velneo.vclient.plist

## Indice de [propiedades](#documentación-de-propiedades)

Number [errorCode](#errorcode)

Number [readyState](#readystate)

Variant [response](#response)

String [responseText](#responsetext)

String [responseType](#responsetype)

Number [status](#status)

String [statusText](#statustext)

Number [timeout](#timeout)

## Indice de funciones

### **Constructor**

XMLHttpRequest [XMLHttpRequest](#xmlhttprequest)()

### **Generales**

void [abort](#void-abort)()

String [getAllResponseHeaders](#getallresponseheaders)()

String [getResponseHeader](#getresponseheader)( String name )

void [open](#open)( String method, String url, bool async = true, String username = "", String password = "" )

void [send](#send)( String data )

void [send](#send-1)( VByteArray data )

void [send](#void-send)()

void [setActiveReadyRead](#void-setactivereadyread-bool-active)( bool active )

void [setRequestHeader](#setrequestheader)( String name, String value )

bool [setClientCertificate](#setclientcertificate)( String certificado, String key, \[String password] )

bool [setClientCertificate](#bool-setclientcertificate-vsslcertificate-sslcvsslcertificate-sslcertificate)( VSSLCertificate sslCertificate )

void [setPeerVerifyMode](#void-setpeerverifymode-mode)( mode )

### **Auxiliares**

void [processEvents](#processevents)()

void [waitForRequestComplete](#waitforrequestcomplete)()

## Señales

onreadystatechange

ontimeout

## Enumeraciones

#### Modos de validación de certificado

**VerifyNone**: no solicitará un certificado al *peer*. Puede establecer este modo si no estás interesado en la identidad del otro lado de la conexión. La conexión seguirá estando encriptada, y tu socket seguirá enviando su certificado local al *peer* si es solicitado.

**QueryPeer**: solicitará un certificado al *peer*, pero no requiere que este certificado sea válido. Esto es útil cuando se quieren mostrar los detalles del certificado del par al usuario sin afectar al *handshake* SSL real. Este modo es el predeterminado para los servidores. Nota: En *Schannel* este valor actúa igual que VerifyNone.

**VerifyPeer**: solicitará un certificado al *peer* durante la fase de *handshake* SSL, y requiere que este certificado sea válido. Si falla, emitirá la señal de error de SSL. Este modo es el predeterminado para los clientes.

**AutoVerifyPeer**: es el modo por defecto. Utilizará automáticamente *QueryPeer* para los sockets del servidor y *VerifyPeer* para los sockets del cliente.

## Documentación de propiedades

#### errorCode

Retorna un entero indicando el error que se ha producido.

[Ver códigos de error](https://doc.velneo.com/velneo-vdevelop/proyectos-objetos-y-editores/de-aplicacion-y-datos/consumo-servicio-web/codigos-de-error-de-consumo-servicio-web).

#### readyState

Retorna un entero indicando el estado de la petición.

0 = UNSENT Todavía no se ha llamado a open().

1 = OPENED send() ha sido llamada.

2 = HEADERS\_RECEIVED send() ha sido llamada, y tanto las cabeceras como el estado están disponibles.

3 = LOADING Descargando. La propiedad responseText contiene datos parciales

4 = DONE La operación se ha completado.

#### response

Retorna un arraybuffer, un objeto Javascript o una cadena, dependiendo del valor de responseType.

El tipo arraybuffer se trata como un [VByteArray](https://doc.velneo.com/velneo-vdevelop/scripts/lenguajes/javascript/clases/vbytearray).

Contiene el cuerpo completo de la respuesta. Es nulo si la petición no pudo completarse o es incompleta.

#### responseText

Retorna una cadena conteniendo la cadena de respuesta retornada por el servidor HTTP.

A diferencia de la propiedad status, esta incluye el texto completo del mensaje de respuesta (por ejemplo "200 OK")

#### responseType

Puede retornar uno de los siguientes valores:

"" String (Valor por defecto)

"arraybuffer" [VByteArray](https://doc.velneo.com/velneo-vdevelop/scripts/lenguajes/javascript/clases/vbytearray)

"json" Objeto javascript, parseado desde una cadena JSON retornada por el servidor.

#### status

Retorna el estado de la respuesta de la petición.

Esto es el código del resultado HTTP (por ejemplo, retorna 200 para una petición correcta).

Ver [códigos de estados HTTP](https://doc.velneo.com/velneo-vdevelop/proyectos-objetos-y-editores/de-aplicacion-y-datos/consumo-servicio-web/codigos-de-estados-http).

#### statusText

Devuelve la cadena de respuesta. A diferencia de status, incluye el texto completo del mensaje de respuesta.

Ver [códigos de estados HTTP](https://doc.velneo.com/velneo-vdevelop/proyectos-objetos-y-editores/de-aplicacion-y-datos/consumo-servicio-web/codigos-de-estados-http).

#### timeout

Representa el número de milisegundos que una petición puede tomar antes de ser automáticamente terminada.

Si no se especifica ningún valor, se define como valor por defecto 30 minutos.

## Documentación de funciones

### Constructor <a href="#cons" id="cons"></a>

#### XMLHttpRequest XMLHttpRequest() <a href="#xmlhttprequest" id="xmlhttprequest"></a>

Requiere importar previamente la clase:

`importClass ( "XMLHttpRequest" );`

### Funciones generales

#### void abort()

Aborta la petición si ya ha sido enviada.

#### String getAllResponseHeaders() <a href="#getallresponseheaders" id="getallresponseheaders"></a>

Retorna todas las cabeceras de respuesta como una cadena, o vacío si no se han recibido.

#### String getResponseHeader( String name ) <a href="#getresponseheader" id="getresponseheader"></a>

Retorna una cadena conteniendo el texto de la cabecera indicada en name, o vacío tanto si la respuesta no ha sido recibida o si la cabecera indicada no existe en la respuesta.

Parámetros:

* name: Nombre de la cabecera.

#### void open( String method, String url, bool async = true, String username = "", String password = "" ) <a href="#open" id="open"></a>

Inicia una petición

Parámetros:

* method: El método HTTP a usar, tal como GET, POST, etc.
* url: La url a la que se envía la petición.
* async: Un valor booleano opcional, por defecto true, que indica si realizar o no la operación de forma asíncrona. Si este valor es falso, la función send() no retorna hasta que la respuesta es recibida. Si el valor es true, la notificación de que la transacción se ha completado se sabe usando la propiedad readyState (en este caso hay que mantener el proceso javascript abierto "entreteniendolo". Mirar ejemplo).
* user: Valor opcional pasa usar en la autenticación. Por defecto es una cadena vacía. Usa el método de autenticación basado en URL.
* password: Valor opcional pasa usar en la autenticación. Por defecto es una cadena vacía. Usa el método de autenticación basado en URL.

#### void send( String data ) <a href="#send" id="send"></a>

Envía la petición. Si la petición es síncrona, no retorna hasta que llega la respuesta.

Parámetros:

* data: cadena con los datos que son enviados con la petición. Es convertida a UTF8 antes del envio.

{% hint style="warning" %}
Si la petición es asíncrona, esta función retorna inmediatamente y hay que "entretener" al proceso javascript que la ha llamado hasta que llegue la respuesta (ver ejemplo).
{% endhint %}

#### void send( VByteArray data ) <a href="#send" id="send"></a>

Envía la petición. Si la petición es síncrona, no retorna hasta que llega la respuesta.

Parámetros:

* VByteArray data: [VByteArray](https://doc.velneo.com/velneo-vdevelop/scripts/lenguajes/javascript/clases/vbytearray) con los datos que son enviados con la petición.&#x20;

{% hint style="warning" %}
Si la petición es asíncrona, esta función retorna inmediatamente y hay que "entretener" al proceso javascript que la ha llamado hasta que llegue la respuesta (ver ejemplo).
{% endhint %}

#### void send()

Envía la petición.

Si la petición es síncrona, no retorna hasta que llega la respuesta. Si la petición es asíncrona, esta función retorna inmediatamente y hay que "entretener" al proceso javascript que la ha llamado hasta que llegue la respuesta (ver ejemplo).

#### void setActiveReadyRead( bool active )

Permite activar si queremos que la respuesta se vaya leyendo según disponibilidad (streaming) o solo cuando la respuesta esté completa.

Parámetros:

* active: un valor booleano que indica si queremos que la respuesta se vaya leyendo según disponibilidad (*true*) o solamente cuando esté completa (*false*).&#x20;

#### void setRequestHeader( String name, String value ) <a href="#setrequestheader" id="setrequestheader"></a>

Establece el valor de la cabecera en una petición HTTP. Se debe llamar a setRequestHeader() después de open() pero antes de send().

Parámetros:

* name: Cadena con el nombre de la cabecera.
* value: Valor de la cabecera.

{% hint style="warning" %}
Si esta función es llamada varias veces con la misma cabecera, los valores son mezclados en una sola cabecera.
{% endhint %}

#### bool setClientCertificate( String certificado, String key, \[String password] ) <a href="#setclientcertificate" id="setclientcertificate"></a>

Establece el certificado del cliente previamente a la llamada.\
Parámetros:

* certificado: cadena en formato PEM que contiene el certificado.
* key: cadena que contiene la llave privada.
* password (opcional): cadena que contiene la contraseña de la llave.

Esta función es funcional en Windows y en Linux pero no en Mac OS, dado que, al contrario que en Windows y Linux que usan Open SSL, Mac usa un sistema propio llamado Secure Transport SSL, y esta función del API no es funcional con dicho sistema.

#### bool setClientCertificate( VSSLCertificate sslCVSSLCertificate sslCertificate )

Retorna si ha conseguido establecer el certificado correctamente(1) o no (0).

Parámetros:

* VSSLCertificate sslCertificate: objeto de la clase [VSSLCertificate](https://doc.velneo.com/velneo-vdevelop/scripts/lenguajes/javascript/clases/vsslcertificate) con el cetificado SSL.

Esta

#### void setPeerVerifyMode( mode )

Establece el modo de verificación del *socket*. Este modo decide si debe solicitar un certificado al par (es decir, el cliente solicita un certificado al servidor, o el servidor solicita un certificado al cliente), y si debe exigir que este certificado sea válido.

El modo por defecto es *AutoVerifyPeer*, que indica que utilice *VerifyPeer* para los clientes y *QueryPeer* para los servidores.

Establecer este modo después de que la encriptación haya comenzado no tiene ningún efecto en la conexión actual.

Parámetros:

* mode: modo de verificación. Ver [enum de modos](#enumeraciones) de validación de certificado.

Ejemplo:

```
setPeerVerifyMode( XMLHttpRequest.VerifyNone )
```

### Funciones auxiliares

#### void processEvents() <a href="#processevents" id="processevents"></a>

Procesa los eventos que haya en la cola de la aplicación. Debe usarse cuando realicemos una conexión asíncrona para permitir el proceso de los eventos durante el tiempo que dure.

#### void waitForRequestComplete() <a href="#waitforrequestcomplete" id="waitforrequestcomplete"></a>

Espera a que la petición se haya procesado. Hay que usar esta función obligatoriamente cuando se realice la petición desde tercer o cuarto plano (ver ejemplos).

## Aviso de Seguridad: Problema en la gestión de HTTP2 (implementación 35.3)

Se ha identificado una vulnerabilidad relacionada con el manejo de conexiones HTTP2, asignada como CVE-2024-39936. Esta falla permite enviar datos a un servidor con un certificado TLS no coincidente que puede ser explotado mediante técnicas Man-in-the-middle en casos como redirección y otros.

Para evitar el problema con servidores web no conocidos en aplicaciones que utilicen [xmlhttprequest](https://doc.velneo.com/velneo-vdevelop/scripts/lenguajes/javascript/clases/xmlhttprequest) y [consumo de servicios web](https://doc.velneo.com/velneo-vdevelop/proyectos-objetos-y-editores/de-aplicacion-y-datos/consumo-servicio-web), se recomienda desactivar HTTP2.

En Velneo podremos hacerlo mediante la configuración de una clave beta:

`http2NotSupported` = `C5A39F2332858154F02E045F64F7FFF8985F4F41`

Las claves beta son entradas en la rama **beta** de Velneo del registro del sistema operativo. Se recomienda generarlas desde un proceso con el comando de instrucción de proceso [Configuración del sistema: escribir cadena texto ](https://doc.velneo.com/proyectos-objetos-y-editores/de-aplicacion-y-datos/proceso/sistema/configuracion#configuracion-del-sistema-escribir-cadena-texto)para establecerlos, ejecutándolo en 1er plano (si vamos a usar esos objetos en el cliente) o en 3er plano (si los vamos a usar en el servidor). Los parámetros se resolverán como indicamos a continuación:

`Configuración de sistema: Escribir cadena de texto ( "Velneo", "beta", "`http2NotSupported"`, "`C5A39F2332858154F02E045F64F7FFF8985F4F41"`)`

## Ejemplos

### Obtener contenido de url de forma síncrona

```javascript
importClass("XMLHttpRequest");

var url="https://velneo.es";

var xhr = new XMLHttpRequest();
xhr.open("GET", url, false);
xhr.send();

if ( (xhr.errorCode==0) && (xhr.status == 200) ) {
    alert(xhr.response);
}
```

### Obtener contenido de url de forma asíncrona

```javascript
importClass("XMLHttpRequest");

var url="https://velneo.es";

var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.send();

// Al ser una llamada asíncrona, esperamos a que la petición termine. Esto es obligatorio si este código se ejecuta en tercer plano. Tenemos dos opciones para ello:

// Opcion 1: Hacemos uso de processEvents para poder mostrar o guardar información mientras esperamos
while(xhr.readyState != 4) { // 4: Done
    xhr.processEvents();
}


// Opcion 2: Hacemos uso de waitForRequestComplete(). Esa instrucción espera hasta que la conexión termine
xhr.waitForRequestComplete();

if ( (xhr.errorCode==0) && (xhr.status == 200) ) {
    alert(xhr.response);
}
```

### Obtener contenido de url de forma asíncrona a través de proxy

```javascript
importClass("XMLHttpRequest");

// Datos para la conexión
var proxy = "http://127.0.0.1:8080/";
var senda = "helix/"
var host="www.perforce.com";

// Datos de autentificación del proxy
var datosAcceso = new VByteArray();
datosAcceso.setText('usuario:contraseña');
datosAcceso = datosAcceso.toBase64();

// Preparamos y enviamos
var xhr = new XMLHttpRequest();
xhr.open("GET", proxy + senda, true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('Proxy-Authorization', 'Basic ' + datosAcceso.toLatin1String() );
xhr.setRequestHeader('Host', host );
xhr.send();

// Al ser una llamada asíncrona, esperamos a que la petición termine
while(xhr.readyState != 4) { // 4: Done
    xhr.processEvents();
}

// Mostramos el resultado
if ( (xhr.errorCode==0) && (xhr.status == 200) ) {
    alert( xhr.response );
}
```

### Obtener una imagen y convertirla a Base64 para guardarla en una tabla

```javascript
importClass("XMLHttpRequest");


var url="http://velneo.es/wp-content/themes/pagelines-infovelneo/imagenes/logotipo-2.png";

var xhr = new XMLHttpRequest();
xhr.open("GET", url, false);
xhr.responseType = "arraybuffer";
xhr.send();

var respuesta="";
if (xhr.errorCode==0) {
    if (xhr.responseType=="arraybuffer") {
        // Obtenemos el array de respuesta
        var respuestaBA = new VByteArray();
        respuestaBA = xhr.response;
        respuesta = respuestaBA.toBase64().toLatin1String();
    } else
        respuesta = xhr.response;
}
```

### Petición incorrecta: obtener contenido de statusText

```javascript
// Obtener contenido de statusText cuando haces una petición incorrecta

importClass("XMLHttpRequest");

var url="http://httpstat.us/400"
var xhr = new XMLHttpRequest();
xhr.open("GET", url, false);
xhr.send();

if ( (xhr.errorCode==0) && (xhr.status == 200) )
{
    if (xhr.responseType=="arraybuffer")
    {
        // Obtenemos el array de respuesta var respuestaBA = new VByteArray(); respuestaBA = xhr.response;
         respuesta = respuestaBA.toBase64().toLatin1String().substring(0,30);
    }
    else
        respuesta = xhr.response;
    alert("Elemento 1: " + xhr.statusText + " " + respuesta);
}
else
    alert("Status: " + xhr.status + "Status text: " + xhr.statusText + "Error: " + xhr.errorCode);
```

### Petición POST enviando un JSON y obteniendo un JSON

```javascript
importClass("XMLHttpRequest");

var url="http://validate.jsontest.com";
var jsonAValidar = '{"Nombre": "Luis", "Edad": 43}';

var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.responseType = "json"; // Para que la respuesta sea un objeto Javascript Json
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('json='+JSON.stringify(jsonAValidar));


// Al ser una llamada asíncrona, esperamos a que la petición termine
while(xhr.readyState != 4) { // 4: Done
    xhr.processEvents();
}

if ( (xhr.errorCode==0) && (xhr.status == 200) ) {
    alert(JSON.stringify(xhr.response));
}
```

### Petición POST enviando un fichero XML con firma de certificado de cliente

```javascript
importClass("XMLHttpRequest");
importClass( "VFile" );

var fi = new VFile( "/home/usuario/Desarrollo/sii/factura_ejemplo_velneo_2.xml" );
var contenido = "";
if ( fi.open( VFile.OpenModeReadOnly ) )
    contenido = fi.readAll();    

var certificadoFile = new VFile( "/home/usuario/Desarrollo/sii/velneo.pem" );
var contenidoCertificado = "";
if ( certificadoFile.open( VFile.OpenModeReadOnly ) )
    contenidoCertificado = certificadoFile.readAll();    

var keyFile = new VFile( "/home/usuario/Desarrollo/sii/velneo_key.pem" );
var keyCertificado = "";
if ( keyFile.open( VFile.OpenModeReadOnly ) )
    keyCertificado = keyFile.readAll();    

var url = "https://www7.aeat.es/wlpl/SSII-FACT/ws/fe/SiiFactFEV1SOAP";

var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setClientCertificate(contenidoCertificado.toLatin1String(),keyCertificado.toLatin1String());

xhr.setRequestHeader('Content-Type: ', 'text/xml;charset=UTF-8');
xhr.send(contenido);

while(xhr.readyState != 4) 
{
    xhr.processEvents();
}

if ( (xhr.errorCode==0) && (xhr.status == 200) ) 
{
    alert(JSON.stringify(xhr.response));
}
```

### Petición con autenticación usando el método BASIC

```javascript
importClass("XMLHttpRequest");

// Datos para la conexión
var server = "http://127.0.0.1:8080/";
var senda = "helix/"

// Datos de autentificación del proxy
var datosAcceso = new VByteArray();
datosAcceso.setText('usuario:contraseña');
datosAcceso = datosAcceso.toBase64();

// Preparamos y enviamos
var xhr = new XMLHttpRequest();
xhr.open("GET", server + senda, true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('Authorization', 'Basic ' + datosAcceso.toLatin1String() );
xhr.send();

// Al ser una llamada asíncrona, esperamos a que la petición termine
while(xhr.readyState != 4) { // 4: Done
    xhr.processEvents();
}

// Mostramos el resultado
if ( (xhr.errorCode==0) && (xhr.status == 200) ) {
    alert( xhr.response );
}
```