Categoria: Programacion Tema: Java script - Java Titulo: Funcion ajax en jQuery
Fecha del Tema: 2013-04-18 21:55:24$.ajax Hasta ahora hemos visto que jQuery nos provee varias formas de recuperar y enviar datos al servidor utilizando ajax: Método loadFunciones $.get y $.post$.getJSON Existe otra función llamada $.ajax que es la más completa de todas, pero como desventaja es más compleja su empleo. La sintaxis de la función $.ajax es: ajax([objeto literal]) Retorna un objeto XMLHttpRequest que podemos eventualmente utilizarlo. Con un ejemplo veremos las propiedades principales que podemos configurar en el parámetro a enviar. Problema:Implementar una aplicación que calcule el cuadrado de un número que ingresamos por teclado. La operación se realiza en el servidor, le enviamos los datos mediante la función de jQuery $.ajax pagina1.html <?php //esto no va <html> <head> <title>Problema</title> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> <form action="pagina1.php" method="post" id="formulario"> Ingrese nro:<input type="text" name="nro" id="nro" size="10"><br> <input type="submit" value="Calcular el cuadrado" id="enviar"> <div id="resultados"></div> </form> </body> </html> ?>//esto no va funciones.js <?php //esto no va var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x; x=$("#enviar"); x.click(presionSubmit); } function presionSubmit() { var v=$("#nro").attr("value"); $.ajax({ async:true, type: "POST", dataType: "html", contentType: "application/x-www-form-urlencoded", url:"pagina1.php", data:"numero="+v, beforeSend:inicioEnvio, success:llegadaDatos, timeout:4000, error:problemas }); return false; } function inicioEnvio() { var x=$("#resultados"); x.html(`<img src="../cargando.gif">`); } function llegadaDatos(datos) { $("#resultados").text(datos); } function problemas() { $("#resultados").text(`Problemas en el servidor.`); } ?>//esto no va pagina1.php <?php $cuadrado=$_REQUEST[`numero`]*$_REQUEST[`numero`]; echo $cuadrado; ?> Veamos que datos podemos enviarle a la función $.ajax: <?php //esto no va function presionSubmit() { var v=$("#nro").attr("value"); $.ajax({ async:true, type: "POST", dataType: "html", contentType: "application/x-www-form-urlencoded", url:"pagina1.php", data:"numero="+v, beforeSend:inicioEnvio, success:llegadaDatos, timeout:4000, error:problemas }); return false; } ?>//esto no va Hemos inicializado las siguientes propiedades: â?¢ async : Indica si la comunicación será asincrónica (true) o sincrónica (false) â?¢ type : Indica el método que se envÃan los datos (pudiendo ser GET o POST) â?¢ dataType : Indica el tipo de datos que se va a recuperar (pudiendo ser "html","xml","json","script") â?¢ contentType : Indicamos como se empaquetan los datos para enviarlos al servidor (normalmente "application/x-www-form-urlencoded") â?¢ url : Indicamos el nombre de la página que procesará la petición de datos. â?¢ data : Indicamos los datos a enviar al servidor. â?¢ beforeSend : Indicamos el nombre de la función que se ejecutará previo al envÃo de datos (en nuestro ejemplo mostramos el gif animado que indica que se inició el pedido de datos al servidor) â?¢ success : Indicamos la función que se ejecuta cuando finalizó el envÃo de datos del servidor y además ocurrió todo en forma correcta (en nuestro ejemplo recuperamos el dato devuelto y lo mostramos en la página) â?¢ timeout : El tiempo máximo a esperar por la petición de datos. â?¢ error : El nombre de la función que se ejecuta si los datos no llegan del servidor.
$.ajax Hasta ahora hemos visto que jQuery nos provee varias formas de recuperar y enviar datos al servidor utilizando ajax: Método loadFunciones $.get y $.post$.getJSON Existe otra función llamada $.ajax que es la más completa de todas, pero como desventaja es más compleja su empleo. La sintaxis de la función $.ajax es: ajax([objeto literal]) Retorna un objeto XMLHttpRequest que podemos eventualmente utilizarlo. Con un ejemplo veremos las propiedades principales que podemos configurar en el parámetro a enviar. Problema:Implementar una aplicación que calcule el cuadrado de un número que ingresamos por teclado. La operación se realiza en el servidor, le enviamos los datos mediante la función de jQuery $.ajax pagina1.html <?php //esto no va <html> <head> <title>Problema</title> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> <form action="pagina1.php" method="post" id="formulario"> Ingrese nro:<input type="text" name="nro" id="nro" size="10"><br> <input type="submit" value="Calcular el cuadrado" id="enviar"> <div id="resultados"></div> </form> </body> </html> ?>//esto no va funciones.js <?php //esto no va var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x; x=$("#enviar"); x.click(presionSubmit); } function presionSubmit() { var v=$("#nro").attr("value"); $.ajax({ async:true, type: "POST", dataType: "html", contentType: "application/x-www-form-urlencoded", url:"pagina1.php", data:"numero="+v, beforeSend:inicioEnvio, success:llegadaDatos, timeout:4000, error:problemas }); return false; } function inicioEnvio() { var x=$("#resultados"); x.html(`<img src="../cargando.gif">`); } function llegadaDatos(datos) { $("#resultados").text(datos); } function problemas() { $("#resultados").text(`Problemas en el servidor.`); } ?>//esto no va pagina1.php <?php $cuadrado=$_REQUEST[`numero`]*$_REQUEST[`numero`]; echo $cuadrado; ?> Veamos que datos podemos enviarle a la función $.ajax: <?php //esto no va function presionSubmit() { var v=$("#nro").attr("value"); $.ajax({ async:true, type: "POST", dataType: "html", contentType: "application/x-www-form-urlencoded", url:"pagina1.php", data:"numero="+v, beforeSend:inicioEnvio, success:llegadaDatos, timeout:4000, error:problemas }); return false; } ?>//esto no va Hemos inicializado las siguientes propiedades: â?¢ async : Indica si la comunicación será asincrónica (true) o sincrónica (false) â?¢ type : Indica el método que se envÃan los datos (pudiendo ser GET o POST) â?¢ dataType : Indica el tipo de datos que se va a recuperar (pudiendo ser "html","xml","json","script") â?¢ contentType : Indicamos como se empaquetan los datos para enviarlos al servidor (normalmente "application/x-www-form-urlencoded") â?¢ url : Indicamos el nombre de la página que procesará la petición de datos. â?¢ data : Indicamos los datos a enviar al servidor. â?¢ beforeSend : Indicamos el nombre de la función que se ejecutará previo al envÃo de datos (en nuestro ejemplo mostramos el gif animado que indica que se inició el pedido de datos al servidor) â?¢ success : Indicamos la función que se ejecuta cuando finalizó el envÃo de datos del servidor y además ocurrió todo en forma correcta (en nuestro ejemplo recuperamos el dato devuelto y lo mostramos en la página) â?¢ timeout : El tiempo máximo a esperar por la petición de datos. â?¢ error : El nombre de la función que se ejecuta si los datos no llegan del servidor.
