La explicación de lo que es AJAX va más allá de este tema, por "San" google podrán encontrar referencias excelentes de qué es AJAX y su historia.
En este artículo se va a mostrar el funcionamiento básico de AJAX puro y duro, los frameworks los veremos más adelante. Espero que les guste.
En este ejemplo se establece la comunicación por medio del método "POST".
Lo primero es, tener claro lo que se va a realizar en este artículo y para eso he realizado el siguiente diagrama con MS-Visio:
Explicación:
- El cliente llama al servidor para visualizar la página "html", (testhtml.html), que contiene la información.
- La página testhtml.html contiene un link que al hacer "click" en él, éste hace la llamada a la función correspondiente para obtener los datos que el usuario busca.
- La función javascript se encarga de llamar al script php, (testphp.php). El script php contiene la conexión a la base de datos y la consulta SQL que trae los datos de la tabla.
- El script testphp.php se ejecuta, éste llama a la base de datos "pruebas" tabla "prueba" y devuelve el resultado a la función javascript que hizo la llamada, (fDatos(id, url)),desde el script javascript, (testajax.js) luego se actualiza la página "html" con los resultados obtenidos.
- El cliente visualiza el nuevo resultado.
CREATE TABLE prueba (
id integer NOT NULL,
nombre character varying(50),
apellido character varying(50),
cedula character varying(10)
);
--Recuerden añadir datos a la tabla...
Código HTML – (testhtml.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prueba de [ AJAX - PHP - POSTGRESQL ]</title>
<script language="javascript" src="testajax.js" type="application/javascript"></script>
</head>
<body style="background-color:#366;">
<table border="0" style="color:white; background-color:#000;" align="center">
<tr>
<td colspan="2" align="center">
<strong>Prueba de:</strong><span style="color:#F00; font-weight:bolder;">[ AJAX - PHP - POSTGRESQL ]</span>
</td>
</tr>
<tr>
<td colspan="2">
<div id="contenido" style="color:#1FE4EF; font-family:'Times New Roman', Times, serif;"></div>
</td>
</tr>
<tr>
<td align="center">
<a href="#" onclick="javascript:fDatos('contenido','testphp.php');" style="color:#0F0; text-decoration:none;">[ Mostrar datos ]</a>
</td>
<td align="center">
<a href="#" onclick="javascript:fBorrar('contenido');" style="color:#F00; text-decoration:none;">[ Limpiar contenido ]</a>
</td>
</tr>
</table>
</body>
</html>
/*------------------------------------------------------*/
//Función para crear el objeto Ajax. //
/*------------------------------------------------------*/
function nuevoAjax()
{
var xmlhttp=false;
try
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined')
{
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
/*------------------------------------------------------*/
//id: id del control div que va a recibir los datos. //
//url: Dirección url de la página donde se //
// obtiene los datos. //
/*------------------------------------------------------*/
function fDatos(id, url)
{
var objDiv = document.getElementById(id);
ajax = nuevoAjax();
ajax.open("POST", url, true);
ajax.onreadystatechange = function()
{
switch (ajax.readyState)
{
case 0:
objDiv.innerHTML = 'Error 0. No se ha abierto la comunicación.';
break;
case 1:
objDiv.innerHTML = 'Por favor, espere. Cargando...';
break;
case 2:
objDiv.innerHTML = 'Petición cargada, esperando respuesta del servidor...';
break;
case 3:
objDiv.innerHTML = '';
break;
case 4:
if(ajax.status == 200)
{
objDiv.innerHTML = "";
objDiv.innerHTML = ajax.responseText;
}
else
{
objDiv.innerHTML = 'Error 200';
}
break;
}
}
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send();
}
/*------------------------------------------------------*/
//Borrar los datos de la celda en la página web... //
/*------------------------------------------------------*/
function fBorrar(id)
{
document.getElementById(id).innerHTML = "";
}
La función nuevoAjax() es la función estándar que sirve para crear el objeto ajax que se encarga de la actualización del contenido de forma asincrónica, o sea, que un elemento de la página se actualice sin que el resto de la página se vea afectada.
La función fDatos(id, url) es la función que se encarga de obtener los datos del script de php para poder visualizarlo en la página html, (testhtml.html). El parámetro "id" contiene el nombre de la etiqueta "DIV" con el nombre "contenido" de la página testhtml.html. El parámetro "url" contiene la dirección del script php que se va a ejecutar, en este caso es testphp.php.
La función fBorrar(id), borra el contenido de la etiqueta "DIV" denominado "contenido".
Código PHP – testphp.php:
<?php
//Conexión a la BBDD en postgreSQL...
$conbd = pg_connect("host=localhost port=5432 dbname=pruebas user=tuusuario password=tupassword") or die(pg_last_error());
$sql = "SELECT * FROM prueba;"; //Consulta SQL...
$res = pg_query($conbd, $sql);
if($res)
{
$html = "<table border=\"1\">";
$html .= "<tr>";
$html .= "<td align=\"center\"> [ ID ] </td>";
$html .= "<td align=\"center\"> [ NOMBRE ] </td>";
$html .= "<td align=\"center\"> [ APELLIDO ] </td>";
$html .= "<td align=\"center\"> [ CÉDULA ] </td>";
$html .= "</tr>";
while($val = pg_fetch_array($res))
{
$html .= "<tr><td>" . $val[0] . "</td><td>" . $val[1] . "</td><td>" . $val[2] . "</td><td>" . $val[3] . "</td></tr>";
}
$html .= "</table>";
pg_close($conbd);
echo $html;
}
?>
El código php muestra la conexión a la base de datos con la función "pg_connect()", la variable "$sql" contiene la cadena de consulta SQL para obtener los datos y la variable "$html" contiene una cadena de caracteres con el código HTML más el resultado de la consulta que es devuelta por medio del comando "echo".
"$html" es la variable que se devuelve a la función de javascript fDatos(id, url). fDatos(id, url) se encarga de actualizar la página html por medio del siguiente método "innerHTML" que pertenece al objeto document.getElmentId().
Elementos de la función fDatos(id, url) - AJAX:
- Ajax = nuevoAjax() – para crear el objeto ajax.
- Ajax.open: Método que abre el script para obtener los datos.
- Ajax.onreadystatechange: Método que se encarga de evaluar el estado del script que se ha llamado, hay 5 estados posibles:
- 0: No se ha abierto la comunicación con el script seleccionado.
- 1: Estado en espera.
- 2: La petición está cargando, esperando respuesta del servidor.
- 3: Estado interactivo.
- 4: Comprobar el status de la respuesta, si es 200 todo ok, si no, hubo un fallo.
- Ajax.setRequestHeader: el formato de la cabecera del archivo para procesar los datos.
- Ajax.send(): Para enviar parámetros al script php. Más adelante colocaré un ejemplo de cómo usar este método.
Para más información sobre AJAX, pueden visitar la siguiente página: librosweb
Conclusión:
Usar AJAX es realmente muy sencillo sólo hay que tener claro cómo funciona básicamente el proceso de comunicación, aquí les dejo un pequeño resumen visual del proceso.
Petición de datos:
Recepción de datos:
De momento esto es todo, recuerden que "San" google les puede proveer más información, esto es sólo un ejemplo de lo que se puede hacer con AJAX – PHP – POSTGRESQL sin usar ningún framework.
Un cordial saludo.
Firma: XDRTAS
4 comentarios:
Excelente me ha ayudado a entender el funcionamiento del Ajax de manera mas clara.
Ahora trataré de implementar el ejemplo.
Muchas gracias por tu comentario, me alegro de que te haya aclarado el funcionamiento de AJAX, no he tenido tiempo, pero pronto publicaré más artículos sobre varios temas que tengo pendientes.
Un cordial saludo.
Gracias por esclarecer !!!
De nada, gracias tí por comentar.
Publicar un comentario