Open Menu dzosoft
Close Menu dzosoft

   TODO SOBRE INFORMÁTICA Y TECNOLOGÍA


                             





Publish perfectly-optimized content in 1-click



 
 
 

Cómo hacer llamadas Ajax con XMLHTTPRequest

 
 
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!" ); 


 

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


 

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:


ValorDescripció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

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



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"]).'"...';




 

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.

También te puede interesar


Cómo hacer Drag and Drop en HTML 5 y JavaScript API

Cómo copiar texto al portapapeles usando html, css y javascript

Cómo crear una presentación de diapositivas receptiva con CSS y JavaScript

Cómo capturar una foto desde una cámara usando Javascript

Cómo dibujar en el navegador con JavaScript


Leave comment
          

Guardar apodo y correo electrónico en este navegador para la próxima vez.



Cargando...     

NICOTINE FREE