Libro “jQuery 1.3 con PHP”

DESCARGAR

AJAX en jQuery:mensaje de carga mientras el usuario espera la respuesta Ajax del servidor

Por qué un mensaje de carga al hacer Ajax

Cuando hacemos una solicitud por Ajax, los resultados de dicha llamada a veces tardan en llegar. Durante ese tiempo el usuario puede no ver ninguna reacción por parte del navegador, lo que le puede confundir y pensar que no ha hecho clic correctamente en el enlace o botón. Sería normal en ese caso que el usuario pulse repetidas veces un enlace o un botón de envío de formulario, generando repetidas e innecesarias llamadas al servidor, lo que puede derivar en diversos problemas.

Así pues, es conveniente mostrar un mensaje de carga para advertir que su solicitud fue realizada y el proceso está en marcha y esperando respuesta del servidor.

Vamos a explicar la implementación de este mensaje de carga, pero siempre teniendo en cuenta que nuestra intención en este ejemplo es mantener un código pequeño que se pueda entender fácilmente. Aunque queremos remarcar que las cosas se podrían hacer de otra manera, algo mejorada, cuando sepamos más cosas sobre el framework Javascript jQuery y pongamos en marcha algunas prácticas aconsejables de programación orientada a objetos.

Preparando el código HTML
Como un primer paso, vamos a mostrar el código HTML que tendremos en la página que hará la solicitud Ajax.

<a href="#" id="enlaceajax">Haz clic!</a>
<div id="cargando" style="display:none; color: green;">Cargando...</div>
<br>
<div id="destino"></div>

Data grid en PHP

A partir de un array asociativo, mostramos todos sus datos en una tabla, con el data grid creado automáticamente.

Si necesitas implementar un data grid en PHP tienes dos posibilidades: 1) hacerlo tú mismo, o 2) ayudarte de algún desarrollo listo para usar en tu página.

Qué es un data grid
Un data grid, que viene a significar en castellano rejilla de datos, es una interfaz de usuario bastante típica, que sirve para visualizar información en una tabla. La información suele ser un conjunto de registros, y se suelen mostrar cada uno de ellos en una fila. Además, los data grid suelen tener integradas funcionalidades para la ordenación de los datos y opciones para su edición o borrado.

En PHP en principio no existe ninguna función del lenguaje para generar estos data grid automáticamente, pero distintos frameworks tienen esa funcionalidad, por lo que si instalas o utilizas uno, quizás no te interese este artículo.

Clase Data Grid PHP
Con esta sencilla clase se puede crear un data grid a partir de un array con los datos que queremos presentar en la rejilla. Y bueno, la califico de sencilla porque es fácil de usar y de configurar, sin embargo, seremos capaces de alterar su comportamiento con numerosos parámetros avanzados, para implementar todas las necesidades habituales de una estructura de este tipo.

Nota: La clase Data Grid PHP está creada con programación orientada a objetos y características que sólo están disponibles a partir de PHP 5.

El autor de esta clase es Nguyen Duc Thuan, de Vietnam y la ha puesto a nuestra disposición a través del sitio PHP Clases. Sin embargo, he subido la clase Data Grid al propio servidor del blog www.abrahan.co.cc, por si acaso ese link no funciona.

amos a ver cómo utilizar esta clase a través de un ejemplo, que iremos complicando poco a poco para añadir funcionalidades.

Para empezar, tenemos que incluir la clase en nuestros scripts PHP, antes de poder usarla:

//incluyo la clase
require 'DataGrid.php';

Tutorial Subir Archivo con AJAX

Paso 1 – AJAX carga de archivos

En primer lugar he de decir que para crear un puro AJAX sistema de carga de archivos no es posible debido a limitaciones de seguridad del Javascript. Todos los sistemas de carga Ajax sé usar alguna herramienta de terceros / paquete o sólo imita la sensación de AJAX. Aún así, el proceso de carga de archivos hace un poco mejor. En la próxima sección voy a presentarles una solución que imita el proceso de AJAX, pero utiliza un proceso de carga normal y iFrames.

Concepto:

• Crear un simple formulario HTML para la carga de archivos
• Establecer la meta de un iframe que se encuentra en la página real, pero no es visible.
• Llame a una función de JavaScript en el formulario para presentar la pantalla de animación.
• Después de la parte de PHP termina el proceso de carga, y luego se esconde la animación.

Crear el archivo HTML:

El archivo HTML que usaremos en este artículo es bastante simple. Sólo tienen un simple formulario con un archivo de campo y un botón de enviar. Sin embargo, no se olvide de la enctype parámetro.

      <form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" >
      File: <input name="myfile" type="file" />
      <input type="submit" name="submitBtn" value="Upload" />
      </form>

Además de esto tenemos que añadir un poco más de código a la misma. Primero necesitamos un bloque en el que mostrará el progreso de animación. Tenemos otro bloque en el que informará a los visitantes si la subida fue el éxito o no. Además de esto tenemos que añadir un iFrame de oculta a la página que se utiliza como forma de destino. Al menos añadir un evento onSubmit del formulario. Por lo tanto, nuestro cuerpo HTML parecido a este:

Ajax PHP Tutorial Práctico

En este artículo voy a intentar resumir los fundamentos de Ajax y PHP comunicación. Y en el que puede encontrar un completo trabajo Ajax – .

Paso 1 – Ajax Básico

En este artículo no quiero mostrar la historia de AJAX y debatir sus pros y sus contras, pero sólo se centran en cómo crear una base de trabajo de AJAX – PHP comunicación.

Lo único importante en este momento es que AJAX utiliza JavaScript por lo que deben estar habilitadas en su navegador para llevar a cabo este tutorial.

Para demostrar la conexión de PHP AJAX vamos a crear una forma muy sencilla con 2 campos de entrada. En el primer campo puede escribir cualquier texto y vamos a enviar este texto a nuestro script PHP que convertir a mayúsculas y lo envía de nuevo a nosotros. Al final vamos a poner el resultado en el segundo campo de entrada. (El ejemplo tal vez no muy útil, pero creo que es aceptable en este nivel.)

Así que la lista de lo que tenemos que hacer:

• Escuchar el evento “key-press” en el campo de entrada.
• En el caso de “key-press” enviar un mensaje con el script PHP en el servidor.
• Proceso de la entrada con PHP y devolver el resultado.
• Captura la devolución de datos y lo mostramos.

Nuestro código HTML es muy fácil que se parece a esto:

      <!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">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Ajax - PHP example</title>
      </head>
      <body>
      <form name="testForm">
      Input text: <input type="text" onkeyup="doWork();" name="inputText" id="inputText" />
      Output text: <input type="text" name="outputText" id="outputText" />
      </form>
      </body>
      </html>

Como puedes ver hay una doWork () la función que se llama en todos los casos, cuando una clave es hasta (se presiona una tecla). Por supuesto que puedes utilizar cualquier otro apoyo en caso de eventos que desee.

Pero ¿qué es esto doWork () y cómo podemos enviar mensajes a la secuencia de comandos de servidor?

Paso 2 – Envío de datos a PHP con Ajax

Antes de la explicación de la doWork () función en primer lugar hay que aprender una cosa más importante. Para realizar una comunicación entre el cliente y el servidor el código de cliente debe crear un objeto llamado XMLHttpRequest. Este objeto será el responsable de comunicación de PHP AJAX.

Sin embargo la creación de este objeto es poco triky como el navegador que aplicar diversas maneras. Si usted no quiere apoyar la muy antigua navegadores podemos hacerlo de la siguiente manera:

      // Get the HTTP Object
      function getHTTPObject(){
      if (window.ActiveXObject)
      return new ActiveXObject("Microsoft.XMLHTTP");
      else if (window.XMLHttpRequest)
      return new XMLHttpRequest();
      else {
      alert("Su Navegador no soporta AJAX.");
      return null;
      }
      }

Bueno, ahora tenemos el objeto XMLHttpRequest, por lo que es el momento de aplicar la lógica de negocio dentro de la doWork () función.

En primer lugar tenemos que conseguir una válida objeto XMLHttpRequest. Si lo tenemos, podemos enviar el valor de la inputText campo a la secuencia de comandos de servidor. Hacemos esto por componer una URL con el parámetro, por lo que en el script PHP que puede utilizar el $ _GET super-red mundial para la captura de los datos. Como siguiente paso que llamamos enviar () la función de objeto XMLHttpRequest que enviar nuestra petición al servidor. En el momento en que nuestro doWork () la función tiene este aspecto:

      // Implementamos la logica de negocio
      function doWork(){
      httpObject = getHTTPObject();
      if (httpObject != null) {
      httpObject.open("GET", "upperCase.php?inputText="
      +document.getElementById('inputText').value, true);
      httpObject.send(null);
      }
      }

Es agradable pero ¿cómo podemos captar la respuesta del servidor? Para ello es necesario el uso de un especial de la propiedad objeto XMLHttpRequest. Podemos asignar una función a este parámetro y esta función se llama si el estado del objeto se ha cambiado. El último código es el siguiente:

      // Implement business logic
      function doWork(){
      httpObject = getHTTPObject();
      if (httpObject != null) {
      httpObject.open("GET", "upperCase.php?inputText="
      +document.getElementById('inputText').value, true);
      httpObject.send(null);
      httpObject.onreadystatechange = setOutput;
      }
      }

El último paso en el lado del cliente es la aplicación de la setOutput () función que va a cambiar el valor de nuestro segundo campo. La única cosa interesante de esta función que tenemos que comprobar el estado real del objeto XMLHttpRequest. Tenemos que cambiar el valor del campo sólo si la situación se ha completado. ReadyState la propiedad puede tener los siguientes valores:

• 0 = uninitialized
• 1 = loading
• 2 = loaded
• 3 = interactive
• 4 = complete

Por lo tanto, el setOutput () se parece a este

      // Change the value of the outputText field
      function setOutput(){
      if(httpObject.readyState == 4){
      document.getElementById('outputText').value= httpObject.responseText;
      }
      }

Ahora el cliente está listo vamos a poner en práctica el lado del servidor.

Paso 3 – código PHP y el ejemplo completo de AJAX

La aplicación de la funcionalidad del lado del servidor es muy simple en comparación con el lado del cliente. En el código PHP sólo tenemos que comprobar la super $ _GET array global. Después de convertir a mayúsculas y eco de los resultados. Por lo tanto, el código PHP es la siguiente:

      <?php
      if (isset($_GET['inputText']))
      echo strtoupper($_GET['inputText']);
      ?>

Eso es realmente corta, ¿no?

Por lo menos usted puede encontrar todo el código de cliente y servidor a continuación.

Cliente:

      <!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">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Ajax - PHP example</title>
      </head>
      <body>
      <script language="javascript" type="text/javascript">
      <!--
      // Get the HTTP Object
      function getHTTPObject(){
      if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
      else if (window.XMLHttpRequest) return new XMLHttpRequest();
      else {
      alert("Your browser does not support AJAX.");
      return null;
      }
      }
      // Cambiar el valor  del campo outputText
      function setOutput(){
      if(httpObject.readyState == 4){
      document.getElementById('outputText').value = httpObject.responseText;
      }
      }
      // Implementacion de la logica de negocio
      function doWork(){
      httpObject = getHTTPObject();
      if (httpObject != null) {
      httpObject.open("GET", "upperCase.php?inputText="
      +document.getElementById('inputText').value, true);
      httpObject.send(null);
      httpObject.onreadystatechange = setOutput;
      }
      }
      var httpObject = null;
      //-->
      </script>
      <form name="testForm">
      Input text: <input type="text" onkeyup="doWork();" name="inputText" id="inputText" />
      Output text: <input type="text" name="outputText" id="outputText" />
      </form>
      </body>
      </html>

Servidor:

      <?php
      if (isset($_GET['inputText']))
      echo strtoupper($_GET['inputText']);
      ?>