Comentarios
XHConn (AJAX)
Hace poco tiempo incursione al mundo de AJAX esta tecnologia nos permite ejecutar script de PHP desde JavaScript, muchas cosas se pueden hacer con AJAX, en este apartado tratare de comentar las ventajas que he tenido al utilizar esta fabulosa herramienta y ademas comentar algun ejemplo que me han sido de gran ayuda.
Comenzare con un comentario del porque me incline a utilizar la herramienta.
En un proyecto que estoy desarrollando me comentaron, que si podría ser posible que al momento de alimentar de información una pagina web, esta trajera un resultado, una descripción o realizara una acción sin que el navegador hiciera submit, ó sin el famoso parpadeo a la hora de hacer submit por la necesidad de ir y traer algún resultado del servidor.

Esto me llevo a realizar una investigacion sobre el tema, y lo que encontre fue XHConn, AJAX, SAJAX, XMLHttpRequest, HttpRequest usando frames ocultos... etc, un sin fin de aplicaciones que trabajan bajo la misma tecnologia aunque cada una con sus particularidades especificas que los hacen diferentes unos de otros, pero un mismo fin, poder ir al servidor y traer un resultado desde javascript trasnparente para el cliente.
Lo que mas me agrado fue XHConn con Ajax.

Si deseas conocer algunos ejemplos mas, aqui algunas referencias.
referencia 1
referencia 2

Bueno ya estando en este punto les mostrare con un ejemplo real, como fue que se resolvio uno de varios problemas que implicaba el desarrollo de la aplicación que estoy haciendo, claro con Ajax.

El problema : Se tiene un listado de inputs en forma de arreglo en una tabla, en el primer < td> de la tabla se encuentra el input de captura y en el segundo < td > tendria que aparecer el resultado de la busqueda dependiendo lo que se halla tecleado en el input de entrada de datos y validar si existia o no la clave o lo que se halla te cleado en la casilla.

Algo asi...
Veamos como quedo el codigo del ejemplo.

Tratare de explicar el funcionamiento de estos codigos que voy a mostrarles acontinuacion:
  1. El primer codigo a ejecutar es el de HTML, este codigo nos generara, en este caso solo 3 inputs en forma de arrelo, esto puede hacerse de manera dinamica pero es solo un ejemplo. En cada uno de los inputs se utiliza el metodo onKeyPress y al cumplirse la condicion manda llamar una funcion de javascript que esta en el mismo codigo esta se llama carga_contenido, pasando como parametro el ID del la etiqueta < DIV > que es en donde sera pintado el resultado, y el valor actual del input.
  2. Al llamar la funcion carga_contenido está crea un objeto con la funcion que esta contenida en el archivo XHConn.js.. si observamos el ejemplo del codigo de html tambien contiene un javascrit externo que se llama XHConn.js, bueno pues este se encarga de armar el URL para poder ejecutar el script PHP y regresar el resultado y que este sea pintado en el ID de la etiqueta < DIV > que le fue proporcionado.
  3. El tercer codigo es solo el PHP que se debe ejecutar para poder traer el resultado y realizar el display de lo que encontro o el mensaje de error en caso contrario.
El siguiente codigo corresponde al script de html que manda llamar a la funcion cargar_contenido de javascript, esta sera la encargada de crear el objeto XHConn para poder llamar al script de PHP.

Veamos arreglo.html.
CODIGO 1 HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

<HTML>
<HEAD>
<TITLE>Pantalla Maestra</TITLE>
<link rel="STYLESHEET" href="estilo.css" media="screen" type="text/css">
<SCRIPT language="JavaScript">
<!--
function cargar_contenido(target,valor)
{
  var peticion;
  document.getElementById(target).innerHTML = '<p class=\"load\">Cargando...</p>';
  var myConn = new XHConn();
  if (!myConn) alert("XMLHTTP no esta disponible. Intalo con un navegador mas nuevo.");
  peticion=function(oXML){document.getElementById(target).innerHTML=oXML.responseText;};
  myConn.connect("libajax/detalle.php?cvee="+valor, "GET", "", peticion);
}
//-->
</SCRIPT>
<script language="JavaScript" src="scripts/js/XHConn.js"></script>
</head>
<body>
<form  name="forma" method="GET" action="#">
<center>
<H2><a name=inic>captura de arreglo</a></H2>
Teclee la Clave :
<table border=1 width=50%>
<tr><td width=10%>
    <input class="hidden" type="text" name="cvee1" size="5" maxlength="5"
           onKeypress="if(event.keyCode == 13){ 
                                cargar_contenido('detallecvee1',this.value); 
                                return false;
                        }"></input></td>
    <td><div align=center id="detallecvee1"></div><td></tr>
<tr><td width=10%>
    <input class="hidden" type="text" name="cvee2" size="5" maxlength="5"
           onKeypress="if(event.keyCode == 13){ 
                                cargar_contenido('detallecvee2',this.value); 
                                return false;
                       }"></input></td>
    <td><div align=center id="detallecvee2"></div></td></tr>
<tr><td width=10%>
    <input class="hidden" type="text" name="cvee3" size="5" maxlength="5"
           onKeypress="if (event.keyCode == 13){ 
                                cargar_contenido('detallecvee3',this.value); 
                                return false;
                       }"></input></td>
    <td><div align=center id="detallecvee3"></div></td></tr>
</table>
<br /><hr class=hidden>
</center>
</form>
</BODY>
</HTML>
La función carga_contenido es la encargada de llamar al javascript que es el que tiene la tecnologia Ajax. Este el el codigo del javascript externo XHConn.js
CODIGO 2 JS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

/** XHConn - Simple XMLHTTP Interface - bfults@gmail.com - 2005-04-08        **
 ** Code licensed under Creative Commons Attribution-ShareAlike License      **
 ** http://creativecommons.org/licenses/by-sa/2.0/                           **/
function XHConn()
{
  var xmlhttp, bComplete = false;
  try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }
  catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
  catch (e) { try { xmlhttp = new XMLHttpRequest(); }
  catch (e) { xmlhttp = false; }}}
  if (!xmlhttp) return null;
  this.connect = function(sURL, sMethod, sVars, fnDone) {
     if (!xmlhttp) return false;
     bComplete = false;
     sMethod = sMethod.toUpperCase();
 
     try {
        if (sMethod == "GET") {
            xmlhttp.open(sMethod, sURL+""+sVars, true);
            sVars = "";
        } else {
            xmlhttp.open(sMethod, sURL, true);
            xmlhttp.setRequestHeader("Method", "POST "+sURL+" HTTP/1.1");
            xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        }
        xmlhttp.onreadystatechange = function(){
           if (xmlhttp.readyState == 4 && !bComplete) {
              bComplete = true;
              fnDone(xmlhttp);
           }
        };
        xmlhttp.send(sVars);
     }
     catch(z) {
        return false;
     }
     return true;
  };
  return this;
}
Esta funcion de javascript recibe la url del script de PHP que vamos a ejecutar y el metodo por el cual se enviaron los datos.

Este es el script PHP que es llamado en cada ocurrencia de los inputs por el metodo onKeyPress y la funcion carga_contenido dentro de la forma.

Nota : es importante mencionar que yo trabajo con la Libreria Adodb, por consiguiente la ejecucion del enunciado SQL la realizo con Adodb, ustedes solo tendran que realizar el cambio al proceso que habitualmente realizan para la ejecucion de un enunciado SQL.

Veamos detalle.php.
CODIGO 3 PHP
1
2
3
4
5
6

<?php
  include_once "/url_funcion_conexion/conexion.php";
  $nomb = $conn->getOne("select namefield from tablename where namefield_key = $cvee"));
  if(trim($nomb) == "") $nomb = "<font color=red>NO Existe detalle para esa clave</font>";
?>
<div><big> <?=$nomb?> </big></div>