Carga dinámica con la función ajax de jquery

 La función ajax() de jquery nos permite cargar contenido a la página web dinámicamente, para entenderlo mejor, a veces necesitamos cargar un determinado contenido a la página web sin tener que salir de ella, a esto se le llama dinamismo, una forma efeciente de rentabilizar y facilitar el trabajo. Para ello existe una función llamada ajax(), con la función load() también se puede hacer, pero la función ajax() tiene una serie de parámetros que la hacen más completa...

A continuación vamos a ver algunos tipos de parámetros que acepta la función ajax()...

async: Determina que la carga del objeto ajax sea síncrona o asíncrona. Por lo general asíncrona es más útil, ya que la forma síncrona puede trabar el navegador hasta que la carga este completa. Es del tipo de datos: Boolean: true por defecto.

beforeSend: Permite llamar una función antes de madar el objeto ajax. Función: el único parámetro es el objeto.

complete: es una función que se ejecuta cuando el llamado al ajax está completo. Permite saber si fue éxitoso. Los valores que retorna son el objeto XMLhttpRequest y un string que indica el resultado.

contentType: Se usa cuando se mandan datos a los servidores a modo de encabezado. String: "application/x-www-form-urlencode" funciona perfectamente.

data: Se usa para especificar datos a mandar. Estos tienen la siguiente forma: foo=bar&foo2=bar2; si los datos a enviar son un vector(array) Jquery los convierte a varios valores con un mismo nombre (si foo["alt1", "alt2"], foo="alt1"&foo="alt2";)

dataType: Indica el tipo de datos que se van a llama. Si no se especifica Jquery automáticamente encontrará el tipo basado en el header del archivo llamado (pero toma más tiempo en cargar, así que es conveniente especificarlo).
Tipos de datos que acepta dataType:
· "xml": Devuelve un documento xml.
· "html": Devuelve html con texto plano, y respeta las etiquetas.
· "script": Evalua el JavaScript y devuelve texto plano.
· "json": Evalua la respuesta JSON y devuelve un objeto JavaScript.

error: Se ejecuta si ocurre un error al llamar el archivo. Devuelve 3 parámetros: El objeto, un string con el error, y un objeto adicional si éste ocurre.

global: Permite hacer que el objeto ajax obedezca o desobedezca las reglas para objetos ajax que el usuario pone. Boolean: por defecto true.

ifModified: Permite que el objeto ajax se active solo si la página a cargar se ha modificado. Boolean: por defecto false.

processData: Por defecto, cada objeto que sea un string y sea pasado de otro documento, será transformado en cadena. Para evitar que esto pase, este parámetro se poner en false. Boolean: por defecto true.

success: Permite ejecutar código al ser exitoso un llamado. Función: Recibe los datos que fueron llamados.

timeout: Permite definir un tiempo de espera antes de ejecutar un objeto ajax. Número: un número de milisegundos.

type: Indica el método que se va a usar. "GET" o "POST".

url: Indica la url de la que se va a cargar datos el objeto ajax. String: la url local del documento.

En el siguiente ejemplo, os mostraré como enviar un formulario vía AJAX, este proceso facilitará las consultas necesarias a PHP, todo ello sin tener que refrescar la página cada vez que hay que hacer una consulta, por ejemplo, a una base de datos.

Para el ejemplo vamos a usar dos archivos, uno será un "index.php" que será la página principal y el que albergará el form para realizar las consultas, al otro lo he llamado "dame-datos.php", este archivo recibirá las variables del formulario, las analizará y devolverá un resultado u otro según su valor, todo ello como dije anteriormente sin necesidad de refrescar la página, es la gran ventaja de AJAX.

El archivo index.php contiene un formulario con un campo de texto en el cual se solicita que ingreses un nombre, y un botón para enviar el formulario a través del método POST, a demás de un div dónde se mostrará el resultado de la consulta AJAX.

El archivo dame-datos.php recibe el valor del campo nombre y posteriormente analizar si el nombre se encuentra dentro de un array con tres nombres, si se encuentra devuelve una respuesta positiva y negativa si no es encontrado.

El código del archivo index.php es el siguiente ...

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>   
$(function(){
 $("#btn_enviar").click(function(){
 var url = "dame-datos.php"; // the script where you handle the form input.
    $.ajax({
           type: "POST",
           url: url,
           data: $("#formulario").serialize(), // serializes the form's elements.
           success: function(data)
           {
               $("#respuesta").html(data); // show response from the php script.
           }
         });

    return false; // avoid to execute the actual submit of the form.
 });
});
</script>
</head>
<body>
<center>
<form method="post" id="formulario">
Al enviar el formulario vía ajax, consultaremos en el archivo dame-datos.php si el valor del campo nombre se 
encuentra en el array y la respuestas será positiva o negativa, según su valor.<br>
El Array contiene los siguientes nombres ... <b>antonio, pedro, alberto</b>
<br>
<table>
<tr>
<td>Introduce un nombre:</td><td><input type="text" name="nombre"></td>
<td></td><td><input type="button" id="btn_enviar" value="Buscar nombre"></td>
</tr>
</table>
</form>
<div id="respuesta">
</div>
</center>
</body>
</html>

El código del archivo dame-datos.php es el siguiente ...

<?php
$resultado = "";
$nombre = htmlspecialchars($_POST["nombre"]);
$array = array("antonio", "pedro", "alberto");
for ($x=0; $x<count($array); $x++)
{
if ($nombre == $array[$x])
{
$resultado = "El nombre ".$array[$x]." <b>SI</b> se encuentra en la base de datos<br><br>";
}
}
if($resultado == "")
{
echo "El nombre ".$nombre." <b>NO</b> se encuentra en la base de datos<br><br>";
}
else
{
echo $resultado;
}
?>

Ajax Form

Ajax Form

Keywords: ajax, submit form, enviar formulario, ajax, jquery, la función ajax, código ajax, respuesta ajax, consulta ajax, ejemplo ajax form, jquery ejemplo.