Como hemos explicado hasta ahora JavaScript es un lenguaje que se ejecuta en el cliente, pero normalmente hay que ejecutar la pagina completa, así vimos por ejemplo que si usamos document.write() perdíamos todo el contenido de la pagina y nos quedábamos unicamente con lo que enviamos como parámetro de este método.
Ajax (Asynchronous JavaScript and XML) permite realizar peticiones asíncronas sin necesidad de recargar toda la pagina, mejorando la interacción de usuario. Ajax es una ampliación del conjunto de herramientas que Microsoft introdujo en 1998 con su control ActiveX. En 2005 Google empezó a usar el JavaScript asíncrono y XML.
var xhr;
if (window.ActiveXObjet){
xhr = new ActiveXObject("Microdoft.XMLHTTP");
}else if (window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
throw new Error("Ajax no es soportado en este navegador");
}
Lamentablemente cada navegador implemento a su manera el Ajax por lo que es casi obligatorio hoy en dia usar jQuery para implementarlo. No todos los navegadores soportan el objeto XMLHttpRequest.
La idea es bastante simple, abrir la fuente que es el contenido del recurso del lado del servidor (por ejemplo PHP) y poner su resultado en algún contenedor predefinido en la pagina inicial.
$('#respuesta').load('fuente');
La fuente consta de 3 parámetros:
Si el selector no coincide con ningún elemento, es decir el documento no contiene un elemento con id=respuesta, no se enviará la solicitud de Ajax.
Cuando los parámetros se envían en forma de cadena usa el método HTTP Post y si usas un objeto o matriz se usa HTTP Get.
<Button id=pon></Button>
<div id=resp></div>
<Script>
$(document).on('click','#pon',function(){
$('#resp').load('prueba.php');
});
</Script>
Otro ejemplo:
$('#res').load('test.htm', function() {
alert('La carga se efectuo.');
});
Envía datos al servidor mediante una solicitud HTTP POST.
$.post(url[,data][,success][,dataType]);
$.post("ajax/test.html",function(data) {
$(".result").html(data);
});
$.post("test.php", function(data) {
alert("Data Loaded: " + data);
});
$.post("test.php");
$.post("test.php",{name: "Juan",time: "2pm"});
$.post("test.php",{'choices[]': [ "Jon", "Susan" ]});
$.post("test.php", $("#testform").serialize());
Cargue datos del servidor usando una solicitud HTTP GET.
$.get(url[,data][,success][,dataType]);
Cargue datos codificados con JSON desde el servidor utilizando una solicitud GET HTTP.
$.getJSON(url[,data][,success]);
$.getJSON( "test.js", { name: "John", time: "2pm" } )
.done(function( json ) {
console.log( "JSON Data: " + json.users[ 3 ].name );
})
.fail(function( jqxhr, textStatus, error ) {
var err = textStatus + ", " + error;
console.log( "Request Failed: " + err );
});
Acrónimo de Asynchronous JavaScript And XML, es una técnica de desarrollo web para crear aplicaciones interactivas, es decir que se ejecutan en el navegador cliente mientras se mantiene la comunicación asíncrona con el servidor en segundo plano, de esta forma que es posible realizar cambios sobre partes de la página web sin necesidad de recargarla, mejorando la interactividad, velocidad y usabilidad en las aplicaciones.
Ajax es una tecnología asíncrona, es decir que los datos adicionales se solicitan al servidor y se cargan en segundo plano sin interferir con la visualización ni el comportamiento de la página.
jQuery hace tan fácil usar AJAX que mas demora explicarlo que entenderlo. Solo se requiere tres pasos:
$('algún selector').load('algún recurso')
Se puede recurrir a los métodos.
Un ejemplo vale mas que 1000 palabras.
<Html>
<Head>
<Script>
$(document).ready(function() {
$(document).on('click','.linea',function(){
var x = 'gl_ck.php?tabla=gasto&camp=' + $(event.target).attr('name') + '&val=' + $(event.target).val() + '&mov=' + $(event.target).attr('mov');
//alert(x);
$('#res').load(x);
});
});
</Script>
</head>
<Body>
<div id=res>Aqui cae la respuesta.</div>
</Body>
</Html>
Otro ejemplo
$("#respuesta").load( "feeds.php", { limit: 25 }, function() {
alert( "The last 25 entries in the feed have been loaded" );
});