tag:blogger.com,1999:blog-35641599974069009682011-04-21T11:10:27.545-07:00mileffhttp://www.blogger.com/profile/16708269009363864145noreply@blogger.comBlogger11100tag:blogger.com,1999:blog-3564159997406900968.post-44868011254409909902008-03-20T02:51:00.000-07:002008-03-20T04:27:43.837-07:00<ol><li><span style="color: rgb(0, 204, 204);"><span style="color: rgb(102, 0, 0);">AJAX steht für Asynchronous JavaScript And XML.</span></span></li><li><span style="color: rgb(102, 0, 0);"> AJAX ist eine Art der Programmierung. Populär von Google gemacht im 2005 (mit Google Suggest). </span></li><li><span style="color: rgb(102, 0, 0);"> AJAX ist keine neue Programmiersprache, sondern eine neue Art und Weise der Nutzung bestehender Standards. </span></li><li><span style="color: rgb(102, 0, 0);">Mit AJAX können Sie besser, schneller und benutzerfreundlicher Web-Anwendungen herrstellen. </span></li><li><span style="color: rgb(102, 0, 0);">AJAX ist auf JavaScript und HTTP-Requests basiert.</span></li></ol><br /><span style="font-weight: bold;">Was sollten Sie bereits wissen</span>,<br /><br />Bevor Sie fortfahren, sollten Sie ein grundlegendes Verständnis der folgenden:<br /><br /> * <span style="font-weight: bold;">HTML / XHTML</span><br /> * <span style="font-weight: bold;">JavaScript<br /></span><h2 style="font-weight: normal;">AJAX = Asynchronous JavaScript and XML</h2><span style="font-weight: bold;">AJAX</span> ist keine neue Programmiersprache, sondern eine Technik für die Schaffung besser, schneller, mehr und interaktive Web-Anwendungen.<br /><br />Mit <span style="font-weight: bold;">AJAX</span>, JavaScripts können direkt mit dem Server kommunizieren, mit dem JavaScript <span style="font-weight: bold;">XMLHttpRequest-Objekt</span>. Mit diesem Objekt können Sie Ihre JavaScript-Daten tauschen mit einem Web-Server, ohne Neuladen der Seite.<br /><br />AJAX nutzt asynchrone Datenübertragung (HTTP-Requests) zwischen dem Browser und dem Web-Server, so dass Web-Seiten für kleine Anfrage von Informationen die Daten vom Server direkt übermitteln und die ganze Seite wird nicht neugeladet..<br /><br />Die <span style="font-weight: bold;">AJAX-Technik</span> macht Internet-Anwendungen kleiner, schneller und benutzerfreundlicher zu gestalten.<br /><span style="font-weight: bold;">AJAX</span> ist eine <span style="font-weight: bold;">Browser-Technologie</span> unabhängig von der Web-Server-Software.<br /><br /><br /><br />AJAX basiert auf der folgenden Web-Standarten:<br /><br /> * JavaScript<br /> * XML<br /> * HTML -<br /> * CSS<br /><br />Die Web-Standaren, die AJAX verwendet, sind klar definiert, und von allen großen Browsern uterstützt. <span style="font-weight: bold;">AJAX-Anwendungen</span> sind Browser-und plattformunabhängig.<br /><br />Mit <span style="font-weight: bold;">AJAX</span> dürfen wir bessere Internet-Anwendungen programmieren.<br /><br />Web-Anwendungen haben viele Vorteile gegenüber Desktop-Anwendungen, sie schaffen ein größeres Publikum zu erreichen, sie sind leichter zu installieren und zu unterstützen, und einfacher zu entwickeln (in manche Fälle :).<br /><br />Dennoch ist die Internet-Anwendungen sind nicht immer benutzerfreundlicher als die herkömmliche Desktop-Anwendungen.<br /><br />Mit AJAX, Internet-Anwendungen können benutzerfreundlicher gemacht werden.<br /><br />Sie können noch heute mit AJAX anfangen- es gibt nichts Neues zu lernen.<br /><br /><span style="font-weight: bold;">AJAX</span> basiert auf bestehenden Standarten. Diese Standarten wurden von den meisten Entwicklern seit mehrere Jahre benutzt.<br /><br /><h2>AJAX benutzt HTTP Requests</h2>In der traditionellen JavaScript-Programmierung, wenn Sie wollen, so dass alle Informationen aus einer Datenbank oder einer Datei auf dem Server, oder senden Sie Benutzer Informationen zu einem Server, müssen Sie ein HTML-Formular und GET-oder POST-Daten an den Server benutzen. Die Benutzer müssen Sie auf den "Abschicken"-Button zu senden / bekommen sie die Informationen.Die warten, bis der Server reagiert, dann wird eine neue Seite mit den Ergebnissen laden.<br /><br />Da der Server liefert eine neue Seite für jeden Benutzer bei der Eingabe. Die traditionellen Web-Anwendungen sind langsam und in der Regel weniger benutzerfreundlich.<br /><br />Mit <span style="font-weight: bold;">AJAX</span>, JavaScript kommuniziert direkt mit dem Server, durch den JavaScript-XMLHttpRequest-Objekt.<br /><br />Mit einer HTTP-Anfrage, eine Web-Seite können Sie eine Anfrage schicken, und erhalten Sie eine Antwort von einem Web-Server - ohne Neuladen der Seite. Der Anwender bleibt auf der gleichen Seite, und er oder sie wird nicht bemerken, dass Skripte schickt Anfrage zu dem Server , oder kriegt Daten vom Server.Warum ? Weil alles im Hintergrund läuft.<br /><br /><h2> XMLHttpRequest Object</h2><a target="_blank" href="http://www.google.com/webhp?complete=1&amp;hl=en">Google Suggest</a> ist mit dem XMLHttpRequest-Objekt programmiert, um eine sehr dynamische Web-Interface zu bieten: Wenn Sie anfangen, in den Google-Suchfeld ein JavaScript sendet die Buchstaben zu einem Server und der Server liefert eine Liste von Anregungen.<br /><br />Das XMLHttpRequest-Objekt wird in Internet Explorer 5.0 +, Safari 1,2, 1,0 Mozilla / Firefox, Opera 8 + und Netscape 7 unterstützt.<br /><br /><br />Ihre erste <span style="font-weight: bold;">AJAX-Anwendung </span><br /><br />Um zu verstehen, wie AJAX funktioniert, werden wir eine kleine AJAX-Anwendung zusammenbauen.<br /><br />Zuerst werden wir die Schaffung einer Standard-HTML-Formular mit zwei Text-Feldern: Benutzername und Zeit. Der Benutzername Feld wird von Benutzer ausgefüllt , indem der und die Uhrzeit Bereich wird mit AJAX ausgefüllt .<br /><br />Die HTML-Datei nennen wir "testAjax.htm" , und es sieht so aus (beachten Sie, dass die HTML-Formular unten hat keine Absendeknopf! ):<br /><blockquote></blockquote><br /><pre></pre><blockquote><pre></pre></blockquote><blockquote><pre></pre></blockquote><br /><blockquote><pre><br /></pre> <pre><form name="myForm"><br />Name: <input name="username" type="text"><br />Time: <input name="time" type="text"><br /></form></pre> <pre></pre><pre><br /></pre></blockquote><pre>AJAX - Browser Support<br /><br />Die Quintessenz ist die AJAX <span style="font-weight: bold;">XMLHttpRequest-Objekt</span>.<br /><br />Verschiedene Browser verwenden verschiedene Methoden, um die XMLHttpRequest-Objekt zu handeln.<br /><br />Internet Explorer verwendet eine <span style="font-weight: bold;">ActiveXObject</span>, während andere Browser<br />nutzen das eingebaute JavaScript Objekt namens XMLHttpRequest.</pre>So erstellen Sie dieses Objekt, und befassen sich mit unterschiedlichen Browsern, werden wir die Verwendung eines "try and catch"-Anweisung.<br /><br />Aktualisieren sie unsere "testAjax.htm"-Datei mit dem JavaScript, dass das XMLHttpRequest-Objekt erzeugt:<br /><blockquote><br /><br /><br /><pre></pre><pre><br /></pre> <pre><script type="text/javascript"><br />function ajaxFunction()<br />{<br />var xmlHttp;<br />try<br /> {<br /> // Firefox, Opera 8.0+, Safari<br /> xmlHttp=new XMLHttpRequest();<br /> }<br />catch (e)<br /> {<br /> // Internet Explorer<br /> try<br /> {<br /> xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");<br /> }<br /> catch (e)<br /> {<br /> try<br /> {<br /> xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");<br /> }<br /> catch (e)<br /> {<br /> alert("Your browser does not support AJAX!");<br /> return false;<br /> }<br /> }<br /> }<br /> }<br /></script></pre> <pre><form name="myForm"><br />Name: <input name="username" type="text"><br />Time: <input name="time" type="text"><br /></form></pre> <pre></pre><pre><br /><br /></pre></blockquote><pre>Beispiel erläutert: Erstellt wird zunächst eine Variable xmlHttp um die XMLHttpRequest-Objekt.<br /><br /><br />Dann versuchst du es zu schaffen, das Objekt mit<br />XMLHttp = new XMLHttpRequest ().<br />Dies ist für den Firefox, Opera und Safari-Browser.<br />Falls das funktioniert nicht, versuchen wie xmlHttp = new ActiveXObject (<br />"Msxml2.XMLHTTP"), das ist für den Internet Explorer 6.0 +, wenn auch das<br />nicht geht, versuchen wir es mit xmlHttp = new ActiveXObject (<br />"Microsoft.XMLHTTP"), der für den Internet Explorer 5.5 + ist.<br /><br />Wenn keine der drei Methoden funktionieren, hat der Benutzer eine sehr<br />veralteten Browser, und er oder sie erhalten eine Benachrichtigung,<br />dass der Browser nicht AJAX<br />unterstützt .<br /><br />Hinweis: Die<br />Browser-spezifischen Code oben ist lang und sehr komplex. Allerdings,<br />das ist der Code, den Sie verwenden können, <span style="font-weight: bold;">jedes Mal, wenn Sie</span><br /><span style="font-weight: bold;">Notwendigkeit der Schaffung eines XMLHttpRequest-Objekt</span>, so können Sie<br /><span style="font-weight: bold;">einfach kopieren</span> und fügen Sie ihn, wann immer Sie es brauchen. Der<br />Code oben ist kompatibel mit allen gängigen Browsern: Internet<br />Explorer, Opera, Firefox und Safari.<br /><br /><br /></pre><div id="result_box" dir="ltr">AJAX - Mehr über das XMLHttpRequest-Objekt<br />Vor dem Senden von Daten an den Server müssen wir erklären die drei wichtigste Eigenschaften des <span style="font-weight: bold;">XMLHttpRequest-Objekt</span>.<br /><ul><li>The onreadystatechange Property</li></ul> Nach einer Anfrage an den Server, brauchen wir eine Funktion,die Daten die vom Server zurückgegeben sind, empfangen kann.<br /><br />Die <span style="font-weight: bold;">onreadystatechange</span>-Eigenschaft speichert die Funktion, die den Prozess der Reaktion von einem Server. Der folgende Code definiert eine leere Funktion und setzt die <span style="font-weight: bold;">onreadystatechange</span>-Eigenschaft gleichzeitig:</div><pre><blockquote><pre>xmlHttp.onreadystatechange=function()<br />{<br />// We are going to write some code here<br />}</pre></blockquote></pre><ul><li> >The readyState Property </li></ul><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/3564159997406900968-4486801125440990990?l=ajaxtutor.blogspot.com' alt='' /></div>mileffhttp://www.blogger.com/profile/16708269009363864145noreply@blogger.com0