Aunque en la versión de 4 browsers el DHTML no esta adaptado específicamente para interacciones con el proceso del server-site, utilizando algunos trucos esto puede ser realizado. Esto es particularmente útil para crear aplicaciones reales utilizando DHTML. Puedes crear un surtido amplio de aplicaciones como algunas elegantes carretillas de compras "shopping carts", o un lindo DHTML interfaces para un procesador de datos "database", o posiblemente un chat room, si estás inclinado de poner el tiempo para escribir uno. Siguiendo las líneas de guía estas cosas son todas teóricamente posibles.
Hay varias formas para completar esta tarea:
Marco Escondido
Desde hace ya algún tiempo se ha sido conocido que si escondes un marco podrás poner la meta de los valores de tu forma a ese marco, y la otra página se quedará cargada. Puedes presentar una forma, y tener al CGI presentando otra vez una página conteniendo un Código JavaScript que pone al día el otro marco con solo re-escribiendo las capas "layers" o lo que sea. Esta es la forma más fácil de hacerlo, es bastante directa, así que no la cubriré por el momento.
Interacción Java Cliente-Server (Servlet)
Esto probablemente funcionará bien. Como sea el caso tienes que estar utilizando un server que da soporte a Servlets y esto para poder realizarlo requerirá bastante trabajo. Tal vez trabajaré en crear un servelet y así veré si funcionara. Este proceso será como así:
| JavaScript | Applet | Servlet | Applet | JavaScript |
| Utiliza conexiones en vivo para ejecutar funciones en el applet | el applet se comunica directamente con el lado del server java | el servlet procesa lo solicitado ( escribe ficheros, llama a procesadores de data, lo que sea) y luego se comunica de vuelta con al applet | el applet manda al JavaScript los resultados | enseña los resultados del proceso con escribir capas |
Formulando formularios a la Capas
La técnica básica de utilizar es realmente solo un derivado de la técnica cargar ficheros externos. Carga los ficheros externos que son generados por un CGI script o un equivalente proceso server-side como ASP; PHP; Java Servlet, o cualquier número de lenguajes de un procesador de datos web, como ColdFusion, Domino, Oracle etc. La parte buena es que puedes mandar cualquier información a un CGI con solo presentar los formularios HTML, o con cambiando la localización de la página (es la forma en que CGI usualmente trabaja). El punto importante de desarrollar un interface DHTML es de hacer que la página sea estática, pero mantener la información contenida en este dinámica y que se puede updatear. Esto significa que nunca podrás cambiar la localización de la página, debes de cargar los ficheros (conteniendo nueva información generada por el CGI) en capas contenidas dentro de la página estática.
Para comunicarse con un server utilizando un proceso normal de CGI hay solamente una solución tira de preguntas "query strings".
Tu script CGI tiene que ser capaz de aceptar una tira de preguntas (query string) en lugar de lo normal, valores parseados de la forma. Usaremos una tira de preguntas para pasar toda la data relevante al CGI- yo utilizaré un Perl script simple para llevar a cabo esta tarea.
La forma más fácil de reunir data es a través de Formularios HTML. Pero tienes que reconocer que esa no es la única manera de reunir data. Puedes crear tus propios elementos GUI para encender o apagar artefactos "widget" o cualesquiera otras ideas locas que tengas. Para hacerlo simple este ejemplo estaré solamente utilizando una Forma sencilla que preguntará cuál es tu favorito sistema operativo:
<form name="myform"> <p>Mi favorito sistema operativo es: <p><input type="Radio" name="os" value="win9x">Windows 95/98 <br><input type="Radio" name="os" value="winnt">Windows NT 3.5/4.0 <br><input type="Radio" name="os" value="mac">MacOS 7/8 <br><input type="Radio" name="os" value="linux">Linux <br><input type="Radio" name="os" value="solaris">Solaris <br><input type="Radio" name="os" value="freebsd">FreeBSD <br><input type="Radio" name="os" value="beos">BeOS <br><input type="Radio" name="os" value="handheld">Handheld (PalmOS/WinCE) <br><input type="Radio" name="os" value="otherunix">Other Unix-based <p> <input type="button" value="Submit" onClick="submitForm()"> </form>
Nota que no hay "ACTION" asociada con el tag Forma "Form", esto es prohibido. Debes de crear una función JavaScript de alguna forma para colectar tu data en variables individuales. En mi caso lo único que necesito saber es cual sistema operativo fue seleccionado. Entonces he creado una función submitForm() para tomar ese valor cuando el botón presentar "Submit" es cliqueado:
function submitForm() {
for (var i=0;i<document.myform.os.length;i++) {
if (document.myform.os[i].checked) {
var os = document.myform.os[i].value
break
}
}
alert(os)
}
Ver cgicomm1-form.html para ver la Forma "Form"
Antes de que nos vallamos primero de cabeza escribiendo un Perl script grande, debemos de hacer una pequeña prueba para estar seguros que va a trabajar: lo que hice fue crear un resultado "results" capa el cual va a contener el generador-Perl de páginas externas. Para cargar la página utilizaré el método DynLayer cargar() "DynLayer load()". Porque el método cargar() "load()" utiliza un IFRAME llamado "bufferFrame" debemos de incluir eso también. Si no lo hiciste lee él DynLayer load() sección, recomiendo que lo hagas ahora para que entiendas que es lo que estoy haciendo.
El CSS (auto-generador vía el css() función):
writeCSS (
css('resultsText',250,30)+
css('resultsDiv',250,50,200,100,'#c0c0c0')
)
Los Div's:
<iframe style="display:none" name="bufferFrame"></iframe> <div id="resultsText"><b>Results Layer:</b></div> <div id="resultsDiv"></div>
Para utilizar el método DynLayer load(), debemos de tener los dos, el dynlayer.js y el dynlayer-common.js (el cual contiene la función de cargar "load") en la página:
<script language="JavaScript" src="../dynapi/dynlayer.js"></script> <script language="JavaScript" src="../dynapi/dynlayer-common.js"></script>
El resultsDiv capa deberá de ser iniciada (DynLayerInit() puede ser utilizada) y el método load() aplicado a este:
function init() {
DynLayerInit()
results.load = DynLayerLoad
}
Cuando el formulario es presentado, deberemos de cambiar la localización - con utilizar el método load() - directamente en el Perl script:
function submitForm() {
for (var i=0;i<document.myform.os.length;i++) {
if (document.myform.os[i].checked) {
var os = document.myform.os[i].value
break
}
}
results.load("/cgi-bin/dynduo/cgicomm-test.pl")
}
Para este caso de "prueba", el cgicomm-test.pl script puede ser simple, este justamente escribirá una página simple que hace lo que todos los ficheros externos harían - llamar de vuelta al layer que esta siendo cargada á, para completar la secuencia de cargamento.
#!/usr/local/bin/perl print "Content-type: text/html\n\n"; print "<html*gt;<body onLoad=\"parent.results.loadFinish()\"*gt;\n"; print "This text came from a perl script!"; print "</body*gt;</html*gt;\n";"javascript:viewExample('cgicomm2-cgitest.html')"
Ver cgicomm2-cgitest.html [fuente] - para una vista preliminar de un DHTML a una técnica de comunicación CGI
Como puedes ver el proceso trabaja bien, entonces vamos a terminarlo...
Para este ejemplo el Perl script realmente no hace nada excepto de reunir tiras de preguntas (solo una tira actualmente - "os"), y luego imprimirá una página.
#!/usr/local/bin/perl
# Get the query strings
@qsets = split (/&/,$ENV{'QUERY_STRING'});
foreach $qset (@qsets) {
@qsetpart = split(/=/, $qset);
$qstr{$qsetpart[0]} = $qsetpart[1];
}
# make a list of the full names for the OSes
$osNames{'win9x'} = "Windows 95/98";
$osNames{'winnt'} = "Windows NT 3.5/4.0";
$osNames{'mac'} = "MacOS 7/8";
$osNames{'linux'} = "Linux";
$osNames{'solaris'} = "Solaris";
$osNames{'freebsd'} = "FreeBSD";
$osNames{'beos'} = "BeOS";
$osNames{'handheld'} = "Handheld (PalmOS/WinCE)";
$osNames{'otherunix'} = "Other Unix-based";
# toma el nombre entero del OS que fue seleccionado y mándalo como una tira de preguntas 'os'
$os = $osNames{$qstr{'os'}};
# imprima la página
print "Content-type: text/html\n\n";
print "<html><body onLoad=\"parent.results.loadFinish()\">\n";
print "This text came from a perl script!";
print "<p>You have chosen:<br>$os\n";
print "</body></html>\n";
Para probar este script puedes indicar al browser el script con una tira de preguntas manualmente pegada: /cgibin/dynduo/cgicomm.pl?os=win9x. Causará un error JavaScript cuando este trata de encontrar los resultados "results" capa, pero puedes ver que el script trabaja bien.
Hay solamente un cambio pequeño que debemos hacer en el Javascript para terminar todo. Necesitamos de mandar los variable "os" a el perl script cuando presentes la forma:
if (os) results.load("/cgi-bin/dynduo/cgicomm.pl?os="+os)
Y Voila! Tenemos el DHTML y JavaScript trabajando conjuntamente con el Perl!
Ver cgicomm3-final.html [fuente] - para ver el DHTML-a un-CGI ejemplo de comunicacion.
Como puedes ver no es tan dificultoso. Esta idea general puede ser extrapolada significantemente a una amplia abertura de posibilidades. Estaré haciendo mas trabajo en esto, trataré tal vez de crear un DHTML interface para mi Forum. Y estaré expandiendo en esta técnica avanzadamente en el futuro.
| Casa | Próxima Lección: Audio Controls |