Acceso a multiples tablas (AJAX básico) II


Una vez definido el algoritmo de funcionamiento basico para este tipo de modulo comenzaremos a introducir AJAX a nuestra programación, recordemos que AJAX no es en si mismo un lenguaje de programación, sino un marco de trabajo donde se combinan varios lenguajes como HTML, Javascript, XML y CSS.

Tratando de sintetizar en extremo AJAX diremos que se trata de mandar información a una aplicación web, vía una URL, pero el resultado no sera presentado en toda la ventana del navegador sino en una sección dentro de el llamada capa.

Lo primero para que debemos saber es que las capas se crean con la etiqueta div, tal y como sigue

el atributo id se usa para asignarle un nombre a la capa, ahora bien, esta capa ocupa toda la ventana, asi que para limitarla usaremos CSS tal y como sigue:

Observe que hemos agregado una hoja de estilo con la etiqueta  < style > y que esta se aplica a la capa web a través de su id especificado en #capa, en esta capa de estilo se especifican los atributos:

  • position: esta puede ser absoluta, es decir de acuerdo a las coordenadas de la ventana o relativa, es decir de acuerdo a la ultima posición de otra capa.
  • left y top: indican las coordenadas en pixeles donde se ubicara la capa, teniedo en cuenta que están pertenecen a la esquina superior izquierda de la capa.
  • witdh y heigth: Indican la medida en pixeles del ancho y alto de la capa.
  • z-index: el orden en que se cambiara el cursor usando la tecla de tab, si su valor es 1 significa que este es el primer elemento donde se ubicara el cursor.

Ya que conocemos las capas veamos en que consiste AJAX:

En este caso estamos usando AJAX para los primeros pasos del algoritmo, buscar el numero de cliente y presentar los datos, para ello debemos ver la función buscac, que contiene el código javascript de AJAX.

En las primeras dos lineas obtenemos el dato clave que vamos a enviar al programa en php, en las lineas que están encerradas en el recuadro azul creamos el objeto AJAX, el cual es el vinculo a través del cual se devuelven una respuesta del tipo XMLHTTPRequest que podremos depositar en una capa, aunque a primera vista parezcan complicadas no lo son tanto, la razón de tantas lineas es que los navegadores no crean el objeto de respuesta de AJAX de la misma forma, el primer intento lo vemos ajax.activexobject que es la forma general para IE, el segundo lo vemos en new Activexobject que es la forma para navegadores viejos, y la ultima la vemos en new xmlhttprequest que es la forma para la mayoría de los navegadores, como podemos observar el problema siempre es IE, de hecho el código de este recuadro lo podría copiar tal cual.

En las lineas que están en el recuadro rojo se crea una llamada asíncrona que se ejecutara en el evento onreadystatechange, el cual se ejecuta ante un cambio en de estado del objeto XMLHTTPRequest, dentro de esta llamada se crea una variable asociada a la capa donde visualizamos la información; ademas de eso se verifica si se han obtenido los datos completos del servidor a traves de readystate==4 y tambien se verifica el estado de la respuesta en la pagina a nivel del protocolo HTTP en status=200, ya que el código 200 correponde a que todo fue correcto.

Si las condiciones anteriores se cumplen se vacía la respuesta en la capa designan a través de la propiedad innerHTML, esta respuesta se toma de la propiedad responsetext.

Las lineas que vemos en el recuadro de color verde se encargan del envió de la información, en primera instancia usaremos el método open para indicar el método de envío y el nombre del programa php al que se enviara la información.

La tercera linea construye la URL de datos que se va a enviar, para explicar esto debemos explicar la estructura de una URL

  • Protocolo: conjunto de reglas que regulan la comunicación, como http, ftp, file, news
  • red: para los servidores públicos es www, pero si se trata de una red privada puede cambiar.
  • Servidor: nombre de la computadora anfitrión del sitio
  • Tipo: se refiere al tipo de pagina o tipo de organización a la que pertenece la pagina.
  • país: indica el país en donde se registro el dominio
  • Carpeta: es la ruta, carpetas o directorios dentro de la computadora servidor donde esta la pagina o programa
  • archivo: es el nombre del archivo o programa al que estoy accediendo
  • parámetros: después del ? siguen los pares de variables y valores que estoy enviando al programa o pagina web, cada para de variable=valor se une a la cadena total con un &

Esta ultima parte es la que necesitamos construir a través de la concatenación de las variables y los valores.

La segunda linea de este ultimo recuadro codifica los parámetros que mandamos en la URL, esto se debe a que nuestros datos están llenos de valores que no son admitidos por el formato de la URL, como es el caso de los espacios, sabemos que ninguna dirección web admite espacios, así que estos son cambiados por su equivalente que es el %20, lo mismo ocurre con otros caracteres, si no empleamos esta instrucción los datos serían recibidos de forma incorrecta o ni siquiera serían enviados.

Volviendo al código completo podemos ver que al dar clic en el botón buscar se mandara la clave a través de AJAX al programa buscacliente.php, dependiendo del resultado presentara los datos del cliente o un mensaje de que no existe,tal y como vemos en la imagen siguiente:

Ahora veamos como es el código del php al que le enviamos la clave y produce los resultados que vimos en la pagina anterior

Como podemos observar el contenido de este código php no se altera por el uso de AJAX, solo en la pagina principal por así decirlo es donde se modifica la programación para que presente en una capa el resultado que construya este php que vemos.

Al igual que en otros post les dejo el código de ejemplo para descargar y les recuerdo que deben copiar la base de datos a xampp/mysql/data, en caso de usar el servidor xampp

http://db.tt/fc1nGbk2

 

 

Anuncios

Acerca de sistemasumma

Blog dedicado a la tecnología y a todos los estudiantes de sistemas, informatica, computación y afines
Esta entrada fue publicada en Lenguajes de aplicaciones y etiquetada , , , . Guarda el enlace permanente.

4 respuestas a Acceso a multiples tablas (AJAX básico) II

  1. countries dijo:

    That’s 2 clever by half and 2×2 clever 4 me. Thanks!

    Me gusta

  2. Anónimo dijo:

    muchas gracias por su respuesta ya pude lograr que la consulta me arroje una alerta cuando el campo esta vació gracias

    Me gusta

  3. Anónimo dijo:

    buenos dias quisiera saber como lograr que el boton de buscar no me envie datos vacios, que al darle click en el boton buscar me arroje un error que el campo clave del cliente esta vacio gracias

    Me gusta

    • sistemasumma dijo:

      En el php que hace la busqueda agregariamos el uso de la instruccion mysql_num_rows para verificar la cantidad de registros que obtuvimos , si la cantidad es cero se hace un echo que presente el mensjae de error que mencionas y en caso contrario se presentaran los datos de forma normal, si tienes mas dudas avisanos y estamos para servirte

      Me gusta

¿Qué estas pensando?

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s