Mostrar datos en linea

Como hemos explicado hasta ahora JavaScript es un lenguaje que se ejecuta en el cliente, pero normalmente hay que ejecutar la pagina completa, asi vimos por ejemplo que si usamos document.write() perdiamos todo el contenido de la pagina y nos quedabamos unicamente con lo que enviamos como parámetro de este método.

Ajax permite realizar peticiones asincronas sin necesidad de recargar toda la pagina, mejorando la interaccion de usuario. Ajax es una ampliacion del conjunto de herramientas que Microsoft introdujo en 1998 con su control ActiveX. En 2005 Google empezó a usar el JavaScript asincrono 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.

• Obtener contenido con jQuery - $.load()
• Obtener datos con $.post()
• Obtener datos con $.get()
• Obtener datos con $.getJSON()
• Obtener datos con $.ajax()

1. Obtener contenido con jQuery - $.load()

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.

$('#respuesta').load('fuente');

La fuente consta de 3 parámetros:

• URL: cadena que especifica el servidor.
• Parámetros: cadena/objeto/matriz, en pares nombre/valor.
• Callback: función opcional de devolución en caso de error.

Cuando los parámetros se envian en forma de cadena usa el metodo 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>

2. Obtener datos con $.post

$.post(url[,data][,success][,dataType]);

• url: Una cadena que contiene la URL a la que se envía la solicitud.
• data: Un objeto o cadena simple que se envía al servidor con la solicitud.
• success: Una función de retorno de llamada que se ejecuta si la solicitud se realiza correctamente. Se requiere si dataType se proporciona, pero puede ser null en ese caso.
• dataType: El tipo de datos esperados del servidor. Valor predeterminado: Adivinación inteligente (xml, json, script, texto, html).

$.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());

3. Obtener datos con $.get

Cargue datos del servidor usando una solicitud HTTP GET.

$.get(url[,data][,success][,dataType]);

• url: Una cadena que contiene la URL a la que se envía la solicitud.
• data: Un objeto o cadena simple que se envía al servidor con la solicitud.
• success: Una función de retorno de llamada que se ejecuta si la solicitud se realiza correctamente. Se requiere si dataType se proporciona, pero puede ser null en ese caso.
• dataType: El tipo de datos esperados del servidor. Valor predeterminado: Adivinación inteligente (xml, json, script, texto, html).

4. Obtener datos con $.getJSON

Cargue datos codificados con JSON desde el servidor utilizando una solicitud GET HTTP.

$.getJSON(url[,data][,success]);

• url: Una cadena que contiene la URL a la que se envía la solicitud.
• data: Un objeto o cadena simple que se envía al servidor con la solicitud.
• success: Una función de retorno de llamada que se ejecuta si la solicitud se realiza correctamente.

$.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 );
});

5. Obtener datos con $.ajax

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:

1. Definir donde actuaras con algún selector. Es mas simple es Id.
2. Definir el evento que disparar la acción. Lo mas simple un botón.
3. Crear el código de relación y definir las acciones necesarias.

$('algún selector').load('algún recurso')

Se puede recurrir a los métodos.

• ajaxStart()
• ajaxSend()
• ajaxSuccess()
• ajaxError()
• ajaxComplete()
• ajaxStop()

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

$("#feeds").load( "feeds.php", { limit: 25 }, function() {
   alert( "The last 25 entries in the feed have been loaded" );
});