AJAX en tres pasos

Descarga el contenido del Artículo en PDF

En este post comentamos como utilizar ajax para refrescar parte de una web de manera asíncrona.

¿Qué significa esto?

Prácticamente que el equipo cliente establecerá una conexión con el servidor en segundo plano, logrando así recargar parte de nuestra web sin que se tenga que recargar toda la página entera, de este modo se logra una mayor interactividad con el usuario y por supuesto una mayor velocidad pues no tenemos que cargar de nuevo todos los elementos (imágenes, música, flash…).

Como indica el título para conseguir esto necesitaremos seguir estos tres pasos que vamos a describir más abajo.

Para utilizar AJAX (Asynchronous JavaScript And XML) debemos saber que navegador utiliza el cliente, por eso en el primer paso creamos un objeto y probamos si funciona, si nuestro código no funciona significa que el cliente utiliza otro tipo de navegador, en este caso probaremos otro tipo de objeto y comprobamos que funciona, logrando de este modo cerciorarnos de que nuestro código funcionará con los distintos navegadores que pueden tener nuestros usuarios.

Primer paso

Creamos el objeto que nos va a permitir enviar y recibir datos a nuestro servidor de forma asincrona. Para esto es necesario crear el objeto “ajaxObjeto”, ahora iremos probando con el try y catch si nuestro navegador es Internet explorer o cualquier otro (Firefox, Opera, Safarim, etc).

El funcionamiento es sencillo, probamos “ajaxObjeto = new XMLHttpRequest();” y si obtenemos un error probaremos esto “ajaxObjeto = new ActiveXObject(“Msxml2.XMLHTTP”);”. Lo hacemos así porque dependiendo del tipo de navegador que use nuestro cliente usaremos un tipo de objeto u otro.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<script language="javascript" type="text/javascript">;
 
<!--
 
function ajaxConexion(url){
 
var ajaxObjeto; // Declaramos la variable
 
try{
 
// Distinto de Internet Explorer
 
ajaxObjeto = new XMLHttpRequest();
 
} catch (e){
 
// Para Internet explorer
 
try{
 
ajaxObjeto = new ActiveXObject("Msxml2.XMLHTTP");
 
} catch (e) {
 
try{
 
ajaxObjeto = new ActiveXObject("Microsoft.XMLHTTP");
 
} catch (e){
 
// Si no pudo crear el objeto
alert("Esta página tiene problemas con su navegador");
return false;
}
}
}
if(ajaxObjeto) {
ajaxObjeto.onreadystatechange = procesoAcabado;
ajaxObjeto.open("GET", url, true);
ajaxObjeto.send("");
}
}
//-->;
</script>

Tanto este script como el siguiente lo podéis incluir en la propia página o en un fichero externo y llamarlo en la cabecera.

Por ejemplo, podéis nombrarlo fichero.js y leerlo desde vuestra página así:

1

<script src="fichero.js" language="JavaScript"></script>

Segundo Paso:

Creamos una función que recibirá los datos que son enviados desde nuestro servidor.

En esta función asignaremos a la variable mostrarDatos, el elemento en el que vamos a mostrar los datos, y una vez que se haya completado el envio de datos desde nuestro servidor los mostraremos en el elemento que hemos asignado a “mostrarDatos”, dependiendo de los datos que quieras mostrar necesitaras diferentes elementos, por ejemplo, un elemento campo o un elemento DIV.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

function procesoAcabado(){
 
// buscamos el elemento en el que queremos que se muestren los datos
 
var mostrarDatos = document.getElementById("nombreIdentificador");
 
// Cuando el proceso a acabado (4) asignamos la respuesta,
 
// a nuestro elemento mostrarDatos.
 
if(ajaxObjeto.readyState == 4){
 
mostrarDatos.innerHTML = ajaxObjeto.responseText;
 
} else {
 
// si no ha acabado podeis mostrar cualquier mensaje
 
// informativo (espere por favor, cargando datos).
 
mostrarDatos.innerHTML = '...';
 
}
 
}

Tercer Paso:

Dentro de nuestra página creamos el form o formulario desde donde vamos a llamar a la función anterior:

Le diremos que pagina queremos cargar poniendo en el “input” el valor de la página que queremos cargar dentro del div que hemos indicado en el paso anterior.

En este caso cargaremos la pagina2.php dentro del elemento “nombreIdentificador” que hemos indicado en la función anterior.

1
2
3
4
5

<form name='formulario'>
 
<input type='submit' onClick="ajaxConexion(this.value);" name='enviar' value="pagina2.php"/>
 
</form>

Y con este tercer paso hemos acabado, ahora cuando hagamos click en el elemento “enviar”, llamaremos a la función ajaxConexion() pasándole el valor pagina2.php. Esta función después de conocer que navegador tiene el cliente llamará a la función procesoAcabado() y cuando recibamos la respuesta cargaremos el contenido de la página2.php en el ID que hayamos elegido anteriormente.

Obviamente os falta crear el contenido de vuestra pagina2.php que será el texto que se muestre.

Artículos relacionados

• Redireccionar Web | Métodos de redirección (1)
• Pasar variables entre páginas JavaScript (2)
• Mejora la velocidad de tu web (0)
• Jquery TableSorter (0)
• Función JavaScript sin conocer el número de parámetros (0)