AJAX es un acronimo que significa Asynchronous JavaScript and XML y esta tecnologia nos ayuda a cargar datos desde el servidor sin una actualizacion de la pagina del navegador.
jQuery es una gran herramienta que proporciona un rico conjunto de metodos AJAX para desarrollar aplicaciones web.
Cargando datos simples
Es muy facil cargar todos los datos estaticos o dinamicos utilizando AJAX en jQuery. jQuery proporciona el metodo load() para hacer esto - sintaxis:
[selector].load(URL,[data],[callback]);
Aqui esta la descripcion de todos los parametros:
URL - La URL del recurso del lado del servidor al que se envia la solicitud. Podria ser un CGI, ASP, JSP, PHP o script que genera datos de forma dinamica o fuera de una base de datos.
data - Este parametro opcional representa un objeto cuyas propiedades son serializadas en parametros adecuadamente codificadas para ser pasado a la peticion. Si se especifica, la solicitud se realiza mediante el metodo POST. Si se omite, se utiliza el metodo GET.
callback - Una funcion callback se invoca despues de que los datos de respuesta se han cargado en el conjunto de elementos. El primer parametro pasado a esta funcion es el texto de respuesta recibido desde el servidor y el segundo parametro es el codigo de estado.
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#driver").click(function(event){
$('#stage').load('archivos/resultado.html')
})
});
</script>
</head>
<body>
<p>De clic en el boton cargar para leer el archivo /archivos/resultado.html</p>
<div id="stage" style="background-color:#cc0;">Escenario</div>
<input type="button" id="driver" value="Cargar datos" />
</body>
</html>
Aqui load() inicia una peticion AJAX al archivo archivos/resultado.html especificado. Despues de cargar este archivo, todo el contenido es rellena en el interior del <div> con el id="stage", suponiendo que nuestro archivo HTML tiene una sola linea:
<h1>Este es el resultado</h1>
Obtener datos JSON
Habria una situacion en la que el servidor devolveria una cadena JSON en su peticion. jQuery tiene una funcion de utilidad getJSON() analiza la cadena JSON devuelta y hace que la cadena resultante este disponible para ser llamada en la funcion como primer parametro para tomar nuevas medidas. Sintaxis: Esta el la sencilla sintaxis del metodo getJSON():
[selector].getJSON(URL,[data],[callback]);
Aqui esta la descripcion de todos los parametros:
URL - La URL del recurso del lado del servidor en contacto a traves del metodo GET.
data - Un objeto cuyas propiedades sirven como pares nombre/valor se utilizan para la construccion de una cadena de consulta que se adjunta en la direccion URL, o una cadena de consulta con formato preformateada y codificada.
callback - Una funcion se invoca cuando la solicitud es completada. El valor de los datos resultantes de la digestion del cuerpo de la respuesta como una cadena JSON es pasada como primer parametro a esta devolucion de llamada y el estado de respuesta como segundo. Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#driver").click(function(event){
$.getJSON('archivos/resultado.json',function(jd){
$('#stage').html('<p>Nombre: ' + jd.name + '</p>');
$('#stage').append('<p>Edad: ' + jd.age + '</p>');
$('#stage').append('<p>Sexo: ' + jd.sex + '</p>');
})
})
});
</script>
</head>
<body>
<p>De clic en el boton cargar para leer el archivo /archivos/resultado.json</p>
<div id="stage" style="background-color:#cc0;">Escenario</div>
<input type="button" id="driver" value="Cargar datos" />
</body>
</html>
Aqui el metodo de utilidad getJSON() inicia una peticion AJAX al archivo resultado.json especificado. Despues de cargar este archivo, todo el contenido se pasa a la funcion callback que finalmente se rellena en el interior del <div> con el id="stage". Suponiendo que nuestro archivo resultado.json contiene lo siguiente:
{
"name": "arthusu",
"age" : "21",
"sex": "Masculino"
}
Pasar los datos al servidor
Muchas veces se recogen el usuario y contraseña que se pasan al servidor para su posterior procesamiento. Usando jQuery AJAX hace que sea demasiado facil pasar los datos recogidos en el servidor usando el parametro data de cualquier metodo AJAX disponible. Ejemplo: Este ejemplo demuestra como a traves de un input se ingresa el nombre de usuario y es enviado a un script del servidor web que envia el resultado de regreso y es impreso.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#driver").click(function(event){
var name = $("#name").val();
$("#stage").load('archivos/resultado.php',{"name":name});
})
});
</script>
</head>
<body>
<p>Escriba su nombre y de clic en el boton:</p>
<input type="text" id="name" size="40" /><br />
<div id="stage" style="background-color:#cc0;">
Etapa:
</div>
<input type="button" id="driver" value="Mostrar Resultado" />
</body>
</html>
Aqui esta el codigo escrito en resultado.php:
<?php
if($_REQUEST['name']){
$name = $_REQUEST['name'];
echo "Bievenido " . $name;
}
?>
Ahora puede introducir cualquier texto en el campo de entrada dado y luego hacer clic en el boton "Mostrar Resultado" para ver lo que se ha introducido en el campo de entrada.
Metodos jQuery AJAX
Ustedes han visto el concepto basico de AJAX usando jQuery. La siguiente tabla abajo enumera todos los metodos importantes jQuery AJAX que se puede utilizar en funcion de su necesidad de programacion.
+-------------------------------------------+--------------------------------------------------------------------------------------+ | Metodos | Descripcion | +-------------------------------------------+--------------------------------------------------------------------------------------+ | jQuery.ajax(options) | Carga una pagina remota mediante una peticion HTTP. | +-------------------------------------------+--------------------------------------------------------------------------------------+ | jQuery.ajaxSetup(options) | Ajusta las peticiones globales de peticiones AJAX. | +-------------------------------------------+--------------------------------------------------------------------------------------+ | jQuery.get(url,[data],[callback],[type]) | Carga una pagina remota mediante una peticion HTTP GET. | +-------------------------------------------+--------------------------------------------------------------------------------------+ | jQuery.getJSON(url,[data],[callback]) | Carga datos JSON utilizando una peticion HTTP GET. | +-------------------------------------------+--------------------------------------------------------------------------------------+ | jQuery.getScript(url,[callback]) | Carga y ejecuta un archivo javascript utilizando una peticion HTTP GET. | +-------------------------------------------+--------------------------------------------------------------------------------------+ | jQuery.post(url,[data],[callback],[type]) | Carga una pagina remota mediante una solicitud HTTP POST. | +-------------------------------------------+--------------------------------------------------------------------------------------+ | load(url,[data],[callback]) | Carga el HTML desde un archivo remoto y lo inyecta dentro del DOM. | +-------------------------------------------+--------------------------------------------------------------------------------------+ | serialize() | Serializa un conjunto de elementos de entrada en una cadena de datos. | +-------------------------------------------+--------------------------------------------------------------------------------------+ | serializeArray() | Serializa todos los formularios y elementos del forumario como el metodo serialize() | | | pero devuelve una estructura de datos JSON para que trabaje con ellos. | +-------------------------------------------+--------------------------------------------------------------------------------------+
Eventos de jQuery AJAX
Puede llamar a varios metodos de jQuery durante el ciclo de vida de progreso de llamada AJAX. Basado en diferentes eventos/etapas, los siguientes metodos estan disponibles:
+------------------------+----------------------------------------------------------------------------------------------------+ | Metodo | Descripcion | +------------------------+----------------------------------------------------------------------------------------------------+ | ajaxComplete(callback) | Fija una funcion para ejecutarse cada vez que se finalize una peticion AJAX. | +------------------------+----------------------------------------------------------------------------------------------------+ | ajaxStart(callback) | Fija una funcion para ejecutarse cada vez que inicia una peticion AJAX y no hay ya ninguno activo. | +------------------------+----------------------------------------------------------------------------------------------------+ | ajaxError(callback) | Fija una funcion a ejecutar cuando falla una peticion AJAX. | +------------------------+----------------------------------------------------------------------------------------------------+ | ajaxSend(callback) | Fija una funcion para ser ejecutada antes de enviar una peticion AJAX. | +------------------------+----------------------------------------------------------------------------------------------------+ | ajaxStop(callback) | Fija una funcion que se ejecuta cada vez que han terminado todas las peticiones AJAX. | +------------------------+----------------------------------------------------------------------------------------------------+ | ajaxSuccess(callback) | Fija una funcion para ejecutarse cada vez que una peticion AJAX finaliza correctamente. | +------------------------+----------------------------------------------------------------------------------------------------+
Este texto fue sacado desde tutorialspoint solo es una traduccion, espero que les sea de utilidad.
