zurück
Autor: Bernhard Elbl
Erstellt am: 18 Jan 2002 11:42

HTML nachladen - ohne Refresh oder Remote

Wenn Sie eine HTML-Seite geladen haben, befindet sich die komplette Seite auf dem Client. Die Ansicht kann mittels Javascript verändert werden. Texte können ausgeblendet, eingeblendet werden. Was ist aber, wenn Sie Informationen nachladen wollen?

Wann muss ich überhaupt nachladen?
Beispiel: Ein User gibt seine Postleitzahl in eine Form ein. Jetzt soll automatisch der Ortsname in ein weiteres Feld eingetragen werden. Jetzt haben Sie 3 absolute verschiedene Möglichkeiten!
1 - Sie haben alle PLZ und Ortsnamen bereits geladen und blenden Sie mit Hilfe von Javascript ein! Der Nachteil ist offensichtlich. Alle PLZ und Ortsnamen mussten vorher bereits empfangen werden! Ein riessen Daten-Traffic ist die Folge.
2 - Sie führen eine POST aus und ermitteln den Ortsnamen. Die Seite wird dann wieder komplett neu geladen! Besser als Variante 1, aber trotzdem nicht wirklich gut.
3 - Sie teilen dem Server die PLZ mit und empfangen einfach nur den Ortsnamen passend zur PLZ. --> minimaler Traffic und schnell.

Die 3. Variante werde ich jetzt zeigen. Der Trick hierbei ist ein Internet Explorer Feature zu nutzen - "showModalDialog()"
Diesen habe ich bereits in einem Artikel vorgestellt.

So funktioniert´s:
Eine Webseite öffnet per Javascript den ModalDialog mit der Methode "showModalDialog". Die aufgerufene Seite kann einen Parameter an die Aufruferseite übergeben. Da der ModalDialog mit Name und Querystrings aufgerufen werden darf, kann der Server die Seite und damit auch den Javascript-Parameter dynamisch generieren.

noRemote.htm - die Hauptseite

<HTML>
<HEAD>
<SCRIPT LANGUAGE=javascript>
<!--
 function getSomeThing(sText)
 {
  var sLnk = 'noRemoteFetcher.asp?ToDo=DoThis&ID=' + sText

  var x = new Array();
  x = showModalDialog(sLnk,'','dialogHeight: 50 px; dialogWidth: 400 px; status: no;');
  for (i=0; i<x.length; i++)
  {
   document.all.iLoadedText.innerHTML+=x[i];
   document.all.iLoadedText.innerHTML+='<br>';
  }
 }
//-->
</SCRIPT>
</HEAD>
<input type="text" name="text1" id="text1">
<input type="button" onclick="getSomeThing(document.all.text1.value);" value="Nachladen">
<div id="iLoadedText"></div>
</BODY>
</HTML>

!!! Der Inhalt des Textfeldes "text1" fliesst in den Querystring mit ein !!!

noRemoteFetcher.asp - der ModalDialog

<%@ Language=VBScript %>
<%
dim sToDo  ' --- Was ist zu tun ?
dim sData  ' --- Der Inhalt des Javascript-Arrays
dim sJava  ' --- Der Javascript-Code

sToDo = Request.QueryString("ToDo")
select case sToDo
 case "DoThis"
  ' --- Javascript Anweisungen generieren
  sData = "'Werte','die','wir übergeben','" & Request.QueryString("id") & "'"

  sJava = "var arrContent = new Array(" & sData & ");" & vbCrlf
  sJava = sJava & "window.returnValue=arrContent;" & vbCrlf
  sJava = sJava & "window.close();"

end select
%>
<HTML>
<HEAD>
<SCRIPT LANGUAGE=javascript>
<!--
 var i = new Number(0);
 setInterval('Loading()', 100);
 function Loading()
 {
  document.all.iLoading.innerHTML+='@';
  i++;
  if (i > 3) CallBack();
 }
 function CallBack()
 {
  <%=sJava%>
 } 
//-->
</SCRIPT>
</HEAD>
<BODY><div id="iLoading"><b>Loading</b></div></BODY></HTML>

Zum Ausprobieren gibt unten die Source-Codes als ZIP-File


 

© Copyright 2008 ppedv AG