TODO SOBRE INFORMÁTICA Y TECNOLOGÍA




Cómo hacer llamadas Ajax con XMLHTTPRequest





El objeto XMLHTTPRequest se utiliza para realizar llamadas al servidor desde la página HTML. Estas son llamadas AJAX (Javascript XML asíncrono) .
A día de hoy, todos los navegadores aceptan este modo de funcionamiento, sin ninguna particular incompatibilidad.
AJAX ha permitido la aparición de aplicaciones web reales y ha contribuido en gran medida al desarrollo de javascript, que incluso se ha convertido en un lenguaje de servidor con Node.js.

Como su nombre no lo indica, los objetos XMLHTTPRequest pueden recuperar todo tipo de datos, no solo archivos XML. Para realizar una consulta, primero debe declarar una determinada variable. Luego, enviamos la solicitud y finalmente, esperamos la respuesta. A continuación puede ver un ejemplo muy básico consultando la página actual (ubicación.href). Una vez que se obtiene la respuesta, se muestra un cuadro de alerta.

Javascript

	var  xhr_object =  new XMLHttpRequest ();  
	xhr_object. open ( "GET" , location.href,  false ); 
	xhr_object. send ( null ); 
	if  (xhr_object. readyState  == 4)  alert ( "Request completed!" );

	var  xhr_object =  new XMLHttpRequest ();  
	xhr_object. open ( "GET" , location.href,  false ); 
	xhr_object. send ( null ); 
	if  (xhr_object. readyState  == 4)  alert ( "Request completed!" ); 
</br>



Cómo funciona ?


.línea 1: Creamos una instancia del objeto XMLHTTPRequest
.línea 2: Especificamos el método de transmisión de datos, la URL y el modo de transmisión de la solicitud;
.línea 3: se ejecuta la consulta en sí;
.línea 4: se muestra un cuadro de alerta tan pronto como finaliza la solicitud.


¿Para qué se puede usar esto?


En el ejemplo anterior, la consulta solo solicita un determinado archivo sin importar el resultado.
Pero, de hecho, cuando finaliza la solicitud, recibimos información del servidor.
Esta información está contenida en la variable xhr_object.response.
Simplemente reemplacemos la alerta del ejemplo anterior con alert(xhr_object.response) y veamos el resultado:

Como has visto, se mostraba todo el código de esta página HTML. De hecho, durante dicha solicitud, todo sucede exactamente como si hubiera escrito la URL en la barra de direcciones de su navegador.
Lo que significa que si solicita un archivo PHP, se ejecutará y el resultado de su ejecución terminará en xhr_object.response.
A partir de ahí, rápidamente nos damos cuenta de que no hay límite para el uso de este tipo de solicitudes. Simplemente podemos mostrar el resultado recibido con una alerta, pero puede recuperar y ejecutar el código JS con la misma facilidad usando eval .


Sincrónico vs. Asincrónico


En el ejemplo que hemos visto hasta ahora, se utilizó el modo síncrono. Esto significa que hasta que no nos llegue el resultado de la consulta, el script está en pausa y el navegador está bloqueado. Con una buena velocidad y/o pocos datos para transmitir, podemos estar satisfechos con él, pero eso rápidamente puede resultar molesto para el usuario que ve congelado su navegador. Por lo tanto, debe evitarse este modo de transmisión. Afortunadamente, existe el modo asíncrono.
En este modo, después de enviar la solicitud a través de send, el script continúa su ejecución, sin bloquear el navegador. Obviamente, en este modo, debemos proporcionar algo que nos avise cuando la solicitud se haya realizado correctamente. Este es el papel de la función onreadystatechange (de hecho, onreadystatechange es una propiedad y no una función, pero dado que se le asigna un puntero a una función, podemos permitirnos este abuso del lenguaje).
Tomemos como nuevo ejemplo una consulta sobre un archivo de texto simple:

Javascript

xhr_object = new XMLHttpRequest();


xhr_object.open("GET", "dzosoft.txt", true);


xhr_object.onreadystatechange = function() {
   if(xhr_object.readyState == 4) alert(xhr_object.responseText);
}


xhr_object.send(null);

xhr_object = new XMLHttpRequest();
</br>
xhr_object.open("GET", "dzosoft.txt", true);
</br>
xhr_object.onreadystatechange = function() {
   if(xhr_object.readyState == 4) alert(xhr_object.responseText);
}
</br>
xhr_object.send(null);
</br>

Cómo funciona ?

Es el tercer argumento de la función abierta que especifica que el modo debe ser asíncrono.

El objeto xhr_object tiene una propiedad readyState que toma sucesivamente 5 valores resumidos en la siguiente tabla:

Valor

Descripción

0 (sin inicializar)

Objeto no inicializado

1 ( loading )

Inicio de transferencia de datos

2 (cargado)

Datos transferidos

3 (interactivo)

Los datos recibidos son parcialmente accesibles

4 (completo)

Los datos son completamente accesibles< /td>

Y en cada cambio de estado de readyState, se llama a la función onreadystatechange. Así podemos hacer que haga lo que queramos dependiendo del progreso de la solicitud. Pero en cualquier caso, es el estado 4 el que nos interesa y generalmente se alcanza muy rápidamente. Hay otra propiedad interesante que es el estado y que representa el código HTTP devuelto por la solicitud. Es bueno saber que Firefox arroja un error si intenta acceder a esta propiedad antes de que readyState sea 4 .

Para ver todos los valores que puede tomar ese estado.

Ver todos los valores de código HTTP

Codificado	Descripción
100	sigue adelante
101	Protocolos de conmutación
200	OK
201	Creado
202	Aceptado
203	Información no autorizada
204	Sin contenido
205	Restablecer contenido
206	Contenido parcial
300	Opciones múltiples
301	Movido permanentemente
302	Encontrado
303	Ver otro
304	No modificado
305	Usar proxy
307	Redireccionamiento temporal
400	Solicitud incorrecta
401	No autorizado
402	Pago requerido
403	Prohibido
404	No encontrado
405	Método no permitido
406	No aceptable
407	Se requiere autenticación de proxy
408	Tiempo de espera de solicitud
409	conflicto
410	Ido
411	Longitud requerida
412	Condición previa fallida
413	Entidad de solicitud demasiado grande
414	Solicitud-URI Demasiado largo
415	Tipo de medio no admitido
416	Solicitado Rango no adecuado
417	Expectativa fallida
500	Interna Error del servidor
501	No implementado
502	Puerta de enlace incorrecta
503	Servicio no disponible
504	Tiempo de espera de la puerta de enlace
505	Versión HTTP no compatible

Dato transmitido

Realizar una solicitud y recibir un resultado es bueno. Pero hacer una solicitud mediante la transmisión de datos es mejor. Los datos se transmiten de la misma manera que cuando se envía un formulario, es decir, a través de uno de los dos métodos GET o POST. Obviamente, si se transmiten datos, la solicitud debe referirse a un archivo capaz de interpretarlos correctamente. En el siguiente ejemplo vamos a enviar dos cadenas de caracteres al archivo action.php y este nos las devolverá “invertidas”.

Javascript

var xhr_object = new XMLHttpRequest();


var method   = f.elements["method"][0].checked ? "GET" : "POST";
var filename = "action.php";
var s1       = f.elements["string1"].value;
var s2       = f.elements["string2"].value;
var data     = null;


if (s1 != "" && s2 != "") {
   data = "s1="+s1+"&s2="+s2;
}


if (method == "GET" && data != null) {
   filename += "?"+data;
   data      = null;
}


xhr_object.open(method, filename, true);


xhr_object.onreadystatechange = function() {
   if(xhr_object.readyState == 4) {
      var tmp = xhr_object.responseText.split(":");
      if(typeof(tmp[1]) != "undefined") {
         f.elements["string1_r"].value = tmp[1];
         f.elements["string2_r"].value = tmp[2];
      }
      alert(tmp[0]);
   }
}


if (method == "POST") {
   xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
}


xhr_object.send(data);

var xhr_object = new XMLHttpRequest();
</br>
var method   = f.elements["method"][0].checked ? "GET" : "POST";
var filename = "action.php";
var s1       = f.elements["string1"].value;
var s2       = f.elements["string2"].value;
var data     = null;
</br>
if (s1 != "" && s2 != "") {
   data = "s1="+s1+"&s2="+s2;
}
</br>
if (method == "GET" && data != null) {
   filename += "?"+data;
   data      = null;
}
</br>
xhr_object.open(method, filename, true);
</br>
xhr_object.onreadystatechange = function() {
   if(xhr_object.readyState == 4) {
      var tmp = xhr_object.responseText.split(":");
      if(typeof(tmp[1]) != "undefined") {
         f.elements["string1_r"].value = tmp[1];
         f.elements["string2_r"].value = tmp[2];
      }
      alert(tmp[0]);
   }
}
</br>
if (method == "POST") {
   xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
}
</br>
xhr_object.send(data);



Il file action.php

header('Content-type: text/html; charset=iso-8859-1');


if(count($_POST) > 0) {
   echo "Data received in POST:";
   foreach($_POST as $v)
      echo strrev(utf8_decode($v)).":";
}
elseif(count($_GET) > 0) {
   echo "Data received in GET:";
   foreach($_GET as $v)
      echo strrev($v).":";
}


if(count($_POST) == 0 && count($_GET) == 0)
	echo 'No data was received by "'.basename($_SERVER["PHP_SELF"]).'"...';

header('Content-type: text/html; charset=iso-8859-1');
</br>
if(count($_POST) > 0) {
   echo "Data received in POST:";
   foreach($_POST as $v)
      echo strrev(utf8_decode($v)).":";
}
elseif(count($_GET) > 0) {
   echo "Data received in GET:";
   foreach($_GET as $v)
      echo strrev($v).":";
}
</br>
if(count($_POST) == 0 && count($_GET) == 0)
	echo 'No data was received by "'.basename($_SERVER["PHP_SELF"]).'"...';
</br>





Cómo funciona ?


Todo comienza en JS. Si el método seleccionado es get , los datos a transmitir se concatenan con la URL y si el método es post , se envía a través de la función de envío. En el último caso, también debe especificar la codificación especificando el encabezado apropiado con setRequestHeader.

Luego, en el lado de PHP, se reciben los datos, independientemente del método de transmisión, y las cadenas se invierten usando strrev. Los datos recibidos a través del método POST se decodifican utilizando utf8_decode; de lo contrario, los caracteres acentuados se malinterpretan. La cadena mostrada por el código PHP (y por lo tanto devuelta) tiene el formato Datos recibidos en XXX:CADENA1:CADENA2: donde XXX es GET o POST y donde CADENA1 y CADENA2 son las cadenas invertidas. También especificamos, gracias a la función de encabezado, el tipo de datos que se transferirán desde el servidor (aquí, texto usando el juego de caracteres iso-8859-1).
Finalmente, del lado de JS, solo queda separar los datos, con split y poner las cadenas en los campos correspondientes.


Propiedades y métodos



Propiedades

onreadystatechange : especifica la función a llamar cuando cambia la propiedad readyState. leer escribir .
readyState : representa el estado de progreso de la solicitud. solo lectura .
response : Cadena de caracteres que contiene la respuesta a la solicitud. solo lectura .
responseXML : objeto XML que contiene la respuesta a la solicitud. solo lectura .
estado Representa el código HTTP devuelto por la solicitud. solo lectura .

Métodos

abort() : cancela la solicitud actual.
getAllResponseHeaders() : Devuelve los nombres y valores de todos los encabezados HTTP como una cadena.
getResponseHeader( headerName ) : recupera el valor de un determinado encabezado HTTP ( headerName ) como una cadena.
open( method , url [, asynchronous [, user [, password ]]]) : Inicializa una solicitud especificando el método ( method ), la URL ( url ), si el modo es asíncrono ( asyncFlag es verdadero o falso) e indicando las credenciales (usuario y contraseña).
send( data ) : envía la solicitud HTTP al servidor, posiblemente transmitiendo datos (entonces los datos deben ser diferentes de nulos) en forma de una "cadena posteable" (estoy interesado en una traducción) o en forma de un objeto DOM.
setTimeout( timeout ) : Especifica la duración máxima ( timeout ) otorgada a una petición para que se lleve a cabo por completo.
setRequestHeader(headerName, headerValue): especifica un encabezado HTTP (headerName y headerValue) para enviar con la solicitud.