XMLHttpRequest ( XHR ) es una clase de JavaScript [a] que contiene métodos para transmitir de forma asincrónica solicitudes HTTP desde un navegador web a un servidor web . [1] Los métodos permiten que una aplicación basada en navegador realice una llamada detallada al servidor y almacene los resultados en el atributo XMLHttpRequest . [2] La clase XMLHttpRequest es un componente de la programación Ajax . Antes de Ajax, era necesario enviar completamente un formulario HTML al servidor seguido de una actualización completa de la página del navegador. [2]responseText
El concepto detrás de la clase XMLHttpRequest fue concebido en el año 2000 por los desarrolladores de Microsoft Outlook , disponible en el sistema operativo Windows 2000 . [3] El concepto se implementó luego dentro del intérprete del navegador Internet Explorer 5 (2001) . [b] Sin embargo, la sintaxis original no utilizaba el identificador . En cambio, los desarrolladores utilizaron los identificadores y . [4] A partir de Internet Explorer 7 (2006), todos los navegadores admiten el identificador. [4]XMLHttpRequest ActiveXObject("Msxml2.XMLHTTP")ActiveXObject("Microsoft.XMLHTTP")XMLHttpRequest
El XMLHttpRequestidentificador es ahora el estándar de facto en todos los principales navegadores, incluido el motor de diseño Gecko de Mozilla (2002), Konqueror (2002), Safari 1.2 (2004), [5] Opera 8.0 (2005), [6] e iCab ( 2005). [7]
Con la llegada de bibliotecas JavaScript para varios navegadores, como jQuery , los desarrolladores pueden invocar la funcionalidad XMLHttpRequest indirectamente.
El Consorcio World Wide Web (W3C) publicó un borrador de especificación de trabajo para el objeto XMLHttpRequest el 5 de abril de 2006. [8] [c] El 25 de febrero de 2008, el W3C publicó la especificación de borrador de trabajo de nivel 2 . [9] El nivel 2 agregó métodos para monitorear el progreso del evento, permitir solicitudes entre sitios y manejar flujos de bytes. A finales de 2011, la especificación de nivel 2 fue absorbida por la especificación original. [10]
A finales de 2012, WHATWG se hizo cargo del desarrollo y mantiene un documento vivo utilizando Web IDL . [11]
Para generar una solicitud asincrónica al servidor web, primero se debe crear una instancia ( asignar la memoria ) del objeto XMLHttpRequest . La memoria asignada se asigna a una variable . La declaración de programación en JavaScript para crear una instancia de un nuevo objeto es new. [12] La newdeclaración va seguida de la función constructora del objeto. La costumbre de los desarrolladores de lenguajes orientados a objetos es invocar la función constructora utilizando el mismo nombre que el nombre de la clase . [13] En este caso, el nombre de la clase es XMLHttpRequest . Para crear una instancia de una nueva XMLHttpRequest y asignarla a la variable denominada request:
var request = new XMLHttpRequest();[14]
El método abierto prepara XMLHttpRequest . [15] Puede aceptar hasta cinco parámetros , pero solo requiere los dos primeros.
var request = new XMLHttpRequest();
request.open( RequestMethod, SubmitURL, AsynchronousBoolean, UserName, Password );
GETpara cantidades típicas de datos. Entre los otros métodos de solicitud disponibles, POSTmanejará cantidades sustanciales de datos. [16] Después de recibir la cadena de retorno, envíe el DELETEmétodo de solicitud para .open()liberar la memoria XMLHttpRequest . [17] Si DELETEse envía, entonces el parámetro SubmitURL puede ser null.request.open( "DELETE", null );POSTSi se invoca el método de solicitud de , entonces se requiere el paso adicional de enviar el tipo de medio . [20] El método permite que el programa envíe este u otros encabezados HTTP al servidor web. Su uso es . [15] Para habilitar el método de solicitud:Content-Type: application/x-www-form-urlencodedsetRequestHeadersetRequestHeader( HeaderField, HeaderValue )POST
request.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );POSTSi se invoca el método de solicitud , entonces el servidor web espera que los datos del formulario se lean desde el flujo de entrada estándar. [21] Para enviar los datos del formulario al servidor web, ejecute request.send( FormData ), donde FormData es una cadena de texto. Si GETse invoca el método de solicitud , entonces el servidor web solo espera los encabezados predeterminados. [22] Para enviar los encabezados predeterminados, ejecute request.send( null ). [d]
onreadystatechangees un método de devolución de llamada que se ejecuta periódicamente durante todo el ciclo de vida de Ajax. [23] Para establecer un método de devolución de llamada denominado ReadyStateMethod(), la sintaxis es request.onreadystatechange = ReadyStateMethod. [e] Por conveniencia, la sintaxis permite definir un método anónimo . [23] Para definir un método de devolución de llamada anónima:
solicitud var = nueva XMLHttpRequest (); pedido . onreadystatechange = function () { // código omitido } El ciclo de vida XMLHttpRequest avanza a través de varias etapas, de 0 a 4. La etapa 0 es antes de que open()se invoque el método y la etapa 4 es cuando llega la cadena de texto. [22] Para monitorear el ciclo de vida, XMLHttpRequest tiene disponible el readyState atributo . Las etapas 1 a 3 son ambiguas y las interpretaciones varían según los navegadores. [15] Sin embargo, una interpretación es: [15]
Cuando readyStatellega a 4, la cadena de texto ha llegado y está configurada en el responseTextatributo.
solicitud var = nueva XMLHttpRequest (); pedido . onreadystatechange = function () { if ( request . readyState == 4 ) { // request.responseText está configurado } } A petición, el navegador ejecutará una función JavaScript para transmitir una solicitud al servidor web para ejecutar un programa informático . El programa informático puede ser el intérprete PHP , otro intérprete o un ejecutable compilado . En cualquier caso, la función JavaScript espera que se transmita una cadena de texto y se almacene en el atributo . [22] responseText
Para crear una función de JavaScript de ejemplo:
cd /var/www/htmlajax_submit.js:función ajax_submit ( elemento_id , enviar_url ) { var solicitud = nueva XMLHttpRequest (); var estado_completado = 4 ; pedido . onreadystatechange = función () { if ( solicitud . readyState == estado_completado ) { documento . getElementById ( elemento_id ). internalHTML = solicitud . texto de respuesta ; pedido . abrir ( "BORRAR" , nulo ); } } pedido . abrir ( "OBTENER" , enviar_url ); pedido . enviar ( nulo ); } PHP es un lenguaje de programación diseñado específicamente para interactuar con HTML . [24] Debido a que el motor PHP es un intérprete (que interpreta las declaraciones del programa a medida que se leen), existen limitaciones de programación [f] y costos de rendimiento. [g] No obstante, su simplicidad puede colocar el conjunto de archivos XMLHttpRequest en el mismo directorio de trabajo, probablemente /var/www/html.
El componente del servidor de PHP XMLHttpRequest es un archivo ubicado en el servidor que no se transmite al navegador. En su lugar, el intérprete de PHP abrirá este archivo y leerá sus instrucciones de PHP. El protocolo XMLHttpRequest requiere que genere una cadena de texto.
cd /var/www/htmlajax.phtml:<?php echo '<h1>¡Hola mundo!</h1>' ; ?>El componente del navegador de PHP XMLHttpRequest es un archivo ubicado en el servidor que se transmite al navegador. El navegador abrirá este archivo y leerá sus instrucciones HTML.
cd /var/www/htmlajax.html:< html > < head > < title > Hola mundo </ title > < tipo de script = text/javascript src = ajax_submit.js >> script > < / head > < body > < div id = ajax_title >> div > < botón al hacer clic = "ajax_submit( 'ajax_title', 'ajax.phtml' )" > Entregar </ botón > </ cuerpo >http://localhost/ajax.htmlSubmitEl proceso Common Gateway Interface (CGI) permite a los navegadores solicitar al servidor web que ejecute programas informáticos compilados . [h]
El componente del servidor de un CGI XMLHttpRequest es un archivo ejecutable ubicado en el servidor. El sistema operativo abrirá este archivo y leerá las instrucciones de su máquina . El protocolo XMLHttpRequest requiere que el ejecutable genere una cadena de texto.
Los programas compilados tienen dos archivos: el código fuente y el ejecutable correspondiente.
cd /usr/lib/cgi-binajax.c:#incluir <stdio.h> void main ( void ) { /* CGI requiere la primera línea para generar: */ printf ( "Tipo de contenido: texto/html \n " ); /* CGI requiere la segunda línea para generar: */ printf ( " \n " ); printf ( "<h1>¡Hola mundo!</h1> \n " ); } cc ajax.c -o ajax
o
sudo cc ajax.c -o ajax
El componente del navegador CGI es el mismo que el componente del navegador PHP, excepto por un ligero cambio en el archivo submit_url. La sintaxis para indicarle al servidor web que ejecute un ejecutable va /cgi-bin/seguida del nombre del archivo. Por seguridad, el ejecutable debe residir en una cárcel chroot . En este caso, la cárcel es el directorio /usr/lib/cgi-bin/. [i]
cd /var/www/htmlajax.html:< html > < head > < title > Hola mundo </ title > < tipo de script = text/javascript src = ajax_submit.js >> script > < / head > < body > < div id = ajax_title >> div > < botón al hacer clic = "ajax_submit( 'ajax_title', '/cgi-bin/ajax' )" > Entregar </ botón > </ cuerpo >http://localhost/ajax.htmlSubmitJavascript carece de un mecanismo portátil para la comunicación general de la red[.] ... 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 aproximado de la implementación de Exchange 2000 de Outlook Web Access para IE5 y posteriores, que se lanzó allá por el año 2000.
PHP es un lenguaje de programación del lado del servidor diseñado específicamente para la Web.
new nullmarcador de posición está actualmente retirado pero recomendado.request.open().