Cita:
Iniciado por kanakis 
Entonces, en grandes pinceladas, ¿cómo se haría en AJAX utilizando librerías como JQuery?
Ufff.. Intentemoslos. Lo voy a hacer de cabeza asi que puede que haya errores.
Lo primero, vamos a preparar una estructura coherente de directorios, por ejemplo:
/myproyecto
/myproyecto/scripts
/myproyecto/css
Creo que el contenido de cada uno no necesita explicación en el directorio raíz meteremos todos los html.
Vamos docs.jquery.com/Downloading_jQuery y descargamos jquery, mejor la versión minima ya que no vamos a depurar y lo guardamos en scripts.
Nos creamos un index.html muy sencillo, para probar:
index.html
Código:
<html>
<head>
<!-- Aqui añadimos jquery-->
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js" ></script>
<!-- Este segundo -->
<script type="text/javascript" src="scripts/engine.js" ></script>
</head>
<body>
<div id="header">
<a href="pag1">Pagina 1</a>
<a href="pag2">Pagina 2</a>
<a href="pag3">Pagina 3</a>
</div>
<div id="content">
<p>Soy un pofesional</p>
</div>
<div id="footer">
<p>Pagina hola mundo AJAX</p>
</div>
</body>
<html>
Y creamos 3 ficheros HTML mas con solo una porción de página
pag1.html
pag2.html
pag3.html
Código:
<p>DINAMICO!!!!!!!!!!!!!!!!</p>
Y dentro de scritps nos creamos otro que sea engine.js
engine.js
Código:
$(document).ready(function(){
$('#header a').click(function(){
$('#content').load($(this).attr('href')+'.html'); //Esto ya es AJAX
});
});
La traduccion a cristiano de lo que hace eso en 4 lineas es. Cuando la estructura DOOM del documento HTML este lista (puede que haya cosas aun cargando como son imagenes), a todos los enlaces de la cabecera le vamos a asignar un evento onclick y que hace que carge en el div content el contenido del fichero referenciado por el atributo href del enlace que ha sido marcado con su correspondiente extensión.
Para usar jquery tienen que saber muy bien que es la estructura DOM, la BOM, los selectores CSS para seleccionar los elementos afectados por $(), como funciona el sistema de eventos etc. Y con 4 lineas se hace cosas impresionantes y no deja de ser javascript bien usado.
El AJAX se encuentra en la funcion 'load' de jquery.
Todo esto y mucho mas en docs.jquery.com
Lo siento pero el sistema no me deja poner enlaces por tener menos de 30 mensajes
