Ajax tutorial step by step

1. AJAX steht für Asynchronous JavaScript And XML.
2. AJAX ist eine Art der Programmierung. Populär von Google gemacht im 2005 (mit Google Suggest).
3. AJAX ist keine neue Programmiersprache, sondern eine neue Art und Weise der Nutzung bestehender Standards.
4. Mit AJAX können Sie besser, schneller und benutzerfreundlicher Web-Anwendungen herrstellen.
5. AJAX ist auf JavaScript und HTTP-Requests basiert.

Was sollten Sie bereits wissen,

Bevor Sie fortfahren, sollten Sie ein grundlegendes Verständnis der folgenden:

* HTML / XHTML
* JavaScript

AJAX = Asynchronous JavaScript and XML

AJAX ist keine neue Programmiersprache, sondern eine Technik für die Schaffung besser, schneller, mehr und interaktive Web-Anwendungen.

Mit AJAX, JavaScripts können direkt mit dem Server kommunizieren, mit dem JavaScript XMLHttpRequest-Objekt. Mit diesem Objekt können Sie Ihre JavaScript-Daten tauschen mit einem Web-Server, ohne Neuladen der Seite.

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..

Die AJAX-Technik macht Internet-Anwendungen kleiner, schneller und benutzerfreundlicher zu gestalten.
AJAX ist eine Browser-Technologie unabhängig von der Web-Server-Software.



AJAX basiert auf der folgenden Web-Standarten:

* JavaScript
* XML
* HTML -
* CSS

Die Web-Standaren, die AJAX verwendet, sind klar definiert, und von allen großen Browsern uterstützt. AJAX-Anwendungen sind Browser-und plattformunabhängig.

Mit AJAX dürfen wir bessere Internet-Anwendungen programmieren.

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 :).

Dennoch ist die Internet-Anwendungen sind nicht immer benutzerfreundlicher als die herkömmliche Desktop-Anwendungen.

Mit AJAX, Internet-Anwendungen können benutzerfreundlicher gemacht werden.

Sie können noch heute mit AJAX anfangen- es gibt nichts Neues zu lernen.

AJAX basiert auf bestehenden Standarten. Diese Standarten wurden von den meisten Entwicklern seit mehrere Jahre benutzt.

AJAX benutzt HTTP Requests

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.

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.

Mit AJAX, JavaScript kommuniziert direkt mit dem Server, durch den JavaScript-XMLHttpRequest-Objekt.

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.

XMLHttpRequest Object

Google Suggest 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.

Das XMLHttpRequest-Objekt wird in Internet Explorer 5.0 +, Safari 1,2, 1,0 Mozilla / Firefox, Opera 8 + und Netscape 7 unterstützt.


Ihre erste AJAX-Anwendung

Um zu verstehen, wie AJAX funktioniert, werden wir eine kleine AJAX-Anwendung zusammenbauen.

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 .

Die HTML-Datei nennen wir "testAjax.htm" , und es sieht so aus (beachten Sie, dass die HTML-Formular unten hat keine Absendeknopf! ):

Name: 
Time: 

AJAX - Browser Support

Die Quintessenz ist die AJAX XMLHttpRequest-Objekt.

Verschiedene Browser verwenden verschiedene Methoden, um die XMLHttpRequest-Objekt zu handeln.

Internet Explorer verwendet eine ActiveXObject, während andere Browser
nutzen das eingebaute JavaScript Objekt namens XMLHttpRequest.

So erstellen Sie dieses Objekt, und befassen sich mit unterschiedlichen Browsern, werden wir die Verwendung eines "try and catch"-Anweisung.

Aktualisieren sie unsere "testAjax.htm"-Datei mit dem JavaScript, dass das XMLHttpRequest-Objekt erzeugt:

Name: 
Time: 

Beispiel erläutert: Erstellt wird zunächst eine Variable xmlHttp um die XMLHttpRequest-Objekt.


Dann versuchst du es zu schaffen, das Objekt mit
XMLHttp = new XMLHttpRequest ().
Dies ist für den Firefox, Opera und Safari-Browser.
Falls das funktioniert nicht, versuchen wie  xmlHttp = new ActiveXObject (
"Msxml2.XMLHTTP"), das ist für den Internet Explorer 6.0 +, wenn auch das
nicht geht, versuchen wir es mit xmlHttp = new ActiveXObject (
"Microsoft.XMLHTTP"), der für den Internet Explorer 5.5 + ist.

Wenn keine der drei Methoden funktionieren, hat der Benutzer eine sehr
veralteten Browser, und er oder sie erhalten eine Benachrichtigung,
dass der Browser nicht AJAX
unterstützt .

Hinweis: Die
Browser-spezifischen Code oben ist lang und sehr komplex. Allerdings,
das ist der Code, den Sie verwenden können, jedes Mal, wenn Sie
Notwendigkeit der Schaffung eines XMLHttpRequest-Objekt, so können Sie
einfach kopieren und fügen Sie ihn, wann immer Sie es brauchen. Der
Code oben ist kompatibel mit allen gängigen Browsern: Internet
Explorer, Opera, Firefox und Safari.

AJAX - Mehr über das XMLHttpRequest-Objekt
Vor dem Senden von Daten an den Server müssen wir erklären die drei wichtigste Eigenschaften des XMLHttpRequest-Objekt.

• The onreadystatechange Property

Nach einer Anfrage an den Server, brauchen wir eine Funktion,die Daten die vom Server zurückgegeben sind, empfangen kann.

Die onreadystatechange-Eigenschaft speichert die Funktion, die den Prozess der Reaktion von einem Server. Der folgende Code definiert eine leere Funktion und setzt die onreadystatechange-Eigenschaft gleichzeitig:

xmlHttp.onreadystatechange=function()
{
// We are going to write some code here
}

• >The readyState Property