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
Muy bueno loco, y vamos pa’ delante con prototype! xD.
Salu2
¿Se podrá agregar otro parametro ademas de datos.txt y contenedor? Se me ocurre manejar una paginacion de resultados dinamicos pero me gustaria pasar por GET el numero de pagina… para evitar que mostrara todos los registros el id del contenedor, ya que usaria un php en vez de txt.
@Cao:
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:
https://www.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
necesito un ejemplo sobre un ejercisio en el cual al dijitar dies numeros…tenga una serie de botpones que me organice los numeros de mayor a menor y otro boton que me muestre por pantalla los numeros primos..otro en el que muestre los pares…y otro que muestre los repetidos…la cantdidad de repetidos y cuales son…si alguno save o tiene uin ejercisio simmilar le agradeceria mucho
Hola