Cargar contenido usando Jquery

Jquery 

Una herramienta Open Source muy útil para nosotros los desarrolladores web, ya que nos permite entre muchas otras cosas, cargar contenido en nuestra web sin tener que cargar todo el sitio nuevamente.

Lo primero que necesitamos es incluir la librería en el header de nuestra pagina web, en mi caso, yo guardo la librería en una carpeta llamada js en el servidor.


<script src="js/jquery.js" type="text/javascript"></script>


Ahora escribiremos una función javascript que hará lo siguiente:
1. Esconderá un Div en donde colocaremos un aviso o gift animado que diga loading... o cargando..., esto lo utilizaremos para dejarle saber al usuario que un contenido esta siendo cargado en la pagina.
2. Una vez se ejecute la función, el script mostrara el div que contiene el gif animado de loading... y cargara la nueva pagina o script en un div, al finalizar la carga nuevamente esconderá el div donde tenemos el gif de loading...


<script type="text/javascript">
$(document).ready(function(){
  $('#loadingbar').hide();
})  
     function cargarcontenido(){
       $('#loadingbar').show();
       $('#content').load('myscript.php',function(){
       $('#loadingbar').hide();
       });
     }
</script>


Ahora colocaremos en nuestra pagina los div en donde tendremos el gif de loading y donde se cargara el contenido


<div id="loadingbar">Loading...</div>
<div id="content" style="padding: 10px;">
</div>


Ahora el botón que ejecutara la función.

<input name="" onclick="cargarcontenido()" type="submit" value="Cargar Contenido" />

Espero que con esto tengan una idea de como podemos cargar contenido en nuestra pagina sin necesidad de refrescar todo el sitio, desde luego esto es solo un punto de partida, cada quien puede utilizar estas funciones de la forma como mejor se acomode a sus necesidades!

Un feliz día y gracias por leer esta entrada!.