Solicitud XMLHttp

XMLHttpRequest ( XHR ) es una API en forma de objeto JavaScript cuyos métodos transmiten solicitudes HTTP desde un navegador web a un servidor web . ^{[ 1 ]} Estos métodos permiten que una aplicación basada en navegador envíe solicitudes al servidor una vez que la página se haya cargado por completo y reciba información de vuelta. ^{[ 2 ]} XMLHttpRequest es un componente de la programación Ajax . Antes de Ajax, los hipervínculos y el envío de formularios eran los principales mecanismos para interactuar con el servidor, a menudo reemplazando la página actual por otra. ^{[ 2 ]}

El concepto subyacente XMLHttpRequestfue concebido en 2000 por los desarrolladores de Microsoft Outlook . ^{[ 3 ]} El concepto se implementó posteriormente en el navegador Internet Explorer 5 (1999). Sin embargo, la sintaxis original no utilizaba el XMLHttpRequestidentificador . En su lugar, los desarrolladores utilizaron los identificadores ActiveXObject("Msxml2.XMLHTTP")y ActiveXObject("Microsoft.XMLHTTP"). ^{[ 4 ]} A partir de Internet Explorer 7 (2006), todos los navegadores admiten el XMLHttpRequestidentificador. ^{[ 4 ]}

El XMLHttpRequestidentificador es ahora el estándar de facto en todos los navegadores principales, incluido el motor de diseño Gecko de Mozilla (2002), ^{[ 5 ]} Safari 1.2 (2004) y Opera 8.0 (2005). ^{[ 6 ]}

Ejemplo en TypeScript . ^{[ 11 ]}

// Crear objeto XMLHttpRequest const xhr = new XMLHttpRequest ();// Configurar la solicitud: método GET, URL, el indicador Async (true) hace que el script no se detenga mientras espera la respuesta xhr . open ( 'GET' , 'https://example.com' , true );// Configurar los detectores de eventosxhr.onload = () = > { // La solicitud ha finalizado. Registrar el código de estado y el texto de la respuesta console.log ( xhr.status , xhr.responseText ) ; } ;xhr.onerror = () => { console.log ( ' Se produjo un error de red' ) ; } ;// Enviar solicitud xhr.send ();

Además de estos pasos generales, XMLHttpRequestexisten muchas opciones para controlar cómo se envía la solicitud y cómo se procesa la respuesta. Se pueden agregar campos de encabezado personalizados a la solicitud para indicar cómo debe procesarla el servidor, ^{[ 12 ]} y se pueden cargar datos al servidor proporcionándolos en la llamada "send". ^{[ 13 ]} La respuesta se puede analizar desde el formato JSON a un objeto JavaScript fácilmente utilizable, o procesarse gradualmente a medida que llega en lugar de esperar el texto completo. ^{[ 14 ]} La solicitud se puede abortar prematuramente ^{[ 15 ]} o configurar para que falle si no se completa en un tiempo específico. ^{[ 16 ]}

En los inicios del desarrollo de la World Wide Web , se descubrió que era posible vulnerar la seguridad de los usuarios mediante el uso de JavaScript para intercambiar información de un sitio web con otro de menor reputación. Por lo tanto, todos los navegadores modernos implementan una política de mismo origen que previene muchos de estos ataques, como el cross-site scripting . XMLHttpRequestLos datos están sujetos a esta política de seguridad, pero a veces los desarrolladores web quieren eludir intencionadamente sus restricciones. Esto se debe a veces al uso legítimo de subdominios, ya que, por ejemplo, hacer una solicitud XMLHttpRequestdesde una página creada por foo.example.compara obtener información de bar.example.comnormalmente fallará.

Existen varias alternativas para eludir esta función de seguridad, incluyendo el uso de JSONP , Intercambio de Recursos de Origen Cruzado (CORS) o alternativas con complementos como Flash o Silverlight (ambos ahora obsoletos). XMLHttpRequest de origen cruzado está especificado en la XMLHttpRequestespecificación de nivel 2 del W3C. ^{[ 17 ]} Internet Explorer no implementó CORS hasta la versión 10. Las dos versiones anteriores (8 y 9) ofrecían una funcionalidad similar a través de la API XDomainRequest (XDR). CORS ahora es compatible con todos los navegadores modernos (de escritorio y móviles). ^{[ 18 ]}

El protocolo CORS tiene varias restricciones, con dos modelos de soporte. El modelo simple no permite establecer encabezados de solicitud personalizados y omite las cookies . Además, solo se admiten los métodos de solicitud HEAD, GET y POST, y POST solo permite los siguientes tipos MIME : "text/plain", "application/x-www-urlencoded" y " multipart/form-data ". Inicialmente solo se admitía "text/plain". ^{[ 19 ]} El otro modelo detecta cuando se solicita una de las características no simples y envía una solicitud previa ^{[ 20 ]} al servidor para negociar la característica.

El flujo de programación que utiliza devoluciones de llamada XHR asíncronas puede presentar dificultades en cuanto a legibilidad y mantenimiento. ECMAScript 2015 (ES6) incorporó la construcción de promesasfetch() para simplificar la lógica asíncrona. Desde entonces, los navegadores han implementado la interfaz alternativa para lograr la misma funcionalidad que XHR utilizando promesas en lugar de devoluciones de llamada.

Fetch también está estandarizado por WHATWG. ^{[ 21 ]}

fetch ( '/api/message' ) . then ( ( respuesta : Response ) => { if ( respuesta.status !== 200 ) { throw new Error ( 'La solicitud falló' ); } return respuesta.text (); } ) . then ( ( texto : string ) = > { console.log ( texto ) ; } ) . catch (( error : Error ) = > { console.error ( error.message ) ; } ) ;

• WebSocket
• Transferencia de estado representacional (REST)

• XMLHttpRequest Living Standard de WHATWG
• Borrador de nivel 1 de XMLHttpRequest del W3C