Iniciar sesión

Php ajax

Rodrigo

Traducido por Rodrigo

Creado 2014-06-26 07:26:16 Modificado 2015-06-09 10:46:04

Asynchronous JavaScript and XML (AJAX) es una técnica muy útil, para enviar y/o recuperar datos a través de "post" o "get" sin recargar la página completa de nuevo, la idea principal es recuperar o enviar datos a la base de datos, no tiene sentido si usamos ajax sin recibir o enviar datos a la base de datos, en ese caso javascript/jquery sería la mejor opción

En este tutorial vamos a desarrollar un formulario php muy básico con 3 selects y vamos a ver la diferencia entre un request normal y un request ajax, filtrando con un request normal y un request ajax

este tutorial fue escrito usando el siguiente equipo:

  • Hardware:           laptop Thinkpad E430 Intel I5, 4gb Ram, 500gb HDD
  • SO:                     x86_64 GNU/Linux Ubuntu 14.10
  • Kernel:                3.13.0-29-generic
  • IDE/Text editor:   Gedit 3.10.4
  • PHP:                    PHP 5.4.16 (cli) (built: Jun 24 2013 12:08:02) 
  • BD:                      Mysql 5.5.31
  • Cliente Mysql:      PhpMyadmin 4.0.4.1
  • Navegador:         Chromium Version 34.0.1847.116 Ubuntu 14.04 aura (260972)

 

1.- Creando la BD:

Primero necesitamos una base de datos para recuperar los datos mostrados en los comboboxes, tomemos el siguiente script y ejecutémoslo en mysql

CREATE database ajaxExample;
USE ajaxExample;

CREATE TABLE categories(
	id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
	name VARCHAR(45) NOT NULL
);

CREATE TABLE sub_categories(
	id INT NOT NULL PRIMARY KEY AUTO_INCREMENT ,
	category_id INT NOT NULL ,
	FOREIGN KEY ( category_id ) REFERENCES categories( id ) ON DELETE CASCADE ON UPDATE CASCADE ,
	name VARCHAR( 45 ) NOT NULL
);

INSERT INTO categories(name)VALUES('Programming');
INSERT INTO categories(name)VALUES('Database');
INSERT INTO categories(name)VALUES('UML');

INSERT INTO sub_categories(category_id,name)VALUES(1,'Java');
INSERT INTO sub_categories(category_id,name)VALUES(1,'Csharp');
INSERT INTO sub_categories(category_id,name)VALUES(1,'php');

INSERT INTO sub_categories(category_id,name)VALUES(2,'MSQL');
INSERT INTO sub_categories(category_id,name)VALUES(2,'PLSQL');
INSERT INTO sub_categories(category_id,name)VALUES(2,'MYSQL');

INSERT INTO sub_categories(category_id,name)VALUES(3,'Use Case Diagram');
INSERT INTO sub_categories(category_id,name)VALUES(3,'Sequence diagram');
INSERT INTO sub_categories(category_id,name)VALUES(3,'Class diagram');

2.- Creando la página index:

muy bien una vez creada la base de datos podemos crear nuestro index.php el cual usará los datos anteriores

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ejemplo de ajax</title>
<link href="http://www.joni2back.com/favicon.ico" rel="shortcut icon" />
<script type="text/javascript" src="jquery-2.0.3.js"></script>
<script type="text/javascript" src="jquery-migrate.js"></script>
<script>
$(document).ready(function(){
    var url;
    url='ajax.php';//this url
    
    
    $('#category_select').change(function() {
        buscaDatosAjax($('#category_select').val(),url);
        
    });	
    
    
    function buscaDatosAjax(object,url){    
    	
                var parametros = {
                        "category" : object
                };
                $.ajax({
                        data:  parametros,
                        url:    url,
                        type:  'post',
                        beforeSend: function () {
                            $("#sub_category_select").html("<option value='...'>...</option>");
                        },
                        success:  function (response) {
                            $("#sub_category_select").html(response);
							$("#h1req").html("Ajax request");
                        }
                });
        }    
});//fin jquery
</script>
</head>
<body>


<form method="post">
<?php 
	if (!empty($_POST))
		echo "<h1 id='h1req'>Normal request</h1>";
	else
		echo"<h1>Ajax example<h1>";
?>

	<table>
	<tr>
		<th>category Ajax</th> <th>category normal</th> <th>sub category</th>
	</tr>
	<tr>
		<td>
			<select id="category_select" name="category">
			<option value=0>All</option>
				<?php 
					mysql_connect("127.0.0.1","root","root");
					mysql_select_db("ajaxExample");					
					$data = "SELECT id, name FROM categories";
					$result = mysql_query($data);
					while($data = mysql_fetch_array($result))
					if (!empty($_POST) && $_POST['category']==$data['id'])	
						echo("<option value=".$data['id']." selected='selected'>".$data['name']."</option>");
					else
						echo("<option value=".$data['id'].">".$data['name']."</option>");

				?>				
			</select>
		</td>
		<td>
			<select id="category_select_normal" name="category">
			<option value=0>All</option>
				<?php 
					mysql_connect("127.0.0.1","root","root");
					mysql_select_db("ajaxExample");					
					$data = "SELECT id, name FROM categories";
					$result = mysql_query($data);
					while($data = mysql_fetch_array($result))
					if (!empty($_POST) && $_POST['category']==$data['id'])	
						echo("<option value=".$data['id']." selected='selected'>".$data['name']."</option>");
					else
						echo("<option value=".$data['id'].">".$data['name']."</option>");

				?>				
			</select>
		</td>
		<td>
			<select id="sub_category_select" name="sub_category">
				<?php					
					mysql_connect("127.0.0.1","root","root");
					mysql_select_db("ajaxExample");
					
					if (!empty($_POST) && $_POST['category']!=0)//cuando sea post y distinto de 0; when it's post and non 0;
						$data = "SELECT sub_categories.id, sub_categories.name FROM sub_categories INNER JOIN categories ON sub_categories.category_id = categories.id WHERE categories.id=".$_POST['category'];
					else//sin filtro; without filter
						$data = "SELECT id, name FROM sub_categories";

					$result = mysql_query($data);
					while($data = mysql_fetch_array($result)){
					  echo("<option value=".$data['id'].">".$data['name']."</option>");
					}

				?>				
			</select>
		</td>
	</tr>
	</table>
	<input type="submit" value="submit"/>
</form>
</body>
</html>

3.- Creando la página AJAX:

bien, entonces ahora vamos  a crear una página php la cual retorna (echo) html plano, entonces vamos a tomar el html obtenido e inyectarlo en la página principal, en este caso vamos a obtener datos, para filtrar el combobox próximo, 1:n; 2 comboboxes, un típico problema web, cuando no sabes como refrescar el combobox "n" sin recargar la página completa, vamos a crear la página "AJAX"

<?php					
	mysql_connect("127.0.0.1","root","root");
	mysql_select_db("ajaxExample");
	
	if (!empty($_POST) && $_POST['category']!=0)//cuando sea post y distinto de 0; when it's post and non 0;
		$data = "SELECT sub_categories.id, sub_categories.name FROM sub_categories INNER JOIN categories ON sub_categories.category_id = categories.id WHERE categories.id=".$_POST['category'];
	else//sin filtro; without filter
		$data = "SELECT id, name FROM sub_categories";

	$result = mysql_query($data);
	while($data = mysql_fetch_array($result)){
	  echo("<option value=".$data['id'].">".$data['name']."</option>");
	}

?>

4.- Observando los requests:

Hasta este punto hemos terminado, hechemos un vistazo al request AJAX; no vamos a preocuparnos por el request normal, este es un tutorial de AJAX, bien entonces habilitemos el log de "AJAX", presionamos f12 en google-chrome (chromium) y clicamos la tuerca pequeña

luego encontremos el checkbox "log XmlhttpRequests"  y lo habilitamos

ahora ve a "console", y cambia el "category ajax" combobox

verás ahora los detalles de los requests AJAX en el log de la consola

si le haces clic vas a ver los detalles de network

luego haz clic en los detalles de network "ajax.php" y verás el detalle en completo, por ejemplo hagamos clic en "Response" y esto es muy úitil cuando tienes un error, o los datos retornados no son correctos.

 

Descárgalo en https://docs.google.com/file/d/0BwOqSob-RrBOYW9HQ3VwRFUzWU0/edit?pli=1

5.- Conclusión:

AJAX no es un lenguaje, es una técnica para manejar datos en la web, ajax se puede usar con cualquier otro lenguaje de servidor (Java, Ruby, Python, C#, etc...) incluso sin un lenguaje de servidor lo cual es muy inútil, en ese caso javascript/jquery será la respuesta

6.- Links de referencias:




comments powered by Disqus