Uno de los usos más interesantes que nos ofrece un framework Javascript, como jQuery, es la realización de scripts que trabajan con la tecnología Ajax de una manera cómoda y compatible con todos los navegadores. En este artículo veremos cómo realizar Ajax sin salirnos de PHP, lo que es una auténtica maravilla para las personas que dominan este lenguaje de programación del lado del servidor, pero que no conocen para nada Javascript.
Con jQuery tenemos a nuestra disposición diversos modos de realización de scripts Ajax, unos más simples que otros. El método load() jQuery, al que podemos invocar desde PHP gracias a jQuery4PHP, tiene la capacidad de realizar una llamada Ajax con una sola línea de código! En el caso de utilizarlo desde PHP la cosa se complica un poco, pero aun así es infinitamente más simple que si tuviéramos que realizar el Ajax a mano.
Nota: Puedes ver la introducción a jQuery4PHP, con las explicaciones iniciales que necesitarás conocer para poder entender este artículo en el Manual de jQuery4PHP.
Si lo deseas, puedes comenzar por ver en marcha el ejemplo que vamos a realizar para ilustrar el trabajo con Ajax desde estas librerías.
En este ejemplo tenemos una capa y un botón:
<button id="miboton">Carga con Ajax!!</button>
<div id="micapa"></div>
Al pulsar el botón queremos acceder a un archivo por Ajax y mostrar su contenido dentro de la capa. Para ello utilizaríamos el siguiente código PHP.
<?php
echo
YsJQuery::newInstance()
->onClick()
->in("#miboton")
->execute(
YsJQuery::load(
"contenido-ajax.php"
)
->in("#micapa")
);
?>
echo
YsJQuery::newInstance()
->onClick()
->in("#miboton")
->execute(
YsJQuery::load(
"contenido-ajax.php"
)
->in("#micapa")
);
?>
Como se puede ver, si es que vamos entendiendo las librerías jQuery4PHP, estamos definiendo un evento click y lo hacemos sobre el botón anterior, con id="miboton". Una vez se pulse clic se realiza una llamada al método load() de jQuery (que carga un contenido por medio de la tecnología Ajax).
La URL que se desea acceder por Ajax se envía como parámetro al método load(), que en este caso es el archivo "contenido-ajax.php", que estará en el mismo directorio que la página que tiene el script PHP que estamos creando. Luego, indicamos con el método in() sobre la llamada a load(), que el contenido que había en ese archivo se debe volcar en la capa con id="micapa".
Quizás el código PHP que tenemos que escribir para hacer Ajax utilizando jQuery4PHP no es tan claro como si estuviésemos escribiendo código Javascript directamente con jQuery, pero al menos las personas que dominan PHP podrán hacer todo este proceso sin tener que preocuparse por aprender Javascript y saber cómo interactuan estos dos lenguajes de programación.
Nota: Otra opción muy interesante para las personas que desean hacer Ajax directamente desde PHP, sin tener que aprender Javascript, es utilizar las librerías xAjax. Se trata de un framework bastante sencillo, para hacer Ajax y muchas otras cosas que deberíamos programar con Javascript, pero sin tener que salirnos de PHP. Todo ello lo puedes aprender desde el Manual de xAjax publicado en DesarrolloWeb.com.
Podemos ver el código fuente completo de este ejercicio a continuación.
<?php
include_once('../lib/YepSua/Labs/RIA/jQuery4PHP/YsJQueryAutoloader.php');
YsJQueryAutoloader::register();
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="es">
<head>
<title>Probando jQuery 4 PHP</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style type="text/css" media="all">
#micapa{
font-size: 14px;
font-family: verdana;
}
</style>
</head>
<body>
<h1>Probando el ajax de jQuery4PHP</h1>
<button id="miboton">Carga con Ajax!!</button>
<div id="micapa"></div>
<?php
echo
YsJQuery::newInstance()
->onClick()
->in("#miboton")
->execute(
YsJQuery::load(
"contenido-ajax.php"
)
->in("#micapa")
);
?>
</body>
</html>
include_once('../lib/YepSua/Labs/RIA/jQuery4PHP/YsJQueryAutoloader.php');
YsJQueryAutoloader::register();
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="es">
<head>
<title>Probando jQuery 4 PHP</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style type="text/css" media="all">
#micapa{
font-size: 14px;
font-family: verdana;
}
</style>
</head>
<body>
<h1>Probando el ajax de jQuery4PHP</h1>
<button id="miboton">Carga con Ajax!!</button>
<div id="micapa"></div>
<?php
echo
YsJQuery::newInstance()
->onClick()
->in("#miboton")
->execute(
YsJQuery::load(
"contenido-ajax.php"
)
->in("#micapa")
);
?>
</body>
</html>
Puedes ver cómo ha quedado este script en una página aparte.
Además, dejamos el código del archivo contenido-ajax.php, puesto que tiene un detalle interesante que puede ahorrarnos algún dolor de cabeza. Se trata que las conexiones Ajax funcionan siempre en UTF-8 y si nosotros estamos codificando en otro juego de caracteres, los acentos no se verán bien. Por ello, al enviar desde un archivo PHP texto, que sepamos que va a ser recibido a través de Ajax, tenemos que asegurarnos de estar trabajando en UTF-8.
<?php
echo utf8_encode("hola esto está en un archivo PHP aparte!!!");
?>
echo utf8_encode("hola esto está en un archivo PHP aparte!!!");
?>
Como se puede ver, el texto que enviamos desde el archivo contenido-ajax.php se pasa antes por la función utf8_encode() de PHP, que lo convierte a UTF-8.
Obviamente, este ejemplo se puede complicar todo lo que queramos, a medida que nuestras necesidades sean distintas y en futuros artículos explicaremos algunas de las cosas típicas que desearemos hacer con Ajax. Para empezar, se puede leer el próximo artículo, en el que explicaremos cómo enviar datos desde PHP a las páginas que deseamos acceder por Ajax.
Fuente: enlace
No hay comentarios:
Publicar un comentario