Solicitud XMLHttp

HTTP
Persistencia Compresión HTTPS RÁPIDO
Métodos de solicitud
OPCIONES CONSEGUIR CABEZA CORREO PONER BORRAR RASTRO CONECTAR PARCHE
Campos de encabezado
Galleta Etiqueta electrónica Ubicación Referencia HTTP No disponible X-Reenviado-Para
Códigos de estado de respuesta
301 se trasladó de forma permanente 302 encontrados 303 Ver otros 403 Prohibido 404 No encontrado 451 No disponible por razones legales
Métodos de control de acceso de seguridad
Autenticación de acceso básica Autenticación de acceso mediante resumen
Vulnerabilidades de seguridad
Inyección de encabezado HTTP Contrabando de solicitudes HTTP División de la respuesta HTTP Contaminación de parámetros HTTP
en a mi

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]

1. Cree un objeto XMLHttpRequest llamando a un constructor :

   var solicitud = nueva XMLHttpRequest ();    

2. Llame al método "abrir" para especificar el tipo de solicitud, identificar el recurso relevante y seleccionar la operación sincrónica o asincrónica:

   solicitud . open ( 'GET' , '/api/message' , true /* asíncrono */ );   

3. Para una solicitud asincrónica, configure un oyente que recibirá una notificación cuando cambie el estado de la solicitud:

   solicitud .onreadystatechange = oyente ;​  

4. Inicie la solicitud llamando al método "enviar":

   solicitud . enviar ();

5. Responder a los cambios de estado en el detector de eventos. Si el servidor envía datos de respuesta, de forma predeterminada se capturan en la propiedad "responseText". Cuando el objeto deja de procesar la respuesta, cambia al estado 4, el estado "listo".

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

• WebSocket
• Transferencia de estado representacional (REST)

Wikilibros tiene un libro sobre el tema: XMLHttpRequest

• XMLHttpRequest Estándar de vida por WHATWG
• Borrador de XMLHttpRequest de nivel 1 del W3C