Web.Ajax.

¿Qué es AJAX.?

Del acrónimo Asynchronous JavaScript And XML. No es un lenguaje de programación, es una forma distinta de trabajar con un servidor web.

Cuando usábamos la forma tradicional, es decir, con el método GET/POST de un formulario HTML, se enviaba información al servidor, éste la trataba y mostraba los resultados. ¿Y que ocurría después? Cargaba de nuevo la página para mostrar los resultados, de forma que se perdía la página principal para mostrar la respuesta del servidor.

Esto es lo que evita AJAX, es decir, permite enviar y mostrar resultados de un servidor sin necesidad de cargar de nuevo la página, así como también actualizar una página.

Vamos aprender AJAX pero desde JQuery, porque creo que es más fácil y la verdad, es el que yo aprendí:

$.ajax({
 url:’archivo.php’,
 data: {campo1:$(“selector”).val(),
 campo2:$(“selector”).val(),
 campo3:$(“selector”).val(),
 campo4:$(“selector”).val(),
 campo5:$(“selector”).val(),
 campo6:$(“selector”).val()},
type: ‘post/get’,
success: function (data){
 $(“selector”).html(data);
},
error: function(data){
 $(“selector”).html(data);}
});

• $.ajax(). Es la función principal para usar ajax para mandar los datos al servidor.
• url. Aquí se le indica el archivo php que vamos a llamar. Viene a ser algo así como el atributo action de un formulario HTML.
• data. Aquí se especifican los campos del formulario. Si hay más de uno se deben separar por comas.
• type. Aquí se especifica cómo vamos a enviar los datos, es decir, con get/post.
• success. Esto evento salta cuando todo ha ido bien y no ha ocurrido un error. Se crea una función con un parámetro data. Este parámetro puede llamarse como queramos, simplemente lo usamos para referirnos a los datos que devolverá el servidor. Ahora bien, podemos usar cualquier selector para que muestre los datos, por ejemplo un etiqueta div, p…etc. De esta forma separamos el resultado sin necesidad de recargar la página.
• error. Este evento salta cuando no ha ido bien las cosas y ha producido un error. Procederemos exactamente igual que en success.