XMLHttpRequest ( XHR ) es una API en forma de un objeto JavaScript cuyos métodos transmiten solicitudes HTTP desde un navegador web a un servidor web . [1] Los métodos permiten que una aplicación basada en navegador envíe solicitudes al servidor una vez que se completa la carga de la página y reciba información de vuelta. [2] XMLHttpRequest es un componente de la programación Ajax . Antes de Ajax, los hipervínculos y los envíos de formularios eran los mecanismos principales para interactuar con el servidor, a menudo reemplazando la página actual por otra. [2]
El concepto detrás de XMLHttpRequest fue concebido en 2000 por los desarrolladores de Microsoft Outlook . [3] El concepto se implementó luego dentro del navegador Internet Explorer 5 (2001). Sin embargo, la sintaxis original no utilizaba el XMLHttpRequest identificador . 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]
El 5 de abril de 2006, el Consorcio World Wide Web (W3C) publicó un borrador de trabajo de especificación para el objeto XMLHttpRequest . [7] [a] El 25 de febrero de 2008, el W3C publicó el borrador de trabajo de especificación de nivel 2. [8] El nivel 2 agregó métodos para monitorear el progreso de eventos, permitir solicitudes entre sitios y manejar flujos de bytes. A fines de 2011, la especificación de nivel 2 fue absorbida por la especificación original. [9]
A finales de 2012, el WHATWG se hizo cargo del desarrollo y mantiene un documento vivo utilizando Web IDL . [10]
Generalmente, enviar una solicitud con XMLHttpRequest tiene varios pasos de programación. [11]
var solicitud = nueva XMLHttpRequest (); solicitud . open ( 'GET' , '/api/message' , true /* asíncrono */ ); solicitud .onreadystatechange = oyente ; solicitud . enviar ();function listener () { // Verifica si la solicitud se realizó y fue exitosa . if ( request.readyState == 4 && request.status == 200 ) console.log ( request.responseText ) ; // Muestra el texto . } Además de estos pasos generales, XMLHttpRequest tiene 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 cumplirla 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 a que se complete el texto completo. [14] La solicitud se puede abortar prematuramente [15] o configurar para que falle si no se completa en un período de tiempo específico. [16]
En los primeros desarrollos de la World Wide Web , se descubrió que era posible violar la seguridad de los usuarios mediante el uso de JavaScript para intercambiar información de un sitio web con la de otro menos confiable. Por lo tanto, todos los navegadores modernos implementan una política de mismo origen que evita muchos de estos ataques, como el cross-site scripting . Los datos de XMLHttpRequest están sujetos a esta política de seguridad, pero a veces los desarrolladores web quieren eludir intencionalmente sus restricciones. Esto a veces se debe al uso legítimo de subdominios, ya que, por ejemplo, realizar una XMLHttpRequest desde una página creada por foo.example.compara obtener información de bar.example.comnormalmente fallará.
Existen varias alternativas para eludir esta característica de seguridad, incluyendo el uso de JSONP , Cross-Origin Resource Sharing (CORS) o alternativas con complementos como Flash o Silverlight (ambos ahora obsoletos). XMLHttpRequest de origen cruzado se especifica en la especificación XMLHttpRequest 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 configurar 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 cuándo se solicita una de las características no simples y envía una solicitud previa al vuelo [20] al servidor para negociar la característica.
El flujo de programas que utiliza devoluciones de llamadas XHR asincrónicas puede presentar dificultades de legibilidad y mantenimiento. ECMAScript 2015 (ES6) agregó la construcción de promesasfetch() para simplificar la lógica asincrónica. Desde entonces, los navegadores han implementado la interfaz alternativa para lograr la misma funcionalidad que XHR utilizando promesas en lugar de devoluciones de llamadas.
La búsqueda también está estandarizada por WHATWG. [21]
fetch ( '/api/message' ) . then ( respuesta => { if ( respuesta . status != 200 ) throw new Error ( 'La solicitud falló' ); return respuesta . text (); }) . then ( texto => { console . log ( texto ); }); Javascript carece de un mecanismo portable para la comunicación de red general[.] ... Pero gracias al objeto XMLHttpRequest, ... el código Javascript puede realizar llamadas HTTP a su servidor de origen[.]
La realidad es que la arquitectura del cliente de GMail parece seguir el diseño básico de la implementación de Exchange 2000 de Outlook Web Access para IE5 y versiones posteriores que se lanzó en 2000.
