Métodos mágicos II – PHP 5 Orientado a objetos

En esta segunda entrega de los métodos mágicos de PHP os voy a comentar dos nuevos métodos que se han agregado a la versión 5 de PHP para trabajar con clases.

Los métodos de los que os voy a hablar son el __clone(), un método que sería el equivalente al constructor de copia de la Programación orientada a objetos de toda la vida, y el __get() y __set().

Empecemos por el __clone(). Este método realiza las funciones del constructor de copia de toda la vida. Hace una copia exacta del objeto. Si nuestro objeto tiene referencias a otros objetos también los copia.

Por otro lado, todos los que hemos programado orientado a objetos tenemos claro el tema del ámbito de los atributos y métodos. Sabemos que si el atributo es privado sólo se puede acceder a él desde dentro de la clase y desde fuera solo se puede acceder a su información a través de los métodos accesores y selectores (get y set).

Los métodos __get() y __set() nos lo ponen bien fácil. Si no existieran estos métodos genéricos, deberíamos definir un get y un set para cada uno de los atributos.

Aquí tenéis un ejemplo de como se programarían estos métodos:

class Rectangulo{
	private $ancho;
	private $alto;

	function __clone(){
		$this->ancho = clone $this->ancho;
		$this->alto = clone $this->alto;
	}

	function __get($value){
		return $this->$value;
	}

	function __set($value, $param){
		if(is_numeric($param)){
			$this->$value = $param;
		}
	}
}

Escuchando... Rod Stewart and the faces -- Maggie May
[kml_flashembed movie="http://www.youtube.com/v/xikQ0c5KdZE" width="425" height="350" wmode="transparent" /]

Métodos mágicos I - PHP 5 Orientado a objetos

Hola amigos ya estoy por aquí de nuevo. En esta ocasión y dado que estoy metido en unos asuntos en este momento que tratan sobre la programación orientada a objetos en php, os voy a comentar una serie de métodos llamados mágicos que se han introducido en la versión 5 de php.

A partir de la versión 5 de php se han introducido mejoras que facilitan la encapsulación de los objetos y así lo aproximan más a la POO.

Lo primero que cabe destacar es que tanto los métodos como los atributos pueden ser de tres tipos.

private: Sólo son accesibles los métodos de la clase.

protected: Sólo son accesibles desde los métodos de la clase y de clases derivadas.

public: Se pueden acceder a ellos desde fuera de los métodos de la clase.

El primer método "mágico" que voy a explicar es el constructor. En php 4 por convención se solía usar como constructor un método que tenía el mismo nombre que la clase. PHP 5 nos introduce el método __construct(), aquí tenéis un ejemplo.

<?php
	class Rectangulo{
		private $ancho;
		private $largo;
		function __construct($pAncho, $pLargo){
			$this->ancho = $pAncho;
			$this->largo = $pLargo;
		}
	}
?>

El siguiente método que voy a explicar es __toString(). Gracias a este método podemos sacar por pantalla un objeto como si fuera un string.

Vamos a ver un ejemplo.

function __toString(){
        	$retorno = 'Las dimensiones del rectángulo son:
			('.$this->ancho.' x '.$this->largo.')<br />';
        	$retorno.= 'El &Aacute;rea es: '. $this->ancho * $this->largo;
        	return $retorno;
		}

La llamada a estos métodos sería:

$rect = new Rectangulo (10,10);
echo $rect;

Escuchando ... Colorblind -- Counting Crows
[kml_flashembed movie="http://www.youtube.com/v/y0s7ycdUcHk" width="425" height="350" wmode="transparent" /]

¿Cómo actualizar una página al cambiar el valor de un combo box? (Ajax)

Hola amigos, en esta ocasión voy a explicar algo que existe en casi todas las páginas, pero en este caso yo lo he aplicado con AJAX y JQUERY.

¿En cuántas páginas habéis entrado y habéis visto un desplegable de estos (combo box) con una serie de valores y habéis seleccionado uno de ellos y la página automáticamente se ha recargado y os ha mostrado unos valores?

[caption id="attachment_154" align="aligncenter" width="315" caption="Un combo box "][/caption]

Como siempre que trabajamos con AJAX tendremos la siguiente estructura:

[caption id="attachment_156" align="aligncenter" width="475" caption="Diagrama de funcionamiento AJAX"][/caption]

El fichero HTML en el que vamos a añadir este combo tendría este código:

index.html

<html>
<head>
<script src='js/jquery.js' type='text/javascript'></script>
<script src='js/funciones.js' type='text/javascript'></script>
</head>
<body>
<select name = "seleccionar">
<option value ="1">1</option>
<option value ="2">2</option>
<option value ="3">3</option>
<option value ="4">4</option>
<option value ="5">5</option>
</select>
<div id = "contenido"></div>
 </body>
</html>

En el fichero Javascript:

funciones.js

$(document).ready(function () {

$('#limite').change(function(){
$.get("funcionesC.php",
{limite: $('#limite').val()
}, function(data){
$('#c').html(data);
});
});
});

Por último en el fichero PHP desde el que mediante el echo devolvemos el callback deberemos escribir lo siguiente:

funcionesC.php

$limite = $_GET['limite'];
echo $limite;

Por último, como siempre una canción para despedir el post.

Escuchando... I wanna be your boyfriend -- The Ramones

$_REQUEST, $_POST o $_GET

Hola amigos, tras un largo tiempo sin escribir me dispongo a compartir ciertas experiencias con vosotros.

En el mundo del envío y recepción de datos existen una serie de normas no escritas sobre qué método usar.

Para empezar haré una breve descripción sobre los métodos de envío y recepción de datos. Como bien sabréis necesitaremos un formulario HTML para enviar los datos. En la etiqueta <form> será dónde definiremos la propiedad method que podrá tener los siguientes valores:

• post: Envía ocultos los datos


• get: Envía los datos en la URL

Bien además de saber estas pequeñas diferencias es básico recordar que todo lo que hagamos en la red estará sujeto a posibles ataques, por lo tanto considero fundamental diferenciar en qué tipo de operaciones podemos usar get y post.

Post:

1. Para las operaciones de modificación de registros de una Base de datos (Insert, Delete y Update) .


2. Para formularios de Login.


3. etc.

Get:

1. Consultas  (Select)


2. etc.

Por otro lado tenemos la opción Request. Esta opción es sin duda la más interesante cuando tenemos que recojer datos de otras páginas en las que no sabemos cuál es el método de envío.

En definitiva Request no necesita saber de que manera se envian los datos. El hecho de usar Request puede provocar vulnerabilidades y fallos de seguridad.

A continuación os voy a poner un ejemplo de cada:

---

GET

formulario.html

<form action="procesar.php" method="get">
     <input name="variable" type="text"/>
     <input type="submit" value="enviar"/>
</form>

procesar.php

<?php
     $var = $_GET['variable1'];
     echo $var;
?>

POST

formulario.html

<form action="procesar.php" method="post">
     <input name="variable" type="text"/>
     <input type="submit" value="enviar"/>
</form>

procesar.php

<?php
     $var = $_POST['variable1'];
     echo $var;
?>

REQUEST

formulario.html

<form action="procesar.php" method="post">
     <input name="variable" type="text"/>
     <input type="submit" value="enviar"/>
</form>



<form action="procesar.php" method="get">
     <input name="variable" type="text"/>
     <input type="submit" value="enviar"/>
</form>

procesar.php

<?php
     $var = $_REQUEST['variable1'];
     echo $var;
?>

Escuchando...   Angelic Upstarts - Solidarity

[kml_flashembed movie="http://www.youtube.com/v/1rJfv0zVnwU" width="425" height="350" wmode="transparent" /]

¿Cómo hacer un formulario con dos actions?

Hola de nuevo. He estado mucho tiempo fuera y por fin he vuelto al trabajo. La vuelta al trabajo ha supuesto nuevos retos y por lo tanto nuevas soluciones. Hasta que empecé a hacer una aplicación para la gestión de unos cursos no me ví en la necesidad de hacer un formulario en el que pudiera tener dos "action". Es realmente sencillo, a continuación os muestro un ejemplo.

Lo primero es eliminar la etiqueta acción del formulario.

<form name="formulario1" method="GET" >

Posteriormente es tan simple como poner lo siguiente en el código de los botones

<input type="submit" onclick = "this.form.action = 'pagina1.php'" value="accion 1" />
<input type="submit" onclick = "this.form.action = 'pagina2.php'" value="accion 2" />

Para finalizar como siempre algo de música. En este caso y ya que el domingo vi la nueva película de Tarantino, Malditos Bastardos, os pondré un tema que mientras lo escuchaba en el cine me pareció que era de Iggy Pop pero resultó ser del maestro David Bowie.

[kml_flashembed movie="http://www.youtube.com/v/YWX_MFNOL_Y" width="425" height="350" wmode="transparent" /]

Manejo del sistema de ficheros con PHP

Recientemente he tenido que programar una aplicación con la que tenía que mover ficheros continuamente desde un directorio a otro. También tenía que crear carpetas y demás instrucciones que se pueden hacer en un sistema de ficheros.

Algunos ejemplos de funciones PHP para manejar ficheros.

¿Cómo comprobar que un fichero existe?

<?php
	if(file_exists("hola.txt")){
		echo "El fichero existe <br/>";
	}
	else{
		echo "El fichero no existe <br/>";
	}
?>

¿Cómo crear un directorio?

<?php
	mkdir("fichero", 0755);
?>

¿Cómo copiar un fichero?

<?php
	$file = 'hola.txt';
	$newfile = './fichero/hola.txt.bak';
	if (!copy($file, $newfile)) {
		echo "failed to copy $file...<br/>";
	}
	else {
		echo "se ha copiado correctamente<br/>";
	}
?>

¿Cómo eliminar un fichero?

<?php
	unlink('hola.txt');
?>

Escuchando... Manic Street Preachers -- Let Robeson sing

[kml_flashembed movie="http://www.youtube.com/v/w2lca_6uLoY" width="425" height="350" wmode="transparent" /]

Modal con Ajax y JQuery

Poco a poco las aplicaciones web se van pareciendo más a las aplicaciones de escritorio. Una de las tecnologías responsables de que esto ocurra es AJAX. Mientras buscaba por internet cómo hacer una ventana modal, para mostrar información sin necesidad de abrir nuevas páginas, encontré en una web un plugin de JQuery.

Eric M. Martin SimpleModal

En este caso lo único que hace es escribir un div oculto en la página que mostrará de manera modal cuando se haga click en un enlace.

Como podéis observar la página Web se ve en segundo plano. Gracias a esto no pierdes el contexto del lugar dónde estabas navegando, pero para algunas cosas es contraproducente, por ejemplo para google es una única página y generalmente le gustan las páginas con muchos enlaces y que están bien enlazadas. Pierdes la posibilidad al no crear una nueva página de añadir nuevos metadatos. Pero hace sin dudas más atractiva la página.

Ejemplo 1: uso sencillo, div oculto con un texto que se muestra al hacer click sobre un enlace con clase "basic"

El código HTML sería el siguiente:

<html>
	<head>
		<title>Modal con AJAX</title>
<!-- Añadimos los ficheros necesarios para el ejemplo -->
		<script src='js/jquery.js' type='text/javascript'></script>
		<script src='js/jquery.simplemodal.js' type='text/javascript'></script>
		<script src='js/basic.js' type='text/javascript'></script>
		<link type='text/css' href='css/basic.css' rel='stylesheet'/>
	</head>
	<body>
		<a href="#" class="basic">
			Pincha aquí para que se abra el modal
		</a>
		<div id="basicModalContent" style="display:none">
			Hola esto esta oculto.
		</div>
	</body>
</html>

El código Javascript sería el siguiente:

$(document).ready(function () {
	$('a.basic').click(function (e) {
		e.preventDefault();
		$('#basicModalContent').modal();
	});
});

El código de este ejemplo os lo podéis descargar de aquí.

Por otra parte yo he adaptado el Modal para que pueda tener el valor que nos devuelva un fichero PHP al ser consultado por AJAX.

El código HTML sería el siguiente (He abreviado, pero las cabeceras que incluyo para este ejemplo son las mismas que para el ejemplo anterior).

<body>
	<p>
		<a href="#" class="basic"> Este abre el modal 1</a>
	</p>
	<p>
		<a href="#" class="basic2"> Este abre el modal 2</a>
	</p>
	<div id="basicModalContent" style="display:none"></div>
</body>

El código Javascript sería el siguiente:

$(document).ready(function () {
	$('a.basic').click(function (e) {
		e.preventDefault();
		$.get('procesar.php',
			{paramentro:'basic'
			}, function(data){
				$('#basicModalContent').html(data);
				$('#basicModalContent').modal();
		});
	});
	$('a.basic2').click(function (e) {
		e.preventDefault();
		$.get('procesar.php',
			{paramentro:'basic2'
			}, function(data){
				$('#basicModalContent').html(data);
				$('#basicModalContent').modal();
		});
	});
});

El código PHP sería el siguiente:

<?php
	$variable = $_GET['paramentro'];
	switch ($variable){
		case 'basic':
			echo "este es el primer link";
		break;
		case 'basic2':
			echo "este es el segundo link";
		break;
	}
?>

El código de este ejemplo os lo podéis descargar de aquí.

Escuchando... Bob Dylan -- The man in me.
Este tema pertenece a la banda sonora de una de mis 5 películas favoritas, El gran Lebowski. Unas veces te comes al oso, y otras veces el oso te come. El Nota aguanta.

[kml_flashembed movie="http://www.youtube.com/v/Y2s8_hCCHg4" width="425" height="350" wmode="transparent" /]

Problemas de codificación UTF-8, ISO-8859-1

Recientemente me he tenido que pelear seriamente con el problema de las codificaciones. Y es que para todos aquellos que no hablamos la lengua de Shakespeare se nos plantean dificultades en el mundo de la informática.

Aforturnadamente poco a poco se van superando, pero claro uno que nunca se había encontrado con este problema, debido a que llevaba cuidado en todo lo que hacía ha visto como al descuidarse un poco puede tener un serio problema.

Pues bien, dependiendo de sí el charset del html es UTF-8 o ISO-8859-1 la cosa puede cambiar y de que manera.

Charset UTF-8:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Charset ISO-8859-1:

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>

Por ejemplo con la primera línea, estamos diciendo que el documento está codificado como UTF-8. Esto significa que todas las tildes y caracteres no anglosajones estarán disponibles cuando visualicemos la página web. En la segunda línea esto no será así y dónde hayan tildes o caracteres no anglosajones saldrá el siguiente carácter:

A continuación voy a poner el código php que prueba este ejemplo. Imaginad que en la cabecera de nuestro documento HTML hemos definido la codificación como UTF-8.

El siguiente código sacaría por pantalla este resultado:

<?php
	$cadena= 'Mañana iré al cine';
	$utf= utf8_decode($cadena);
	$cad= utf8_encode($utf);
	echo $cadena;
	echo "<br/>";
	echo $utf;
	echo "<br />";
	echo $cad;
?>

La primera línea muestra la cadena tal cual la tenemos. Es decir como el documento esta codificado en UTF-8 la cadena se muestra correctamente. En la segunda línea al llamar a la función utf8_decode($cadena); lo que estamos haciendo es pasar una cadena de UTF-8 a ISO-8859-1, de ahí que no se visualicen correctamente ni la "ñ" ni la "í".

Un consejo os doy. Utilizad UTF-8, pero si el sistema no lo permite tened en cuenta que con encode y decode de php podemos manejar el asunto.

Escuchando... The Cure -- Pictures of You
[kml_flashembed movie="http://www.youtube.com/v/kcMEx4OHLOs" width="425" height="350" wmode="transparent" /]

Efecto acordeon con JQuery

Una vez buscando por la web y ante la necesidad de mostrar cierta información, ocultando otra posteriormente, encontre varios plugins de JQuery que me daban una solución. Los probé y tardé bastante más tiempo en adaptar esos plugins a mi código que en desarrollar mi propio código.

Para este ejemplo vamos a usar 3 ficheros y nuevamente el fichero de jquery.js que deberemos incluir primero de todo.

El primero de los ficheros, el HTML tendrá una estructura con 4 divs, dos de ellos harán de título del div para entendernos y los otros dos serán los que muestren el contenido.

[caption id="attachment_96" align="aligncenter" width="285" caption="Efecto acordeón"][/caption]

El fichero HTML sería como este:

<html>
    <head>
        <title>Validaci&oacute;n de formularios con JQuery I</title>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="general.js"></script>
        <link href="estilo.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id ="div1">Menu 1</div>
        <div id ="cont1">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
        <div id ="div2">Menu 2</div>
        <div id ="cont2">
        	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
	</body>
</html>

El fichero CSS, en este caso "estilo.css", sería como se muestra a continuación. Nótese que los divs con identificadores #cont1 y #cont2 están con la propiedad display:none, que hace que al cargar la página no se vean.

#div1{
	background-color:#CCCCCC;
	width:20%;
	border:1px solid #AAAAAA;
	padding:0 10px;
}
#cont1{
	background-color:#EEEEEE;
	width:20%;
	border-bottom:1px solid #AAAAAA;
	border-left:1px solid #AAAAAA;
	border-right:1px solid #AAAAAA;
	padding: 10px;
	display:none;
}
#div2{
	background-color:#CCCCCC;
	width:20%;
	border:1px solid #AAAAAA;
	padding:0 10px;
}
#cont2{
	background-color:#EEEEEE;
	width:20%;
	border-bottom:1px solid #AAAAAA;
	border-left:1px solid #AAAAAA;
	border-right:1px solid #AAAAAA;
	padding: 10px;
	display:none;
}

Por último el fichero Javascript, en este caso llamado "general.js", dónde controlaremos cada uno de los clicks que se hagan sobre los divs. De manera que cuando pinchemos en uno se colapsará el div cont del otro y se desplegará el cont que le corresponde.

 $(document).ready( function() {
	$('#div1').click(function(){
		$('#cont1').slideDown('slow');
		$('#cont2').slideUp('slow');
	});
	$('#div2').click(function(){
		$('#cont2').slideDown('slow');
		$('#cont1').slideUp('slow');
	});
});

Esto es todo por hoy. Es algo sencillito, pero la idea es ir familiarizándose con el framework JQuery.

Escuchando... Radiohead - Videotape
[kml_flashembed movie="http://www.youtube.com/v/-kCKob1YKOU" width="425" height="350" wmode="transparent" /]

Ejemplo de manipulación de listbox en HTML y JQuery

Hace no demasiado tiempo, desarrollando una aplicación, tuve que solucionar el problema de añadir varios elementos a un <select>. Pues bien básicamente necesitaba hacer algo parecido a lo que se puede observar en la figura siguiente:

[caption id="attachment_83" align="aligncenter" width="311" caption="Añadir y eliminar elementos de un select "][/caption]

Para hacer esto, el fichero html sería el siguiente:

<html>
    <head>
<!-- Incluimos primero jquery y luego un fichero javascript con el
código que se encargará de la manipulación del formulario -->
        <title>Manipulaci&oacute;n de formularios con JQuery I</title>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="general.js"></script>
    </head>
    <body>
        <table>
            <tr>
                <td rowspan="2">
                    <input type="text" name="valor" id="valor"/>
                </td>
                <td>
                    <input type="button" name="add" value=">>" id="add"/>
                </td>
                <td rowspan="2">
                    <select name="lista"  multiple id="lista" ></select>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" name="del" value="<<" id="del"/>
                </td>
            </tr>
        </table>
    </body>
</html>

En el fichero javascript de los que incluimos sería general.js pondremos lo siguiente:

// Esta línea se usa para indicarle al framework que cuando
// cargue la página ejecute lo que va a continuación
$(document).ready( function() {
// Con esta linea le indicamos que cúando se haga click
// sobre un elemento con identificador #add
  $('#add').click(function(){
// Recojamos el valor de un "input" cuyo nombre sea "valor"
	var valor = $("input[name='valor']").val();
//Si la variable valor es distinta de cadena vacía
		if(valor != ""){
//Al <select> con id #lista le añadimos una opcion
		$("#lista").append('<option value=\"'+valor+'\">'+valor+'</option>');
		}
  });
//Si hacemos click sobre el botón con identificador #del
  $('#del').click(function(){
//Borramos la opción seleccionada, PODEMOS SELECCIONAR VARIAS
	 $("#lista option:selected").remove();
 });

Bueno y esto es todo. Siguiendo estos pasos tendréis esta interactuación entre dos campos de un formulario mediante Javascript.

Escuchando... Morrissey - First Of The Gang To Die

[kml_flashembed movie="http://www.youtube.com/v/Wzpynvxr7tA" width="425" height="350" wmode="transparent" /]

Maquetación con CSS y Divs

La maquetación con CSS y Divs es el tipo de maquetación más utilizado en la actualidad. En su momento se maquetaba con tablas, practica que no recomiendo en absoluto. Las tablas son para presentar datos de una manera ordenada, no para máquetar una página web.

Hoy voy a explicar el modelo de columnas con un menú superior. El resultado final sería algo parecido a esto:

[caption id="attachment_64" align="aligncenter" width="300" caption="Maquetación Web"][/caption]

Como se puede observar el diseño est formado por una cabecera, un menú, dos divs flotando uno a la derecha y otro a la izquierda y un pie de página. Nótese que están contenidos en un "contenedor" (de color lila).

Para realizar este diseño se necesitan dos ficheros, uno HTML y uno CSS. A continuación os copio el código del fichero HTML. Es realmente sencillo. Hay seis divs de los cuales uno contiene a los otros cinco. y dos de ellos están flotando a la derecha y a la izquierda respectivamente.

El código del fichero HTML sería el siguiente:

<html>
	<head>
		<title>Maquetacion con CSS y Divs</title>
		<link rel="stylesheet" href="maquetacion.css" type="text/css"/>
	</head>
	<body>
		<div id ="contenedor">
			<div id ="cabecera"></div>
			<div id ="menu"></div>
			<div id ="izquierda"></div>
			<div id ="derecha"></div>
			<div id ="pie"></div>
		</div>
	</body>
</html>

El código del CSS es el que tiene más sustancia.

#contenedor{
        background-color:#F4ABF2;
        border:2px solid #FF0000;
}
#cabecera{
        background-color:#E5BC7A;
        height:20%;
}
#menu{
        height:10%;
        background-color:#C8CACC;
}
#izquierda{
        height:50%;
        background-color:#BDD2EF;
        float:left;
        width:50%;
}
#derecha{
        height:50%;
        background-color:#DAF7E2;
        float:right;
        width:50%;
}
#pie{
        height:20%;
        background-color:#D3D1C1;
        clear:both;
}

El clear nos coloca el div pie debajo de los dos que están flotando. Y arrastra al contenedor hasta el final de lo contenido

Nótese que hay medidas, tanto de alto como de ancho para poder probar el código y ver que maqueta correctamente.

Escuchando... Yann Tiersen -- La boulange

[kml_flashembed movie="http://www.youtube.com/v/vtTkHhpZEo8" width="425" height="350" wmode="transparent" /]

Ajax con JQuery

JQuery es un framerwork para desarrollar en Javascript. Con el la programación en este lenguaje se simplifica de una manera muy considerable.

En este caso nos ofrece una manera muy sencilla de ejecutar peticiones asíncronas (AJAX) sin importarnos como funciona esta tecnología a bajo nivel.

Para realizar este ejemplo necesitaremos 3 ficheros:

• Fichero HTML, dónde tendremos un div en el que mostraremos el contenido devuelto por AJAX.


• Fichero Javascript, dónde llamaremos asíncronamente al fichero PHP.


• Fichero PHP, dónde procesaremos la solicitud que se nos ha enviado desde el fichero Javascript.

En el fichero HTML  tendremos definido un div dónde cargaremos el contenido AJAX,
también incluiremos el archivo de JQuery que podemos descargar del siguinte enlace.

<html>
	<head>
		<title>Ajax con JQuery</title>
		<!-- Enlazamos la librería JQuery -->
		<script type="text/javascript" src="jquery.js"></script>
		<!--Enlazamos el archivo Javascript dónde tenemos la llamada-->
		<script type="text/javascript" src="general.js"></script>
	</head>
	<body>
		<!-- Definimos un textbox dónde escribiremos un texto -->
		<input name="saludar" type="text"/>
		<!-- Añade un link para hacer la llamada AJAX -->
		<a href="#" id="enlace">AJAX</a>
		<!-- Insertamos un div oculto que visualizaremos tras
		recibir la respuesta AJAX -->
		<div id ="ajax" style="display:none;"></div>
	</body>
</html>

En el fichero Javascript se realiza la petición asíncrona.

// Esta línea se usa para indicarle al framework que cuando
// cargue la página ejecute lo que va a continuación
$(document).ready( function() {
// Con esta linea le indicamos que cúando se haga click
// sobre un elemento con identificador #enlace
	$('#enlace').click(function(){
		// Recojamos el valor de un "input" cuyo nombre sea "saludar"
		var saludar = $("input[name='saludar']").val();
		// Y por GET llamemos a un fichero php llamado "procesar.php"
		// pasándole como parámetro la variable anteriormente definida
		// como "saludar"
		// Nota: los parámetros se pasan como JSON
		$.get('procesar.php',
			{paramentro:saludar
			}, function(data){
			// Cuando recibimos la respuesta convertimos esa respuesta
			// en html y visualizamos esa respuesta en el div
			// con id "#ajax" que teníamos oculto en la página HTML
			$("#ajax").html(data);
			$("#ajax").show();
		});
	});
});

En el fichero PHP tan solo recibiremos un parámetro por GET y devolveremos un valor mediante el echo.

<?php
	$variable = $_GET['paramentro'];
	echo "hola ".$variable;
?>

Esto es todo por esta vez. Se admiten sugerencias y colaboraciones.

Escuchando...
The Spinto Band -- Oh Mandy
[kml_flashembed movie="http://www.youtube.com/v/y-qCuYEUGug" width="425" height="350" wmode="transparent" /]