Mi primera aplicación con AJAX ... usando Prototype!
En este blog hemos venido hablando y desarrollando con AJAX un gran número de ejemplos prácticos, especialmente relacionandolo con PHP y MySQL. Y realmente que hemos aprendido bastante, pues sea ha desarrollado desde la misma raíz de AJAX: el objeto XMLHttpRequest (aka. XHR), pese a que hay muchas librerías JavaScript que la implementan de forma más resumida. Justamente ahora nuestro objetivo es centrarnos en los frameworks y como con estos podemos implementar AJAX en nuestras aplicaciones, y empezaremos por uno de los más conocidos: Prototype. Veamos un ejemplo sencillo (descarga Prototype).
Mostraremos el contenido de un archivo de texto llamado datos.txt, podemos copiar y pegar cualquier texto en este archivo. En un archivo HTML aparte, pongámosle index.html, llamaremos a la librería Prototype, y creamos una función JavaScript en cual usará el objeto AJAX con el método Request para realizar la petición del contenido de datos.txt. El contenido de datos.txt se mostrará en un contenedor-div que nosotros especifiquemos según el atributo id.
<!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>Primer ejemplo AJAX Prototype</title>
</head>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript">
function cargarContenido(fuente_datos, contenedor_id) {
var url = encodeURIComponent(fuente_datos);
var params = '';
new Ajax.Request(url, {
method: 'get', parameters: params,
onSuccess: function(transport) {
if(transport.responseText.length > 0){
document.getElementById(contenedor_id).innerHTML=transport.responseText;
}}});
}
</script>
</head>
<body>
<a href="#" onclick="cargarContenido('datos.txt', 'contenedor')">Cargar contenido</a>
<div id="contenedor">
{aqui aparecera el contenido}
</div>
</body>
Si tienes conocimientos de HTML y algo de JavaScript será suficiente para entender el código. (sino date un paseo por la sección AJAX de este blog). En el método Request podemos especificar la forma de obtener datos (GET ó POST) y algunos parametros, entre otros.
Lo que hicimos con el objeto XMLHttpRequest, PHP y MySQL anteriormente, trataremos de hacerlo con Prototype.
Enlaces | AJAX, Colección de tutoriales con AJAX + PHP y MySQL
Comentarios
Por supuesto que se pueden manejar otros parametros con los métodos GET y POST también. Puedes ver un ejemplo de paginación en este link:
http://www.ribosomatic.com/articulos/paginar-consultas-con-mysql-php-y-ajax/
No hace uso de prototype pero la idea en sí es la misma.
Saludos
Salu2
Dejar un comentario