Podemos realizar la actualización de nuestra página web por bloques, es decir actualizar en parte el contenido si en caso se realiza una acción dada, llámese clic, presionando una tecla especifica, arrastrando objetos; no es necesario hacer un refresh completo perdiendo tiempo y ademas contenido que quizá ya hayas estado usando.
Primero crearemos un etiqueta capa. Dentro de una pagina web llamada prueba probemos de forma estática como un .html/htm, llamado view.html:
<div id='Contenido'></div>
Quien se encargará de recibir y mostrar los datos consultados en la otra página, si aún tienes un nivel de novato puedes usar 2 páginas como máximo, si ya eres más experto y ducho en el tema podes lograrlo sólo con la misma página con la que comenzaste.
Aquí el código de la consulta JQuery:
$.ajax({
url: "view2.html",
type:"GET",
async:true,
cache:false,
success:function(data){
$("#Contenido").html(data);
}
});
Tenemos el url la ubicación de nuestra otra pagina, el type que es el método que se usarán para enviar los parámetros, async para detallar si nuestra consulta sera de manera asíncrona o no, cache para evitar que las demás consultas queden en memoria del navegador, y por último el success que es el evento de culminación de la consulta JQuery $.ajax() mostrando e insertando lo que se encuentra dentro de view2.html; en las siguientes líneas podemos ver el contenido de la página auxiliar.
<h1>Mi primera aplicación con JQuery $.ajax()</h1>
Pero cómo mencione en la primera parte de este artículo, sólo cuando existen eventos es posible actualizar lo que se indique como es el caso nuestro, sólo esta parte será posible cambiar. Para ello crearemos un botón que confirme el refresh de la capa, sin embargo se debe colocar el contenido JQuery dentro de una función para reutilizar código:
function cargar(){} //<--Aqui va el código del $.ajax();
<input type="button" value="Mostrar" onClick="cargar();"/>
Cómo se puede apreciar en el código de arriba en el evento clic se escribió la función para poder mostrar el contenido que necesitabamos.
Cualquier duda, consulta, nuevos temas, opiniones pueden escribirlo.
P.D. La información se comparte no se guarda.