0002 AJAX – PHP – POSTGRESQL I
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. 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 MS-Visio: :
Explicación: 1.
El cliente llama al servidor para visualizar la página "html", (testhtml.html ), que contiene la información.
2.
La página testhtml.html contiene un link que al hacer "click" en él, éste hace la llamada a la función obtener los datos que el usuario busca.
3.
4.
5.
correspondiente
para
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.
Código SQL:
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 testhtml.html): ):
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Prueba <title> Prueba de [ AJAX - PHP - POSTGRESQL ] ] <script language="javascript" src="testajax.js" type="application/javascript">
Código JavaScript – (testajax.js):
/*------------------------------------------------------*/ //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), denominado "contenido".
borra
Código PHP – testphp.php:
el
contenido
de
la
etiqueta
" DIV"
$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 = "
"; $html .= ""; $html .= "| [ ID ] | "; $html .= " [ NOMBRE ] | "; $html .= " [ APELLIDO ] | "; $html .= " [ CÉDULA ] | "; $html .= "
"; while($val = pg_fetch_array($res)) { $html .= "| " . $val[0] . " | " . $val[1] . " | " . $val[2] . " | " . $val[3] . " |
"; } $html .= "
"; 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: o 0: No se ha abierto la comunicación con el script seleccionado. o 1: Estado en espera. o 2: La petición está cargando, esperando respuesta del servidor. o 3: Estado interactivo. o 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
0006 AJAX – PHP – POSTGRESQL II
En este segundo tutorial sobre AJAX – PHP – PostgreSQL se van a tratar los siguientes puntos:
1. Mostrar el contenido de la página "index.html" dependiendo de un parámetro seleccionado por el usuario.
2. Enviar un parámetro a través de AJAX al script de PHP por medio de POST.
3. Guardar el resultado de la consulta SQL en formato XML y leer el contenido del resultado mediante AJAX.
4. Leer etiquetas HTML contenidos en el XML resultante. 5. Leer caracteres especiales HTML, (á, é, í, ó, ú), contenidos en el archivo XML dentro de los etiquetas HTML. Código de la tabla ajax:
CREATE TABLE ajax ( id serial NOT NULL, nombre character varying(50), apellido character varying, cedula character varying(8), sexo boolean, CONSTRAINT pid PRIMARY KEY (id) ) WITH ( OIDS=FALSE ); ALTER TABLE ajax OWNER TO postgres;
INSERT INTO ajax (id, nombre, apellido, cedula, sexo) VALUES (1, 'David', 'Lastra', '14852152', true); INSERT INTO ajax (id, nombre, apellido, cedula, sexo) VALUES (2, 'David', 'Lastra', '14852152', true); INSERT INTO ajax (id, nombre, apellido, cedula, sexo) VALUES (3, 'David', 'Lastra', '14852152', true); INSERT INTO ajax (id, nombre, apellido, cedula, sexo) VALUES (4, 'David', 'Lastra', '14852152', true); INSERT INTO ajax (id, nombre, apellido, cedula, sexo) VALUES (5, 'David', 'Lastra', '14852152', true); INSERT INTO ajax (id, nombre, apellido, cedula, sexo) VALUES (6, 'Miss', 'Universo', '11111111', false); INSERT INTO ajax (id, nombre, apellido, cedula, sexo) VALUES (7, 'Miss', 'Universo', '11111111', false); INSERT INTO ajax (id, nombre, apellido, cedula, sexo) VALUES (8, 'Miss',
'Universo', '11111111', false); INSERT INTO ajax (id, nombre, apellido, cedula, sexo) VALUES (9, 'Miss', 'Universo', '11111111', false); INSERT INTO ajax (id, nombre, apellido, cedula, sexo) VALUES (10, 'Miss', 'Universo', '11111111', false); INSERT INTO ajax (id, nombre, apellido, cedula, sexo) VALUES (11, 'Miss', 'Universo', '11111111', false); INSERT INTO ajax (id, nombre, apellido, cedula, sexo) VALUES (12, 'David', 'Lastra', '14852152', true); INSERT INTO ajax (id, nombre, apellido, cedula, sexo) VALUES (13, 'David', 'Lastra', '14852152', true); INSERT INTO ajax (id, nombre, apellido, cedula, sexo) VALUES (14, 'David', 'Lastra', '14852152', true); INSERT INTO ajax (id, nombre, apellido, cedula, sexo) VALUES (15, 'David', 'Lastra', '14852152', true); INSERT INTO ajax (id, nombre, apellido, cedula, sexo) VALUES (16, 'Miss', 'Universo', '11111111', false); INSERT INTO ajax (id, nombre, apellido, cedula, sexo) VALUES (17, 'Miss', 'Universo', '11111111', false); INSERT INTO ajax (id, nombre, apellido, cedula, sexo) VALUES (18, 'Miss', 'Universo', '11111111', false); INSERT INTO ajax (id, nombre, apellido, cedula, sexo) VALUES (19, 'Miss', 'Universo', '11111111', false); INSERT INTO ajax (id, nombre, apellido, cedula, sexo) VALUES (20, 'Miss', 'Universo', '11111111', false); INSERT INTO ajax (id, nombre, apellido, cedula, sexo) VALUES (21, 'Miss', 'Universo', '11111111', false);
La primera parte consta de la creación de la tabla con el nombre de "ajax" en minúsculas. La segunda parte es la inserción de datos para trabajar con los mismos desde los scripts.
Código index.html:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Prueba de [ AJAX - PHP - POSTGRESQL II] <script language="javascript" src="js/ajax.js" type="application/javascript">
Las etiquetas HTML más importantes que se muestran arriba están resaltadas en colores.
1. <script language>: para indicar donde se encuentra el archivo javascript con las funciones a usar. 2.
: el contenido de este div es el que se va a modificar por medio de las funciones "fDatos" y "fBorrar" de javascript. 3.
