Mehr als ein Putzmittel

AJAX und XML in der Praxis
Kommentare

AJAX – Asynchronous JavaScript and XML – beschäftigt die Online-Gemeinde immer mehr. Es ermöglicht die Entwicklung von Webapplikationen, die Desktop-Anwendungen ähneln. Auch wenn die Technologie erfahrenen Entwicklern nicht unbekannt ist, leistet sie doch einen sinnvollen Beitrag, um Webapplikationen interaktiver und benutzerfreundlicher zu machen. Inwieweit XML dabei zum Tragen kommt, zeigen wir in diesem Artikel.

Ein großes Manko war bis jetzt die Tatsache, dass vom Server immer nur ein simpler String geliefert wird. Eine Serialisierung komplexer Daten wird zwar serverseitig vielfältig unterstützt, clientseitig ist das aber recht mühsam. Das XML-HttpRequest-Objekt bietet nun jedoch eine eingebaute Möglichkeit, strukturierte Daten zu verwenden: XML. Doch damit nicht genug: JavaScript ermöglicht es außerdem, diese XML-Daten in den meisten relevanten Browsern weiterzuverarbeiten, und zwar unter anderem auf die folgenden drei Arten:

  • Durch direkten DOM-Zugriff auf die XML-Daten
  • Durch XPath-Suchen in den Daten
  • Durch XSLT-Umwandlungen der Daten

Ein kleines Problem soll aber nicht verschwiegen werden. Die zwei großen Herstellergruppen bei den relevanten Webbrowsern – Microsoft und der Rest – vertreten unterschiedliche Ansichten davon, wie diese Unterstützung aussehen soll. Um alle Unterschiede und Feinheiten verstehen zu können, bedarf es eines modernen JavaScript-Buchs und viel, viel Geduld. Deswegen gehen wir hier einen etwas frustfreieren Weg. In fast allen Fällen benötigen Sie nur bestimmte Funktionalitäten im Bereich XML, XPath und XSLT. Beispielsweise geht es bei XML darum, Knoten zu finden und auf deren Werte und Attribute zuzugreifen. Die Beispiele hier legen also den Schwerpunkt auf diese Funktionalität und zeigen, wie sie browserunabhängig umgesetzt werden kann.

XML per AJAX laden

Für die Verarbeitung von XML-Daten per AJAX ist zunächst einmal XML vonnöten. Um die Beispiele möglichst einfach und vor allem von serverseitigen Technologien unabhängig zu halten, setzen wir auf statische Daten (Listing 1).

Listing 1
-------------------------------------------------------------------------------------------------------
Die Beispiel-XML-Daten (daten.xml) 
AJAX - WikipediaBackground about the web                                               developmenttechnique for creating interactive web applications.http://en.wikipedia.org/wiki/AJAXAjax: A New Approach to Web Applications Title>
    <summary>Essay by Jesse James Garrett from Adaptive Path.</summary>http://www.adaptivepath.com/publications/essays/archives/000385.phpAFC AjaxOfficial site. Club information, match reports, news, and much more.http://www.ajax.nl/

Diese XML-Datei ist ein vereinfachter Auszug aus dem, was der Such-Web-Service von Yahoo! zurückliefert.

Diese XML-Datei enthält ein Wurzelelement, , sowie einzelne Unterelemente namens . Jedes dieser „Resultate“ umfasst einen Titel (</em>), eine Beschreibung/Zusammenfassung (<em><Summary></em>) und einen URL (<em></em>). Ziel der meisten Listings soll es sein, diese Daten schön formatiert auszugeben, was auch in tatsächlichen Projekten immer wieder eine Herausforderung darstellt. Wenn Sie das XMLHttpRequest-Objekt verwenden, gibt es nicht nur die Eigenschaft <em>responseText</em> zur Abfrage des Rückgabewerts, sondern auch die Eigenschaft <em>responseXML</em>. Diese wandelt die Rückgabe vom Server in ein XML-DOM-Objekt um – sofern der XML-Code auch valide ist. Ansonsten hat <em>responseXML</em> den Wert null. Vor allem der Internet Explorer stellt noch eine zusätzliche Bedingung an die XML-Daten: Sie müssen den richtigen MIME-Typ haben, damit sie auch wirklich als XML erkannt werden. Im vorliegenden Beispiel hat die Datei auf dem Server die Endung <em>.xml</em>, weswegen der Server in der Regel automatisch den richtigen Typ in der HTTP-Antwort mitschickt. Sollte das unterbleiben, müssen Sie entweder den Webserver entsprechend konfigurieren oder Sie schreiben ein kleines Hilfsskript, das die XML-Datei samt korrektem MIME-Typ ausgibt. Nachfolgend sehen Sie exemplarisch ein solches Hilfsskript für PHP, das den korrekten HTTP-Header für den MIME-Typ setzt und dann die Datei <em>daten.xml </em> ausgibt: </p> <div class="sourcecode"> <pre></pre></div> <div class="piccontent"><img src="https://entwickler.de/wp-content/uploads/2006/09/wenz1_cs4550a89a22069.gif" /> <div class="pictitle">Abb. 1: Die Daten erscheinen in der HTML-Tabelle</div> </div> <div class="headline">XML weiterverarbeiten</div> <p>Der Wert der Eigenschaft <em>responseXML</em> ist bereits ein XML-DOM-Dokument, sodass es der Browser direkt weiterverarbeiten kann. Trotz aller Unterschiede der einzelnen Browser funktionieren diese Methoden und Eigenschaften auf allen relevanten Systemen: </p> <div class="listcontent"> <ul><li>Die Eigenschaft <em>documentElement</em> zeigt auf den Wurzelknoten im Dokument. </li> <li>Die Eigenschaft <em>xml</em> enthält den eigentlichen Inhalt des XML-Objekts als String. </li> <li>Die Methode <em>getAttribute()</em> bietet den Zugriff auf ein Attribut eines XML-Knotens. </li> <li>Eine Liste aller Knoten mit dem angegebenen Namen liefert die Methode <em>get-ElementsByTagName()</em> zurück. </li> <li>Die Eigenschaft <em>childNodes</em> enthält alle Kindknoten des aktuellen Knotens (und es gibt natürlich die anderen, von DOM her bekannten Eigenschaften wie <em>firstChild, nextSibling</em> etc.). </li> <li> <em>nodeName</em> und <em>nodeValue</em> enthalten den Namen und den Wert eines Knotens. </li> </ul></div> <p>Der Zugriff auf den Knotentext via <em>nodeValue</em> funktioniert allerdings nur bei Textknoten. Wenn also beispielsweise <em><a>b</a></em> vorliegt und der aktuelle Knoten <em><a></em> ist, müssen Sie mit <em>firstChild.node-Value </em> auf den Text <em>b</em> zugreifen. </p> <p>Und das ist tatsächlich (fast) alles, was man in der Regel braucht. Bei der Verarbeitung von XML-Daten durchläuft man entweder das gesamte XML-Dokument (hier sind <em>childNodes</em> und Konsorten sehr praktisch) oder man greift direkt auf bekannte und benannte Knoten zu (mit <em>get-ElementsByTagName())</em>. Im folgenden Beispiel sehen Sie von allem etwas. Ziel ist es, die Daten in der XML-Datei auf der Seite auszugeben. Dazu sind bereits ein paar HTML-Platzhalter vorgesehen: </p> <div class="sourcecode"> <pre><p><span id="Anzahl">0</span> von <span id="Gesamt">0</span> Treffern:</p> </pre><table id="Treffer"><thead><tr><th>Titel</th><th>Beschreibung</th><th>URL</th></tr></thead></table></div> <p>Am einfachsten ist es natürlich, die beiden <em><span></em>-Elemente <em>Anzahl</em> und <em>Gesamt</em> zu füllen; die zugehörigen Informationen stehen direkt im Wurzelknoten der XML-Daten: </p> <div class="sourcecode"> <pre>var xml = XMLHTTP.responseXML; var anzahl = document.getElementById("Anzahl"); var gesamt = document.getElementById("Gesamt"); anzahl.innerHTML = xml.documentElement.getAttribute("totalResultsReturned"); gesamt.innerHTML = xml.documentElement.getAttribute("totalResultsAvailable"); </pre></div> <p>Etwas kniffliger sind die Daten, die in die HTML-Tabelle zu schreiben sind. Der <em><thead></em>-Bereich mit der Kopfzeile steht bereits fest, nur <em><tbody></em> fehlt noch. Dazu müssen alle <em> </em>-Elemente im XML durchlaufen werden: </p> <div class="sourcecode"> <pre>var treffer = document.getElementById("Treffer"); var tbody = document.createElement("tbody"); var ergebnisse = xml.getElementsByTagName("Result"); for (var i=0; i</pre></div> <p>Im Inneren der Schleife läuft immer derselbe Mechanismus ab: </p> <div class="listcontent"> <ol><li>Eine neue Tabellenzeile (<em> <tr>) wird erstellt. <li>Drei neue Tabellenzellen (<em> <td>) werden erstellt (für Titel, Beschreibung und URL). <li>Pro Zelle wird ein Textknoten mit den Daten aus dem XML erstellt. </li> <li>Abschließend werden die Textknoten an die Zellen und die Zellen an die Zeile und die Zeile an die Tabelle gehängt. </li> <p>Die größten Schwierigkeiten liegen hier vermutlich im dritten Schritt. Per <em>getElementsByTagName()</em> haben wir eine Liste von <em></em>-Knoten erhalten, aber über die Reihenfolge der Unterknoten ist nichts gesagt. Deswegen müssen Sie alle Unterknoten durchlaufen und jeweils deren <em>nodeName</em>-Eigenschaft überprüfen. Bei den drei Werten <em>Title, Summary</em> und <em>URL</em> schlagen Sie (virtuell) zu und erstellen den zugehörigen Textknoten (Listing 2). </p> <div class="sourcecode"> <pre>Listing 2 ---------------------------------------------------------------------- var zeile = document.createElement("tr"); var titel = document.createElement("td"); var beschreibung = document.createElement("td"); var url = document.createElement("td"); var titeltext, beschreibungtext, urltext; for (var j=0; j</pre></div> <p>Das war es im Wesentlichen auch schon. Übrig bleiben nur noch Aufräumarbeiten (etwa den <em><tbody></em>-Bereich in die Tabelle zu hängen) und die unvermeidliche Erzeugung nebst Aufruf des <em>XMLHttpRequest</em>-Objekts. In Listing 3 finden Sie den fast kompletten Code. Nur die immer wiederkehrende Instanziierung von XMLHttpRequest wurde aus Platzgründen weggelassen. </p> <p>Bis hierher funktionieren alle Listings in allen relevanten Browsern, also außer im Internet Explorer und in den verschiedenen Mozilla-Varianten auch im Konqueror/Safari und im Opera-Browser. Alle weiteren Listings beschränken sich leider zurzeit noch auf Internet Explorer und Mozilla, wobei immer die Hoffnung bleibt, dass die anderen Browser nachziehen. </p> <div class="sourcecode"> <pre>Listing 3 ------------------------------------------------------------ Die XML-Daten werden per JavaScript in die Tabelle eingefügt (XML.html) <p><span id="Anzahl">0</span> von <span id="Gesamt">0</span> Treffern:</p> </pre><table id="Treffer"><thead><tr><th>Titel</th><th>Beschreibung</th><th>URL</th> </tr></thead></table></div> </td></em></li></tr></em></li></ol></div> <div class="visible-xs col-xs-12"><section class="sands-article-sharer section"> <div class="socials-share"> <a target="_blank" data-shareto="Facebook" href="https://www.facebook.com/sharer/sharer.php?u=https://entwickler.de/?p=129408" class="social-share share-facebook"> <i class="fa fa-facebook"></i> </a> <a target="_blank" data-shareto="Twitter" href="https://twitter.com/home?status=Ich+empfehle+diesen+Artikel%3A+https%3A%2F%2Fentwickler.de%2F%3Fp%3D129408" class="social-share share-twitter"> <i class="fa fa-twitter"></i> </a> <a target="_blank" data-shareto="Google" href="https://plus.google.com/share?url=https://entwickler.de/?p=129408" class="social-share share-google-plus"> <i class="fa fa-google-plus"></i> </a> <a target="_blank" data-shareto="XING" href="https://www.xing.com/spi/shares/new?url=https://entwickler.de/?p=129408&title=http%3A%2F%2FAJAX%2520und%2520XML%2520in%2520der%2520Praxis&description=AJAX+-+Asynchronous+JavaScript+and+XML+-+besch%C3%A4ftigt+die+Online-Gemeinde+immer+mehr.+Es+erm%C3%B6glicht+die+Entwicklung+von+Webapplikationen%2C+die+Desktop-Anwendungen+%C3%A4hneln.+Auch+wenn+die+Technologie+erfahrenen+Entwicklern+nicht+unbekannt+ist%2C+leistet+sie+doch+einen+sinnvollen+Beitrag%2C+um+Webapplikationen+interaktiver+und+benutzerfreundlicher+zu+machen.+Inwieweit+XML+dabei+zum+Tragen+kommt%2C+zeigen+wir+in+diesem+Artikel.&source=http%3A%2F%2Fentwickler.de" class="social-share share-xing"> <i class="fa fa-xing"></i> </a> <a target="_blank" data-shareto="Linked In" href="http://www.linkedin.com/shareArticle?mini=true&url=https://entwickler.de/?p=129408&title=http%3A%2F%2FAJAX%2520und%2520XML%2520in%2520der%2520Praxis&summary=AJAX+-+Asynchronous+JavaScript+and+XML+-+besch%C3%A4ftigt+die+Online-Gemeinde+immer+mehr.+Es+erm%C3%B6glicht+die+Entwicklung+von+Webapplikationen%2C+die+Desktop-Anwendungen+%C3%A4hneln.+Auch+wenn+die+Technologie+erfahrenen+Entwicklern+nicht+unbekannt+ist%2C+leistet+sie+doch+einen+sinnvollen+Beitrag%2C+um+Webapplikationen+interaktiver+und+benutzerfreundlicher+zu+machen.+Inwieweit+XML+dabei+zum+Tragen+kommt%2C+zeigen+wir+in+diesem+Artikel.&source=http%3A%2F%2Fentwickler.de" class="social-share share-linkedin"> <i class="fa fa-linkedin"></i> </a> </div> <!--<div class="article-shorturl"> <input type="text" id="shorturl" class="shorturl" data-clipboard-text="https://entwickler.de/?p=129408" value="https://entwickler.de/?p=129408"> </div>--> </section> <div class="dummy-share-block"></div></div> <div id="end-content"></div> </section> <section class="popup-post"> <strong class="popup-heading">Unsere Redaktion empfiehlt:</strong> <div class="popup-content"> <h3 class="post-title"><a href="https://entwickler.de/online/komponentenorientiert-vs-nicht-komponentenorientiert-129419.html">Komponentenorientiert vs. nicht komponentenorientiert</a></h3> </div> <a href="#" class="popup-close"><i class="fa fa-close"></i></a> </section> <section id="related-post" class="post-three-columns post-columns section"> <div class="row clearfix"> <div class="col-md-12 section-heading-wrapper"> <h3 class="section-heading">Relevante <strong>Beiträge</strong></h3> </div> </div> <div class="row clearfix relatedfix"> <div class="col-md-4"> <article class="post-list"> <figure class="thumb half-thumb "> <a href="https://entwickler.de/online/php/php-7-1-579753620.html" class=""> <img class='lazyOwl unveil' src='https://entwickler.de/wp-content/themes/entwicklerDE/public/placeholder/450x225.png' data-src='https://entwickler.de/wp-content/uploads/2016/12/php-7-1-300x150.jpg' alt='PHP 7.1 ist erschienen'> </a> </figure> <header class="content"> <h1 class="post-title"><a href="https://entwickler.de/online/php/php-7-1-579753620.html">PHP 7.1 ist erschienen</a></h1> <div class="post-meta"> <span class="post-author">Von <a href="https://entwickler.de/author/sschaefers" rel="author">Stefanie Schäfers</a> </span> <time class="post-date" datetime="2016-12-02 11:55:51"> 4 Tagen online </time> </div> </header> </article> </div> <div class="col-md-4"> <article class="post-list"> <figure class="thumb half-thumb "> <a href="https://entwickler.de/online/php/symfony-3-2-579749844.html" class=""> <img class='lazyOwl unveil' src='https://entwickler.de/wp-content/themes/entwicklerDE/public/placeholder/450x225.png' data-src='https://entwickler.de/wp-content/uploads/2016/11/symfony-3-2-300x150.jpg' alt='Symfony 3.2'> </a> </figure> <header class="content"> <h1 class="post-title"><a href="https://entwickler.de/online/php/symfony-3-2-579749844.html">Symfony 3.2</a></h1> <div class="post-meta"> <span class="post-author">Von <a href="https://entwickler.de/author/divb" rel="author">Tom Wiesseckel</a> </span> <time class="post-date" datetime="2016-11-30 13:10:41"> 6 Tagen online </time> </div> </header> </article> </div> <div class="col-md-4"> <article class="post-list"> <figure class="thumb half-thumb "> <a href="https://entwickler.de/online/php/wordpress-4-7-300581.html" class=""> <img class='lazyOwl unveil' src='https://entwickler.de/wp-content/themes/entwicklerDE/public/placeholder/450x225.png' data-src='https://entwickler.de/wp-content/uploads/2016/03/wordpress-logo-300x150.jpg' alt='Alles zu WordPress 4.7'> </a> </figure> <header class="content"> <h1 class="post-title"><a href="https://entwickler.de/online/php/wordpress-4-7-300581.html">Alles zu WordPress 4.7</a></h1> <div class="post-meta"> <span class="post-author">Von <a href="https://entwickler.de/author/redaktion" rel="author">Redaktion</a> </span> <time class="post-date" datetime="2016-11-24 10:37:04"> 2 Wochen online </time> </div> </header> </article> </div> </div> <!-- related fix --><div class="row clearfix relatedfix"> <div class="col-md-4"> <article class="post-list"> <figure class="thumb half-thumb "> <a href="https://entwickler.de/online/php/joomla-3-7-579750454.html" class=""> <img class='lazyOwl unveil' src='https://entwickler.de/wp-content/themes/entwicklerDE/public/placeholder/450x225.png' data-src='https://entwickler.de/wp-content/uploads/2016/06/joomla-300x150.jpg' alt='Der Weg zu Joomla! 3.7'> </a> </figure> <header class="content"> <h1 class="post-title"><a href="https://entwickler.de/online/php/joomla-3-7-579750454.html">Der Weg zu Joomla! 3.7</a></h1> <div class="post-meta"> <span class="post-author">Von <a href="https://entwickler.de/author/mascha-schnellbacher" rel="author">Mascha Schnellbacher</a> </span> <time class="post-date" datetime="2016-11-21 14:28:14"> 2 Wochen online </time> </div> </header> </article> </div> <div class="col-md-4"> <article class="post-list"> <figure class="thumb half-thumb "> <a href="https://entwickler.de/online/php/symfony-3-1-246357.html" class=""> <img class='lazyOwl unveil' src='https://entwickler.de/wp-content/themes/entwicklerDE/public/placeholder/450x225.png' data-src='https://entwickler.de/wp-content/uploads/2016/05/symfony-logo-300x150.jpg' alt='Symfony 3.1 – Neuerungen, Verbesserungen, Updates'> </a> </figure> <header class="content"> <h1 class="post-title"><a href="https://entwickler.de/online/php/symfony-3-1-246357.html">Symfony 3.1 – Neuerungen, Verbesserungen, Updates</a></h1> <div class="post-meta"> <span class="post-author">Von <a href="https://entwickler.de/author/redaktion" rel="author">Redaktion</a> </span> <time class="post-date" datetime="2016-11-21 10:47:13"> 2 Wochen online </time> </div> </header> </article> </div> <div class="col-md-4"> <article class="post-list"> <figure class="thumb half-thumb "> <a href="https://entwickler.de/online/php/php-7-verbreitung-2016-579749896.html" class=""> <img class='lazyOwl unveil' src='https://entwickler.de/wp-content/themes/entwicklerDE/public/placeholder/450x225.png' data-src='https://entwickler.de/wp-content/uploads/2016/11/php-7-verbreitung-2016-300x150.jpg' alt='PHP 7 zweitbeliebteste PHP-Version in 2016'> </a> </figure> <header class="content"> <h1 class="post-title"><a href="https://entwickler.de/online/php/php-7-verbreitung-2016-579749896.html">PHP 7 zweitbeliebteste PHP-Version in 2016</a></h1> <div class="post-meta"> <span class="post-author">Von <a href="https://entwickler.de/author/divb" rel="author">Tom Wiesseckel</a> </span> <time class="post-date" datetime="2016-11-18 11:57:20"> 3 Wochen online </time> </div> </header> </article> </div> </div> <!-- related fix --> </section> <section id="comments" class="comment-wrapper section"><h3 class='comment-heading'>Meinungen zu diesem Beitrag</h3> <div id="disqus_thread"></div> </section> </article> <!-- Side Ads --> <div id="sidecontent-promotion" class="container"> <!-- entwickler.de_skyscraper1_Wordpress --> <div id='div-gpt-ad-1423481258370-6' class='skyad-right' style="margin-top: 21px;"> <script type='text/javascript'> googletag.cmd.push(function() { googletag.display('div-gpt-ad-1423481258370-6'); }); </script> </div> </div> </div> <!-- FOOTER --> <footer id="footer"> <div id="footer-content" class="container clearfix"> <aside class="col-md-3 column"> <div class="footer-widget widget_nav_menu" id="nav_menu-9"><h2 class="widget-title">Online</h2><div class="menu-online-container"><ul id="menu-online" class="menu"><li id="menu-item-112715" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-112715"><a href="http://jaxenter.de">JAXenter.de</a></li> <li id="menu-item-112716" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-112716"><a href="http://jaxenter.com">JAXenter.com</a></li> </ul></div></div> </aside> <aside class="col-md-3 column"> <div class="footer-widget widget_nav_menu" id="nav_menu-10"><h2 class="widget-title">Magazine</h2><div class="menu-magazine-container"><ul id="menu-magazine" class="menu"><li id="menu-item-112718" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-112718"><a href="http://entwickler.de/php-magazin">PHP Magazin</a></li> <li id="menu-item-112722" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-112722"><a href="http://windowsdeveloper.de/shop">Windows Developer</a></li> <li id="menu-item-149283" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-149283"><a href="http://entwickler.de/entwickler-magazin">Entwickler Magazin</a></li> <li id="menu-item-149282" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-149282"><a href="http://entwickler.de/mobile-technology">Mobile Technology</a></li> <li id="menu-item-112723" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-112723"><a href="http://windowsdeveloper.de/shop">SharePoint Kompendium</a></li> <li id="menu-item-112719" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-112719"><a href="https://jaxenter.de/magazine/java-magazin">Java Magazin</a></li> <li id="menu-item-112720" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-112720"><a href="https://jaxenter.de/magazine/eclipse-magazin">Eclipse Magazin</a></li> <li id="menu-item-112721" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-112721"><a href="https://jaxenter.de/magazine/business-technology">Business Technology</a></li> </ul></div></div> </aside> <aside class="col-md-3 column"> <div class="footer-widget widget_nav_menu" id="nav_menu-11"><h2 class="widget-title">Konferenzen</h2><div class="menu-konferenzen-container"><ul id="menu-konferenzen" class="menu"><li id="menu-item-112724" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-112724"><a href="https://jax.de">JAX</a></li> <li id="menu-item-112725" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-112725"><a href="https://basta.net">BASTA!</a></li> <li id="menu-item-112726" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-112726"><a href="https://phpconference.com">International PHP Conference</a></li> <li id="menu-item-112727" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-112727"><a href="https://webtechcon.de">WebTech Conference</a></li> <li id="menu-item-112728" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-112728"><a href="https://webinale.de">webinale</a></li> <li id="menu-item-112729" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-112729"><a href="https://mobiletechcon.de/">MobileTech Conference</a></li> <li id="menu-item-173190" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-173190"><a href="https://iotcon.de/">Internet of Things Conference</a></li> <li id="menu-item-173189" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-173189"><a href="http://devopsconference.de/de/">DevOpsCon</a></li> </ul></div></div> </aside> <aside class="col-md-3 column"> <div class="footer-widget"> <!-- Start - HTML Javascript Adder plugin v3.9 --> <div id="html_javascript_adder-15" class="widget widget_html_javascript_adder"> <div class="hjawidget textwidget"> <p class="widget-title">S&S Media</p> <div class="menu-konferenzen-container"> <ul id="menu-konferenzen-4" class="menu"> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-113724"><a href="http://sandsmedia.com/de/unternehmen">Über S&S Media</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-113725"><a href="http://entwickler-akademie.de/">Entwickler Akademie</a></li> </ul> </div> </div> </div><!-- End - HTML Javascript Adder plugin v3.9 --> </div></aside> <aside class="col-md-12 column"> <!-- Start - HTML Javascript Adder plugin v3.9 --> <div id="html_javascript_adder-14" class="widget widget_html_javascript_adder"> <div class="hjawidget textwidget"> <ul id="menu-footer-impressum" class="menu"><li id="menu-item-112731" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-112731"><a href="http://sandsmedia.com/">Software & Support Media GmbH</a></li> <li id="menu-item-112732" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112732"><a href="/impressum">Impressum</a></li> <li id="menu-item-112733" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112733"><a href="/datenschutz">Datenschutz</a></li> <li id="menu-item-123344" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-123344"><a href="/entwicklerde_agb">AGB</a></li> <li id="menu-item-112842" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112842"><a href="/lieferkonditionen">Lieferkonditionen</a></li> </ul> </div> </div><!-- End - HTML Javascript Adder plugin v3.9 --> </aside> </div> <!-- /.footer-wrapper --> <div class="footer-bottom container center" > <p class="copyright"></p> </div> <!-- /.footer-bottom --> </footer> <!-- /#footer --> </div> <div class="ajax-overlay"> <div id="postloader"></div> </div> </div> </div> <div id="gmw-cl-form-wrapper" class="gmw-cl-form-wrapper"><span id="gmw-cl-close-btn">X</span><form id="gmw-cl-form" name="gmw_cl_form" onsubmit="return false"><div id="gmw-cl-info-wrapper"><div id="gmw-cl-location-message">- Gib Deinen Standort ein -</div><div id="gmw-cl-input-fields"><input type="text" name="gmw-cl_address" id="gmw-cl-address" value="" placeholder="zipcode or full address..." /><input id="gmw-cl-submit-address" type="submit" value="go" /></div><div> - or - </div><div id="gmw-cl-get-location"><a href="#" id="gmw-cl-trigger" >Erhalte Deinen aktuellen Standort</a></div></div><div id="gmw-cl-respond-wrapper" style="display:none;"><div id="gmw-cl-spinner"><img src="https://entwickler.de/wp-content/plugins/geo-my-wp/assets/images/gmw-loader.gif" /></div><div id="gmw-cl-message"></div><div id="gmw-cl-map" style="width:100%;height:100px;display:none;"></div></div></form></div><div id="gmw-cl-hidden-form-wrapper"> <form id="gmw-cl-hidden-form" method="post"> <input type="hidden" id="gmw-cl-street" name="gmw_cl_location[street]" value="" /> <input type="hidden" id="gmw-cl-city" name="gmw_cl_location[city]" value="" /> <input type="hidden" id="gmw-cl-state" name="gmw_cl_location[state]" value="" /> <input type="hidden" id="gmw-cl-state-long" name="gmw_cl_location[state_long]" value="" /> <input type="hidden" id="gmw-cl-zipcode" name="gmw_cl_location[zipcode]" value="" /> <input type="hidden" id="gmw-cl-country" name="gmw_cl_location[country]" value="" /> <input type="hidden" id="gmw-cl-country-long" name="gmw_cl_location[country_long]" value="" /> <input type="hidden" id="gmw-cl-org-address" name="gmw_cl_location[address]" value="" /> <input type="hidden" id="gmw-cl-formatted-address" name="gmw_cl_location[formatted_address]" value="" /> <input type="hidden" id="gmw-cl-lat" name="gmw_cl_location[lat]" value="" /> <input type="hidden" id="gmw-cl-lng" name="gmw_cl_location[lng]" value="" /> <input type="hidden" id="gmw-cl-action" name="gmw_cl_action" value="post" /> </form> </div><script type="text/javascript"> jQuery(document).ready(function($) { //declare new map options array for form ID 1 gmwMapOptions['1'] = []; gmwMapOptions['1']['styles'] = [ { "featureType": "landscape", "stylers": [ { "color": "#f2f2f2" } ] }, { "featureType": "road", "stylers": [ { "saturation": -100 }, { "lightness": 45 } ] }, { "featureType": "road.highway", "stylers": [ { "visibility": "simplified" } ] }, { "featureType": "road.arterial", "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] }, { "featureType": "administrative", "elementType": "labels.text.fill", "stylers": [ { "color": "#444444" } ] }, { "featureType": "transit", "stylers": [ { "visibility": "off" } ] }, { "featureType": "poi", "stylers": [ { "visibility": "off" } ] } ] }); </script> <style type="text/css"> h2.frq-main-title{ font-size: 18px; } .hrf-entry{ border:none !important; margin-bottom: 0px !important; padding-bottom: 0px !important; } .hrf-content{ display:none; color: #444444; background: #ffffff; font-size: 14px; padding: 10px; padding-left: 50px; word-break: normal; } h3.hrf-title{ font-size: 18px ; color: #444444; background: #ffffff; padding: 10px ; padding-left: 50px; margin: 0; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; outline-style:none; } .hrf-title.close-faq{ cursor: pointer; } .hrf-title.close-faq span{ width: 30px; height: 30px; display: inline-block; position: relative; left: 0; top: 8px; margin-right: 12px; margin-left: -42px; background: #444444 url(https://entwickler.de/wp-content/plugins/html5-responsive-faq/images/open.png) no-repeat center center; } }.hrf-title.open-faq{ } .hrf-title.open-faq span{ width: 30px; height: 30px; display: inline-block; position: relative; left: 0; top: 8px; margin-right: 12px; margin-left: -42px; background: #444444 url(https://entwickler.de/wp-content/plugins/html5-responsive-faq/images/close.png) no-repeat center center; } .hrf-entry p{ } .hrf-entry ul{ } .hrf-entry ul li{ }</style> <div id="wpfront-scroll-top-container"><img src="https://entwickler.de/wp-content/plugins/wpfront-scroll-top/images/icons/1.png" alt="" /></div> <script type="text/javascript">if(typeof wpfront_scroll_top == "function") wpfront_scroll_top({"scroll_offset":100,"button_width":0,"button_height":0,"button_opacity":0.8,"button_fade_duration":200,"scroll_duration":400,"location":1,"marginX":20,"marginY":20,"hide_iframe":false,"auto_hide":false,"auto_hide_after":2});</script> <script></script> <script type="text/javascript"> jQuery(document).ready(function ($) { //custom validation rule $.validator.addMethod("customemail", function(value, element) { return /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value); }, "Sorry, I've enabled very strict email validation" ); $('#commentform').validate({ rules: { author: { required: true, minlength: 2 }, // email: { // required: true, // email: true // }, email: { required: { depends:function(){ $(this).val($.trim($(this).val())); return true; } }, customemail: true }, comment: { required: true, minlength: 1 } }, messages: { author: "Bitte geben Sie einen Namen an.", email: "Bitte geben Sie eine gültige Email-Adresse an.", comment: "Bitte geben Sie einen Kommentar an." }, errorElement: "div", errorPlacement: function (error, element) { element.after(error); } }); }); </script> <script type='text/javascript' src='https://entwickler.de/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shCore.js?ver=3.0.9b'></script> <script type='text/javascript' src='https://entwickler.de/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushAS3.js?ver=3.0.9b'></script> <script type='text/javascript' src='https://entwickler.de/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushBash.js?ver=3.0.9b'></script> <script type='text/javascript' src='https://entwickler.de/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushColdFusion.js?ver=3.0.9b'></script> <script type='text/javascript' src='https://entwickler.de/wp-content/plugins/syntaxhighlighter/third-party-brushes/shBrushClojure.js?ver=20090602'></script> <script type='text/javascript' src='https://entwickler.de/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushCpp.js?ver=3.0.9b'></script> <script type='text/javascript' src='https://entwickler.de/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushCSharp.js?ver=3.0.9b'></script> <script type='text/javascript' src='https://entwickler.de/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushCss.js?ver=3.0.9b'></script> <script type='text/javascript' src='https://entwickler.de/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushDelphi.js?ver=3.0.9b'></script> <script type='text/javascript' src='https://entwickler.de/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushDiff.js?ver=3.0.9b'></script> <script type='text/javascript' src='https://entwickler.de/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushErlang.js?ver=3.0.9b'></script> <script type='text/javascript' src='https://entwickler.de/wp-content/plugins/syntaxhighlighter/third-party-brushes/shBrushFSharp.js?ver=20091003'></script> <script type='text/javascript' src='https://entwickler.de/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushGroovy.js?ver=3.0.9b'></script> <script type='text/javascript' src='https://entwickler.de/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushJava.js?ver=3.0.9b'></script> <script type='text/javascript' src='https://entwickler.de/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushJavaFX.js?ver=3.0.9b'></script> <script type='text/javascript' src='https://entwickler.de/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushJScript.js?ver=3.0.9b'></script> <script type='text/javascript' src='https://entwickler.de/wp-content/plugins/syntaxhighlighter/third-party-brushes/shBrushLatex.js?ver=20090613'></script> <script type='text/javascript' src='https://entwickler.de/wp-content/plugins/syntaxhighlighter/third-party-brushes/shBrushMatlabKey.js?ver=20091209'></script> <script type='text/javascript' src='https://entwickler.de/wp-content/plugins/syntaxhighlighter/third-party-brushes/shBrushObjC.js?ver=20091207'></script> <script type='text/javascript' src='https://entwickler.de/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushPerl.js?ver=3.0.9b'></script> <script type='text/javascript' src='https://entwickler.de/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushPhp.js?ver=3.0.9b'></script> <script type='text/javascript' src='https://entwickler.de/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushPlain.js?ver=3.0.9b'></script> <script type='text/javascript' src='https://entwickler.de/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushPowerShell.js?ver=3.0.9b'></script> <script type='text/javascript' src='https://entwickler.de/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushPython.js?ver=3.0.9b'></script> <script type='text/javascript' src='https://entwickler.de/wp-content/plugins/syntaxhighlighter/third-party-brushes/shBrushR.js?ver=20100919'></script> <script type='text/javascript' src='https://entwickler.de/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushRuby.js?ver=3.0.9b'></script> <script type='text/javascript' src='https://entwickler.de/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushScala.js?ver=3.0.9b'></script> <script type='text/javascript' src='https://entwickler.de/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushSql.js?ver=3.0.9b'></script> <script type='text/javascript' src='https://entwickler.de/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushVb.js?ver=3.0.9b'></script> <script type='text/javascript' src='https://entwickler.de/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushXml.js?ver=3.0.9b'></script> <script type='text/javascript'> (function(){ var corecss = document.createElement('link'); var themecss = document.createElement('link'); var corecssurl = "https://entwickler.de/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shCore.css?ver=3.0.9b"; if ( corecss.setAttribute ) { corecss.setAttribute( "rel", "stylesheet" ); corecss.setAttribute( "type", "text/css" ); corecss.setAttribute( "href", corecssurl ); } else { corecss.rel = "stylesheet"; corecss.href = corecssurl; } document.getElementsByTagName("head")[0].insertBefore( corecss, document.getElementById("syntaxhighlighteranchor") ); var themecssurl = "https://entwickler.de/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shThemeDefault.css?ver=3.0.9b"; if ( themecss.setAttribute ) { themecss.setAttribute( "rel", "stylesheet" ); themecss.setAttribute( "type", "text/css" ); themecss.setAttribute( "href", themecssurl ); } else { themecss.rel = "stylesheet"; themecss.href = themecssurl; } //document.getElementById("syntaxhighlighteranchor").appendChild(themecss); document.getElementsByTagName("head")[0].insertBefore( themecss, document.getElementById("syntaxhighlighteranchor") ); })(); SyntaxHighlighter.config.strings.expandSource = '+ Quelltext aufklappen'; SyntaxHighlighter.config.strings.help = '?'; SyntaxHighlighter.config.strings.alert = 'SyntaxHighlighter\n\n'; SyntaxHighlighter.config.strings.noBrush = 'Keine Syntax-Datei vorhanden für: '; SyntaxHighlighter.config.strings.brushNotHtmlScript = 'Die Syntax-Datei ist nicht für die „htmlscript” Option konfiguriert: '; SyntaxHighlighter.defaults['pad-line-numbers'] = false; SyntaxHighlighter.defaults['toolbar'] = false; SyntaxHighlighter.all(); </script> <link rel='stylesheet' id='yarppRelatedCss-css' href='https://entwickler.de/wp-content/plugins/yet-another-related-posts-plugin/style/related.css?ver=4.6' type='text/css' media='all' /> <link rel='stylesheet' id='yarpp-thumbnails-yarpp-thumbnail-css' href='https://entwickler.de/wp-content/plugins/yet-another-related-posts-plugin/includes/styles_thumbnails.css.php?width=230&height=0&ver=4.3.1' type='text/css' media='all' /> <script type='text/javascript' src='https://entwickler.de/wp-content/themes/entwicklerDE/assets/js/jquery.validate.min.js?ver=1.10.0'></script> <script type='text/javascript' src='https://entwickler.de/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script> <script type='text/javascript'> /* <![CDATA[ */ var _wpcf7 = {"loaderUrl":"https:\/\/entwickler.de\/wp-content\/plugins\/contact-form-7\/images\/ajax-loader.gif","recaptcha":{"messages":{"empty":"Please verify that you are not a robot."}},"sending":"Sending ...","cached":"1"}; /* ]]> */ </script> <script type='text/javascript' src='https://entwickler.de/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.5'></script> <script type='text/javascript' src='https://entwickler.de/wp-content/plugins/bootstrap-for-contact-form-7/assets/scripts.min.js?ver=1.3.1'></script> <script type='text/javascript' src='https://entwickler.de/wp-content/plugins/sands-top-article-slider/assets/top-article-slider.js?ver=1.0.0'></script> <script type='text/javascript' src='//entwickler.de/wp-content/plugins/woocommerce/assets/js/jquery-blockui/jquery.blockUI.min.js?ver=2.70'></script> <script type='text/javascript'> /* <![CDATA[ */ var woocommerce_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/online\/ajax-und-xml-in-der-praxis-129408.html?wc-ajax=%%endpoint%%"}; /* ]]> */ </script> <script type='text/javascript' src='//entwickler.de/wp-content/plugins/woocommerce/assets/js/frontend/woocommerce.min.js?ver=2.6.4'></script> <script type='text/javascript' src='//entwickler.de/wp-content/plugins/woocommerce/assets/js/jquery-cookie/jquery.cookie.min.js?ver=1.4.1'></script> <script type='text/javascript'> /* <![CDATA[ */ var wc_cart_fragments_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/online\/ajax-und-xml-in-der-praxis-129408.html?wc-ajax=%%endpoint%%","fragment_name":"wc_fragments"}; /* ]]> */ </script> <script type='text/javascript' src='//entwickler.de/wp-content/plugins/woocommerce/assets/js/frontend/cart-fragments.min.js?ver=2.6.4'></script> <script type='text/javascript'> /* <![CDATA[ */ var pollsL10n = {"ajax_url":"https:\/\/entwickler.de\/wp-admin\/admin-ajax.php","text_wait":"Your last request is still being processed. Please wait a while ...","text_valid":"Please choose a valid poll answer.","text_multiple":"Maximum number of choices allowed: ","show_loading":"1","show_fading":"1"}; /* ]]> */ </script> <script type='text/javascript' src='https://entwickler.de/wp-content/plugins/wp-polls/polls-js.js?ver=2.73.1'></script> <script type='text/javascript'> /* <![CDATA[ */ var mejsL10n = {"language":"de-DE","strings":{"Close":"Schlie\u00dfen","Fullscreen":"Vollbild","Turn off Fullscreen":"Vollbild beenden","Go Fullscreen":"Vollbild einschalten","Download File":"Datei herunterladen","Download Video":"Video herunterladen","Play":"Abspielen","Pause":"Pause","Captions\/Subtitles":"Untertitel","None":"None","Time Slider":"Zeit-Schieberegler","Skip back %1 seconds":"%1 Sekunde(n) zur\u00fcck springen","Video Player":"Video-Player","Audio Player":"Audio-Player","Volume Slider":"Lautst\u00e4rkeregler","Mute Toggle":"Stumm schalten","Unmute":"Laut schalten","Mute":"Stumm","Use Up\/Down Arrow keys to increase or decrease volume.":"Pfeiltasten Hoch\/Runter benutzen, um die Lautst\u00e4rke zu regeln.","Use Left\/Right Arrow keys to advance one second, Up\/Down arrows to advance ten seconds.":"Benutze die Pfeiltasten Links\/Rechts, um 1 Sekunde vorzuspringen, und die Pfeiltasten Hoch\/Runter, um 10 Sekunden vorzuspringen."}}; var _wpmejsSettings = {"pluginPath":"\/wp-includes\/js\/mediaelement\/"}; /* ]]> */ </script> <script type='text/javascript' src='https://entwickler.de/wp-includes/js/mediaelement/mediaelement-and-player.min.js?ver=2.22.0'></script> <script type='text/javascript' src='https://entwickler.de/wp-includes/js/mediaelement/wp-mediaelement.min.js?ver=4.6'></script> <script type='text/javascript' src='https://entwickler.de/wp-content/themes/entwicklerDE/public/js/plugins.js?ver=beta'></script> <script type='text/javascript' src='https://entwickler.de/wp-content/themes/entwicklerDE/public/js/html5shiv.min.js?ver=beta'></script> <script type='text/javascript'> /* <![CDATA[ */ var jmagzoption = {"ajaxurl":"https:\/\/entwickler.de\/wp-admin\/admin-ajax.php","copyclipboard":" URL kopieren f\u00fcr clipboard","shareto":"Artikel teilen hit","gacode":"","usezoom":"1","ismobile":"","commentscript":"disqus","disqus_shortname":"entwicklermagazin","fbapps":"125823254276164","isie":"","postid":"129408","isblog":"1"}; /* ]]> */ </script> <script type='text/javascript' src='https://entwickler.de/wp-content/themes/entwicklerDE/public/js/main.js?ver=beta'></script> <script type='text/javascript' src='https://entwickler.de/wp-content/themes/entwicklerDE/public//js/zeroclipboard/ZeroClipboard.min.js?ver=beta'></script> <script type='text/javascript' src='https://entwickler.de/wp-content/themes/entwicklerDE/public/js/ajax-post.js?ver=beta'></script> <script type='text/javascript' src='https://entwickler.de/wp-includes/js/comment-reply.min.js?ver=4.6'></script> <script type='text/javascript' src='https://entwickler.de/wp-includes/js/wp-embed.min.js?ver=4.6'></script> <script type='text/javascript'> /* <![CDATA[ */ var gmwSettings = {"general_settings":{"google_api":"AIzaSyA9QVPRKdNm3gpEd2_JmnD4n6U8tW2RFuk","js_geocode":"1","language_code":"DE","country_code":"DE","results_page":"191273","url_px":"gmw_","auto_locate":false},"post_types_settings":{"edit_post_zoom_level":"7","edit_post_latitude":"40.7115441","edit_post_longitude":"-74.01348689999998","post_types":["jobpost"]}}; var gmwMapOptions = []; /* ]]> */ </script> <script type='text/javascript' src='https://entwickler.de/wp-content/plugins/geo-my-wp/assets/js/gmw.min.js?ver=2.6.4'></script> <!-- Google Tag Manager --> <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-PJK98V" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-PJK98V');</script> <!-- End Google Tag Manager --> <script type="text/javascript"> </script> <!-- End Google Tag Manager --> </body> </html> <!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/ Page Caching using disk: enhanced Served from: entwickler.de @ 2016-12-06 11:33:59 by W3 Total Cache -->