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, 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) es una técnica de desarrollo web que permite realizar peticiones asíncronas sin necesidad de recargar toda la pagina, mejorando la interacción de usuario. Esto se logra mediante el uso de JavaScript y el objeto XMLHttpRequest para comunicarse con el servidor en segundo plano. 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.

Alerta importante el archivo a cargar debe estar en un servidor. No funciona con archivos locales.

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.

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

2. Obtener datos con $.post

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

3. Obtener datos con $.get

Cargue datos del servidor usando una solicitud HTTP GET.

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




4. Obtener datos con $.getJSON


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




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. 

  2. Definir el evento que disparar la acción. Lo mas simple un botón.
    3. 

  3. Crear el código de relación y definir las acciones necesarias.
    4. 




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




Se puede recurrir a los métodos.




Un ejemplo vale mas que 1000 palabras.



<Html>
<Head>
	<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
	<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" );
});




6. Referencias