EvoComp - JavaScript Beispiel: Zusammenspiel von JavaScript und Ajax (elementarer Bestandteil der Web 2.0-Technologie)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>EvoComp - JavaScript Beispiel: Zusammenspiel von JavaScript und Ajax (elementarer Bestandteil der Web 2.0-Technologie)</title> <meta name="description" content="Mit der Kombination JavaScript und Ajax lassen sich auf asynchronem Übertragungsweg Daten nachladen und in ein HTML-Dokument integrieren (Web 2.0)." /> <meta name="keywords" lang="de" content="javascript ajax,java script ajax,ajax,java script,javascript,javascripts,web 2.0,beispiel,beispiele,request objekt,java,script" /> <meta name="language" content="de" /> <meta http-equiv="content-language" content="de" /> <meta name="robots" content="index,follow,noarchive" /> <meta name="date" content="2007-09-23"> <meta name="DC.Date" content="2007-09-23"> <base href="http://www.evocomp.de/beispiele/javascript/ajax.html"> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta name="author" content="Alexander Müller"> <meta name="DC.Creator" content="Alexander,Müller"> <meta name="DC.Publisher" content="Alexander,Müller"> <meta name="DC.Contributor" content="Alexander,Müller"> <meta name="DC.Type" content="Text"> <meta name="DC.Format" content="text/html"> <meta name="DC.Identifier" content="http://www.evocomp.de/"> <meta http-equiv="expires" content="0"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="icon" href="/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> <link rel="stylesheet" type="text/css" href="/portal.css"> <script src="/portal.js" type="text/javascript"></script> <meta name="revisit-after" content="15 days"> <meta http-equiv="pragma" content="no-cache"> <meta name="audience" content="Alle"> </head> <body> <a id="top" name="top"><img class="transparent" border="0" name="icount" src="/pic/transparent.gif" alt=""></a> <script language="javascript" type="text/javascript">  </script> <a href="/" title=""><img class="logo" border="0" src="/pic/logo_evocomp.jpg" alt=""></a> <p class="banner"> <a href="http://www.kunstundreisen.de" rel="nofollow" title="" target="_blank"><img border="0" src="http://www.kunstundreisen.de/mehr/verlinkung/grafiken/kunstundreisen_468_60.gif" width="468" height="60" alt=""></a> <img border="0" src="/pic/ad.gif" alt=""> </p> <div id="container"> <ul id="topmenu"> <li><a href="/index.html" title="Startseite">Home</a></li> <li><a href="/sitemap.html" title="Seitenstruktur">Sitemap</a></li> <li><a href="/contact.html" title="Kontakt">Kontakt</a></li> <li><a href="/imprint.html" title="Impressum">Impressum</a></li> </ul> <div id="contentcontainer"> <div id="breadcrumb">Sie sind hier: <a href="/index.html" title="Startseite">Home</a> :: <a href="/beispiele/beispiele.html" title="Beispiele Script">Beispiele</a> :: <a href="/beispiele/javascript/javascripts.html" title="JScript / JavaScripts / JavaScript Beispiele">JavaScript</a> :: <a href="/beispiele/javascript/ajax.html" title="ajax Java Script">Ajax</a> </div> <div id="sample"> <ul> <li>Beispiele</li> <li>Methoden</li> <li><a href="/beispiele/javascript/alert.html" title="java script alert javascript">» alert</a></li> <li><a href="/beispiele/javascript/back.html" title="window back javascript">» back</a></li> <li><a href="/beispiele/javascript/clearinterval.html" title="clearinterval javascript">» clearInterval</a></li> <li><a href="/beispiele/javascript/cleartimeout.html" title="cleartimeout javascript">» clearTimeout</a></li> <li><a href="/beispiele/javascript/window-close.html" title="javascript window close javascript">» close</a></li> <li><a href="/beispiele/javascript/confirm.html" title="window confirm javascript">» confirm</a></li> <li><a href="/beispiele/javascript/getelementbyid.html" title="document getelementbyid javascript">» getElementById</a></li> <li><a href="/beispiele/javascript/indexof.html" title="indexof javascript">» indexOf</a></li> <li><a href="/beispiele/javascript/window-open.html" title="javascript window open javascript">» open</a></li> <li><a href="/beispiele/javascript/print.html" title="window print javascript">» print</a></li> <li><a href="/beispiele/javascript/prompt.html" title="window prompt javascript">» prompt</a></li> <li><a href="/beispiele/javascript/reload.html" title="java script reload javascript">» reload</a></li> <li><a href="/beispiele/javascript/location-replace.html" title="java script replace javascript">» replace (Location)</a></li> <li><a href="/beispiele/javascript/setinterval.html" title="window setinterval javascript">» setInterval</a></li> <li><a href="/beispiele/javascript/settimeout.html" title="window settimeout javascript">» setTimeout</a></li> <li><a href="/beispiele/javascript/split.html" title="split javascript">» split</a></li> <li><a href="/beispiele/javascript/substring.html" title="substring javascript">» substring</a></li> <li><a href="/beispiele/javascript/write.html" title="document write javascript">» write</a></li> <li>Eigenschaften</li> <li><a href="/beispiele/javascript/location-href.html" title="location href javascript">» href (Location)</a></li> <li><a href="/beispiele/javascript/document-url.html" title="url javascript">» url</a></li> <li>Objekte</li> <li><a href="/beispiele/javascript/array.html" title="java script array javascript">» Array</a></li> <li><a href="/beispiele/javascript/date.html" title="javascript datum,zeit / time,date javascript">» Date</a></li> <li><a href="/beispiele/javascript/document.html" title="java script document javascript">» Document</a></li> <li><a href="/beispiele/javascript/event.html" title="event javascript">» Event</a></li> <li><a href="/beispiele/javascript/history.html" title="java script history javascript">» History</a></li> <li><a href="/beispiele/javascript/location.html" title="java script location javascript">» Location</a></li> <li><a href="/beispiele/javascript/string.html" title="java script string javascript">» String</a></li> <li><a href="/beispiele/javascript/style.html" title="CSS Style javascript">» Style (CSS)</a></li> <li><a href="/beispiele/javascript/window.html" title="java script window javascript">» Window</a></li> <li>Ereignisse (Events)</li> <li><a href="/beispiele/javascript/event-onclick.html" title="onclick javascript">» onclick</a></li> <li><a href="/beispiele/javascript/event-onload.html" title="onload javascript">» onload</a></li> <li><a href="/beispiele/javascript/event-onchange.html" title="onchange javascript">» onchange</a></li> <li>Sprache</li> <li><a href="/beispiele/javascript/for.html" title="for javascript">» for</a></li> <li><a href="/beispiele/javascript/for-in.html" title="for in javascript">» for in</a></li> <li><a href="/beispiele/javascript/for-each.html" title="for each javascript">» for each</a></li> <li><a href="/beispiele/javascript/function.html" title="function javascript">» function</a></li> <li><a href="/beispiele/javascript/if.html" title="if javascript">» if</a></li> <li><a href="/beispiele/javascript/switch.html" title="switch javascript">» switch</a></li> <li><a href="/beispiele/javascript/while.html" title="while javascript">» while</a></li> <li><a href="/beispiele/javascript/do-while.html" title="do while javascript">» do ... while</a></li> <li><a href="/beispiele/javascript/variable.html" title="variable javascript">» Variable</a></li> <li><a href="/beispiele/javascript/try-catch.html" title="try javascript">» try (Exceptions)</a></li> <li>Ajax</li> <li><a href="/beispiele/javascript/ajax.html" title="ajax javascript">» Ajax</a></li> <li>Sonstiges</li> <li><a href="/beispiele/javascript/bilder.html" title="bilder javascript">» Bilder</a></li> <li><a href="/beispiele/javascript/browser.html" title="browser javascript">» Browser</a></li> <li><a href="/beispiele/javascript/checkbox.html" title="checkbox javascript">» Checkbox</a></li> <li><a href="/beispiele/javascript/cookies.html" title="cookies javascript">» Cookies</a></li> <li><a href="/beispiele/javascript/countdown.html" title="countdown javascript">» Countdown</a></li> <li><a href="/beispiele/javascript/cursor.html" title="cursor javascript">» Cursor</a></li> <li><a href="/beispiele/javascript/div.html" title="div javascript">» DIV</a></li> <li><a href="/beispiele/javascript/dom.html" title="dom javascript">» DOM</a></li> <li><a href="/beispiele/javascript/fenster.html" title="html fenster javascript">» Fenster</a></li> <li><a href="/beispiele/javascript/form.html" title="form javascript">» Form</a></li> <li><a href="/beispiele/javascript/html.html" title="html javascript">» HTML</a></li> <li><a href="/beispiele/javascript/popup.html" title="popup javascript">» PopUp</a></li> <li><a href="/beispiele/javascript/redirect.html" title="redirect javascript">» redirect</a></li> <li><a href="/beispiele/javascript/submit.html" title="submit javascript">» submit</a></li> <li><a href="/beispiele/javascript/textarea.html" title="textarea javascript">» Textarea</a></li> <li><a href="/beispiele/javascript/trim.html" title="string trim javascript">» trim String</a></li> <li><a href="/beispiele/javascript/void.html" title="void javascript">» void</a></li> <li><a href="/beispiele/javascript/xml.html" title="xml javascript">» XML</a></li> </ul> </div> <h1 class="notopmargin">JavaScript & Ajax (Bestandteil des Web 2.0)</h1> <p class="norm"> <strong>Ajax (die Kurzform von Asynchronous JavaScript and XML)</strong> ist ein Verfahren zur <strong>asynchronen Datenübertragung</strong>. Dabei wird zur Erlangung des Datenmaterials – im Gegensatz zu konventionellen Methoden – <strong>nicht die ganze Seite neu geladen</strong>, sondern lediglich die zur Darstellung benötigten Daten nachgeladen. Die auf diese Weise ermittelten Daten werden mit Hilfe von <strong>JavaScript</strong> in das bereits im <strong>Browserfenster</strong> befindliche HTML-Dokument integriert. </p> <p class="norm"> Dazu bedient man sich den durch das <strong>Document Object Model (<a href="/beispiele/javascript/dom.html" title="dom java script">DOM</a>)</strong> gegebenen Möglichkeiten, <strong>Seiteninhalte dynamisch anzupassen</strong>. Mit Hilfe dieser Technologie lassen sich einzelne <strong>Bestandteile einer Internetseite</strong> oder zur individuellen Darstellung bestimmte Nutzdaten einer Internetseite bei Bedarf <strong>nachladen</strong>. Der Begriff Ajax wurde Anfang 2005 durch einen Artikel von Jesse James Garrett eingeführt. <span class="fett">Entsprechende Ajax-Anwendungsbeispiele mit kommentiertem Quellcode finden Sie auf den <a href="/beispiele/javascript/ajax-2.html" title="ajax get request">Folgeseiten</a>.</span> </p> <p class="norm"> Neu war das hinter Ajax stehende Konzept zum Zeitpunkt der Begriffsfindung allerdings nicht mehr. Die zugrundeliegenden Technologien waren bereits Ende der 1990er Jahre vorhanden. Als <strong>elementarer Bestandteil des Web 2.0</strong> getauften &bdquo;neuen Internet” erlangte Ajax in den letzten Jahren in erheblichem Maße an Bedeutung. Die <strong>Interaktion mit dem Benutzer</strong> wird durch <strong>Verwendung von Ajax</strong> erheblich beschleunigt. Dadurch &bdquo;fühlt” sich eine mit Ajax implementierte <strong>Webanwendung</strong> eher wie eine lokale Anwendung als wie ein <strong>Webservice</strong> an. </p> <p class="norm"> Auch wird die zu übertragende Datenmenge deutlich reduziert, was zu einer Entlastung der zur Verfügung stehenden Übertragungswege des Internet führt – bestehende Bandbreite wird optimal ausgenutzt. Im Gegensatz zu anderen Verfahren werden keine zusätzlichen Browser-Plugins benötigt, wodurch die Hürden zur Nutzung dynamischer Dienste äußerst gering gehalten werden. </p> <p class="norm"> Basis einer jeden <strong>Ajax-Anwendung</strong> ist das <strong>XMLHttpRequest-Objekt</strong>. Dieses Objekt ist Dreh- und Angelpunkt bei der <strong>ansynchronen Kommunikation des Browsers mit dem Webserver</strong>. Mittels XMLHttpRequest-Objekt werden einzelne <strong>HTTP-Anfragen</strong> an den Webserver gerichtet, wobei Parameter – auf die selbe Art und Weise, wie bei &bdquo;normalen” dynamisch erzeugten Internetseiten – entweder per <strong><a href="/beispiele/javascript/ajax-3.html" title="ajax get javascript ajax">Get</a> oder per <a href="/beispiele/javascript/ajax-4.html" title="ajax post javascript ajax">Post</a> übertragen</strong> werden. Als Antwort liefert der Webserver allerdings in den meisten Fällen nicht die üblichen <strong>(X)HTML-Dateien</strong>, sondern lediglich Nutzdaten, die dann per <strong>JavaScript (DHTML)</strong> in die bereits dargestellte Seite integriert werden. </p> <p class="norm"> Die gelieferten Nutzdaten werden meist in Form von <strong><a href="/beispiele/javascript/xml.html" title="xml ajax javascript">XML</a>-Dateien</strong> vom Server verschickt. Aber auch die Übertragung der Nutzdaten als normale Textdateien ist möglich. Das <strong>XML-Format</strong> hat allerdings den Vorteil, dass die in JavaScript bereits integrierten Methoden zum Umgang mit Daten in <strong>XML-Struktur</strong> enthalten sind. So können beispielsweise die Methoden getElementsByTagName, getAttributeNode und getAttribute des Node-Objekts verwendet werden, um auf die <strong>Elemente und Attribute einer XML-Datei</strong> zuzugreifen. Eine Textdatei muss dagegen manuell per JavaScript &bdquo;auseinandergepflückt” werden, bevor die Nutzdaten in das <strong>HTML-Dokument integriert</strong> werden können. </p> <p class="norm"> Wann ein <strong>Ajax-Request</strong> abgesetzt wird hängt davon ab, inwiefern Informationen vorliegen müssen, die bei der Anfrage an den Server gesendet werden müssen. Die nötigen Daten können beispielsweise in einem Formular, welches zuvor ausgefüllt werden muss, eingetragen werden. Bestätigt der Benutzer diese Eingabe, so wird der Request samt Parameter an den Server gesendet. Auch werden verschiedene <a href="/beispiele/javascript/event.html" title="events java script">Events</a> genutzt um das Senden einer Ajax-Anfrage einzuleiten. Werden keine weiteren Informationen zur parametrisierung einer Anfrage benötigt, so kann das <a href="/beispiele/javascript/event-onload.html" title="onload java script">onLoad-Event</a> verwendet werden, welches automatisch nach Laden der Seite ausgelöst wird. Mit dem <a href="/beispiele/javascript/event-onclick.html" title="onclick java script">onClick-Event</a> kann eine Ajax-Abfrage gestartet werden, wenn der Benutzer auf ein bestimmtes HTML-Element geklickt hat. Welche Variante zur Anwendung kommt, hängt dabei stets vom Anwendungsfall und dem zu modellierenden Prozess ab. </p> <p class="navbottom"> <span class="next"> <a href="/beispiele/javascript/ajax-2.html" title="ajax status und ablauf eines ajax requests">weiter zu Seite 2</a> <a href="/beispiele/javascript/ajax-3.html" title="ajax get java script ajax get">3</a> <a href="/beispiele/javascript/ajax-4.html" title="ajax post java script ajax post">4</a> <a href="/beispiele/javascript/ajax-5.html" title="ajax head java script ajax head">5 »</a> </span> </p> </div> <div id="left"> <div class="containerblock"> <p class="title">¬ Menu</p> <ul class="content"> <li><a href="/themen/evolutionsalgorithmen/evoalg.html" title="Evolutionäre Algorithmen">» Evolutionsalgorithmen</a></li> <li><a href="/softwareentwicklung/software-entwicklung.html" title="Software-Entwicklung">» Softwareentwicklung</a></li> <li><a href="/tutorials/tutorial.html" title="Tutorials / Tutorien">» Tutorials</a></li> <li><a href="/scripts/skripte.html" title="Free Scripts / Gratis Skripte Download">» Scriptarchiv</a></li> <li><a href="/beispiele/beispiele.html" title="Beispiele Scripts">» Beispiele</a></li> <li><a href="/beispiele/javascript/javascripts.html" title="JavaScripts / JavaScript Beispiel">    » JavaScript</a></li> <li><a href="/beispiele/php/php.html" title="PHP Script">    » PHP</a></li> <li><a href="http://forum.evocomp.de/" target="_blank" title="Forum Webentwicklung / Webprogrammierung">» Forum</a></li> <li><a href="/historie/historie.html" title="Historie">» Historie</a></li> <li><a href="/glossar/glossar.html" title="Glossar">» Glossar</a></li> <li><a href="/links/links.html" title="Links">» Links</a></li> <li><a href="/literatur/literatur.html" title="Literatur">» Literatur</a></li> <li><a href="/visitenkarte/index.html" title="Visitenkarte" target="_blank">» Visitenkarte</a></li> </ul> </div> <div class="containerblock"> <p class="title">¬ Gratis Download</p> <ul class="content"> <li><a href="/scripts/java-script-download/java-script-galerie/javascript-galerie.html" title="html galerie">Online Galerie</a></li> <li><a href="/scripts/php-scripts-download/php-bilder-galerie/php-photo-galerie.html" title="galerie erstellen">PHP Galerie</a></li> <li><a href="/scripts/php-scripts-download/php-counter-class/php-counter-script.html" title="besucherzähler für homepage">Gratis Counter</a></li> <li><a href="/scripts/java-script-download/java-script-fontsize/javascript-fontsize.html" title="html fontsize">Schriftgröße ändern</a></li> </ul> </div> <div class="containerblock"> <p class="title">¬ Seminare</p> <ul class="content"> <li><a href="/beispiele/javascript/seminar-schulung-kurs-lernen.html" title="JavaScript lernen">JavaScript Kurs</a></li> <li><a href="/beispiele/php/lernen-kurs-schulung-seminar.html" title="PHP lernen">PHP Kurs</a></li> </ul> </div> <br/><br/> <div class="containerblock"> <p class="title">¬ Yoga</p> <ul class="content"> <li><a href="/yoga/deutschland/yoga-koeln.html" title="Yoga in Köln">Yoga Köln</a></li> <li><a href="/yoga/hatha-yoga.html" title="Hatha Yoga Köln">Hatha Yoga</a></li> <li><a href="/yoga/buecher/yoga-buch.html" title="Yoga Buch">Yoga Bücher</a></li> </ul> </div> <div class="containerblock"> <p class="title">¬ Insolvenzrecht</p> <ul class="content"> <li><a href="/insolvenz/insolvenzrecht-buch.html" title="Insolvenzrecht Buch">Literatur Insolvenzrecht</a></li> </ul> </div> </div> <div id="right"> <div class="containerblock"> <p class="title">¬ News</p> <p class="content"> <span class="latest_news_date">15.08.2008</span><span class="latest_news">Schleifen in PHP: Die While-Schleife <a href="/news/15_08_2008.html" title="Meldung vom 15.08.2008">» mehr</a></span> <span class="latest_news_date">13.08.2008</span><span class="latest_news">Nutzung von Variablen unter PHP: Definition, Sichtbarkeit und vordefinierte Variablen <a href="/news/13_08_2008.html" title="Meldung vom 13.08.2008">» mehr</a></span> <span class="latest_news_date">11.08.2008</span><span class="latest_news">Ausgabe von Datum und Zeit mit PHP nach Konvertierung in ein String <a href="/news/11_08_2008.html" title="Meldung vom 11.08.2008">» mehr</a></span> <span class="news_liste_hinweis">Eine vollständige News-Liste ist auf der <a href="/news/news.html" title="News Seite">News-Seite</a> zugänglich.</span> </p> </div> <div class="containerblock"> <p class="title">¬ Foren</p> <ul class="content"> <li> <div style="display:inline;float:right;width:130px;"> <a href="http://forum.evocomp.de/f7/" target="_blank" title="JavaScript Hilfe">JavaScript Forum</a><br> <a href="http://forum.evocomp.de/f8/" target="_blank" title="PHP Hilfe">PHP Forum</a><br> </div> <img width="48" height="48" src="/pic/forum_icon.gif" alt="Foren" /> </li> </ul> </div> <div class="containerblock"> <p class="title">¬ Buchtipp</p> <p class="content"> <span class="book"><a href="http://ad.zanox.com/ppc/?5685652C554664482T&ULP=[[23051792]]" rel="nofollow" title="" target="_blank"><img border="0" src="http://bilder.buecher.de/produkte/23/23051/23051792k.jpg" alt="" /><br />JavaScript & AJAX, m. DVD-ROM</a><br /></span> <span class="book"><hr /> Weitere JavaScript Literaturtipps finden Sie unter <a href="/beispiele/javascript/buecher.html" title="">JavaScript Bücher</a> </span> </p> </div> </div> </div> <div id="copyright"> <script language="javascript" type="text/javascript">  </script> <noscript> © 2004-2025 Alexander Müller<br> <a href="http://call-center.evocomp.de" title="">Call Center Central</a> </noscript> <br><a href="http://www.EvoComp.de" title="Homepage von www.EvoComp.de">www.EvoComp.de</a><br> Letzte Änderung: 23.09.2007 <p> <img border="0" src="/pic/valid-html4.01.png" width="80" height="15" alt="Valid HTML 4.01!" title="Valid HTML 4.01!">      <img border="0" src="/pic/valid-css.png" width="80" height="15" alt="Valid CSS!" title="Valid CSS!"> <br><br> <a href="http://www.gadgets4web.net/service/web-design.html" title="erstellen Internetseite, Köln">Webdesign</a> • <a href="http://www.gadgets4web.net/service/beratung.html" title="Internetseiten, Köln">Beratung Internetseite</a> • <a href="http://www.gadgets4web.net/service/web-entwicklung.html" title="Internetseite programmieren, Köln">Programmierung Internetseite</a> </p> </div> </body> </html>

CINXE.COM

EvoComp - JavaScript Beispiel: Zusammenspiel von JavaScript und Ajax (elementarer Bestandteil der Web 2.0-Technologie)