Jquery AJAX es el soporte del framework Javascript para procesamiento asíncrono de peticiones al servidor de la web.
Se utiliza para la creación de páginas web dinámicas, Estas aplicaciones o paginas web se ejecutan en el cliente, el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano, de esta manera se puede hacer una petición al servidor procesarla y recibir la información procesada sin que el usuario cambie de pagina o deba refresca, ademas es transparente para el usuario, ya que no ve a que pagina se realizo la petición.
Vamos crear una función para desde un formulario web consultar una base de datos
Creamos una web con un formulario que denominaremos index.html
El resultado sera un formulario html con los campos que se detallan, luego la función infoclientes() la creamos luego.
Creamos ahora la base de datos Clientes que utilizaremos de ejemplo para consultar:
Insertamos algunos datos en la base de datos:
Creamos ahora un archivo clientes.php para consultar por nombre y que nos devuelva la ciudad, se podría consultar por cualquier otro campo o varios que se introduzcan en el formulario.
La función Ajax ahora que necesitamos para que desde el formulario podamos invocar el archivo php y realizar la petición al servidor. En el <head> creamos la función infoclientes() que habíamos dejado pendiente.
Al ejecutar la web index.html podemos escribí el campo nombre y dar un clic en consultar esto nos trae el resultado que se almacena en el div info y en la caja de texto; sin haber refrescado la pagina.
Si tenemos Firebug podemos ver las peticiones, cuanto tardan, que parámetros se utilizaron y cual fue la respuesta del servidor, en este caso esta consulta tomo 30 milésimas de segundo en ejecutarse en el servidor y mostrarse nuevamente en el navegador.
El uso de jquery y ajax permite mejorar la usabilidad de la aplicación se obtiene mayor velocidad, esto debido que no hay que retornar toda la página nuevamente y hacer esperar al usuario.
Se puede consultar información y mostrarla de diferentes maneras según se necesite.
Se utiliza para la creación de páginas web dinámicas, Estas aplicaciones o paginas web se ejecutan en el cliente, el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano, de esta manera se puede hacer una petición al servidor procesarla y recibir la información procesada sin que el usuario cambie de pagina o deba refresca, ademas es transparente para el usuario, ya que no ve a que pagina se realizo la petición.
Vamos crear una función para desde un formulario web consultar una base de datos
Creamos una web con un formulario que denominaremos index.html
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<table>
<tr>
<td>Nombre:</td>
<td><input type="text" name="nombre" id="nombre" /><td>
</tr>
<tr>
<td>Ciudad:</td>
<td><input type="text" name="ciudad" id="ciudad" /><td>
</tr>
<tr>
<td></td>
<td>
<input type="button" name="submit" id="submit" value="Consulta" onclick = "infoclientes()" />
</td>
</tr>
</table>
<div id="info"></div>
</body>
</html>
El resultado sera un formulario html con los campos que se detallan, luego la función infoclientes() la creamos luego.
Creamos ahora la base de datos Clientes que utilizaremos de ejemplo para consultar:
CREATE TABLE `clientes`.`clientes` ( `id` INT( 10 ) NOT NULL AUTO_INCREMENT , `nombre` VARCHAR( 255 ) NOT NULL , `ciudad` VARCHAR( 255 ) NOT NULL , PRIMARY KEY ( `id` ) ) ENGINE = INNODB;
Insertamos algunos datos en la base de datos:
Creamos ahora un archivo clientes.php para consultar por nombre y que nos devuelva la ciudad, se podría consultar por cualquier otro campo o varios que se introduzcan en el formulario.
<?php
$nombre = $_POST['nombre'];
$con = mysql_connect("localhost", "root", "");
$db = mysql_select_db("clientes", $con);
$sql = "SELECT ciudad from clientes where nombre like '" . $nomcli . "'";
$rs = mysql_query($sql, $con);
$row = mysql_fetch_array($rs);
echo $row['ciudad'];
?>
La función Ajax ahora que necesitamos para que desde el formulario podamos invocar el archivo php y realizar la petición al servidor. En el <head> creamos la función infoclientes() que habíamos dejado pendiente.
<script>
function infoclientes(){
var nombre = $('#nombre').val(); // campo del formulario que voy a consultar
$.ajax({ // incio petición
type: "POST", //Cuando se haya enviado un formulario
url: "clientes ..php", //se invoca el archivo infoclientes.php
data: {nomcli:nombre} //asigno el campo a la variable de peticion sql
}).done(function( result ) { //recibo el resulta
$("#info").html( " La ciudad es "+result );
$("#ciudad").val(result );
});
}
</script>
Al ejecutar la web index.html podemos escribí el campo nombre y dar un clic en consultar esto nos trae el resultado que se almacena en el div info y en la caja de texto; sin haber refrescado la pagina.
Si tenemos Firebug podemos ver las peticiones, cuanto tardan, que parámetros se utilizaron y cual fue la respuesta del servidor, en este caso esta consulta tomo 30 milésimas de segundo en ejecutarse en el servidor y mostrarse nuevamente en el navegador.
El uso de jquery y ajax permite mejorar la usabilidad de la aplicación se obtiene mayor velocidad, esto debido que no hay que retornar toda la página nuevamente y hacer esperar al usuario.
Se puede consultar información y mostrarla de diferentes maneras según se necesite.
