Wie funktioniert AJAX?

Was ist die Essenz von AJAX? Zum Beispiel möchte ich einen Link auf meiner Seite haben, sodass, wenn ein Benutzer auf diesen Link klickt, einige Informationen an meinen Server gesendet werden, ohne dass die aktuelle Seite neu geladen wird. Ist das AJAX?

Ich konnte dieses Verhalten durch die Verwendung von Isoframes erreichen. Genauer gesagt habe ich einen Link (sagen wir ein kleines Bild) in einen kleinen Isoframe eingefügt. Wenn der Benutzer auf diesen Link klickt, lädt der Browser nur die Seite im Isoframe neu.

Ich denke jedoch, dass dies kein eleganter Weg ist, um das Ziel zu erreichen. Ich denke, ich muss AJAX verwenden. Wie funktioniert es? Kann eine Verwendung von XHTML das betrachtete Problem auf elegante Weise lösen? Oder muss ich JavaScripts verwenden?

Ich brauche nicht viel. Ich möchte nur einen kleinen Link haben, der (nach dem Klicken) einige Informationen an den Server sendet. Nehmen wir an, ich habe ein “Sternbild” in der Nähe einer Nachricht. Wenn ein Benutzer auf den Stern klickt (er/sie mag die Nachricht), ändert der Stern die Farbe und mein Server aktualisiert die Datenbank (um sich daran zu erinnern, dass dem Benutzer die Nachricht gefällt).

Wenn Sie AJAX (was für Asynchronous Javascript And XML steht) völlig neu für Sie sind, ist die AJAX Wikipedia-Eintrag ist ein guter Ausgangspunkt:

Wie DHTML und LAMP ist AJAX keine Technologie an sich, sondern eine Gruppe von Technologien. AJAX verwendet eine Kombination aus:

• HTML und CSS zum Markieren und Gestalten von Informationen.
• Auf das DOM wird mit JavaScript zugegriffen, um die präsentierten Informationen dynamisch anzuzeigen und mit ihnen zu interagieren.
• Eine Methode zum asynchronen Austausch von Daten zwischen Browser und Server, wodurch Seitenneuladungen vermieden werden. Normalerweise wird das Objekt XMLHttpRequest (XHR) verwendet, aber manchmal wird stattdessen ein IFrame-Objekt oder ein dynamisch hinzugefügtes Tag verwendet.
• Ein Format für die an den Browser gesendeten Daten. Gängige Formate sind XML, vorformatiertes HTML, Klartext und JavaScript Object Notation (JSON). Diese Daten könnten dynamisch durch eine Form von serverseitigem Skripting erstellt werden.

Wie Sie sehen, gibt es rein technologisch gesehen hier nichts wirklich Neues. Die meisten AJAX-Teile gab es bereits 1994 (1999 für die XMLHttpRequest Objekt). Die eigentliche Neuheit bestand darin, diese Teile zu verwenden zusammen wie Google es mit GMail (2004) und Google Maps (2005) getan hat. Tatsächlich haben beide Sites stark zur Förderung von AJAX beigetragen.

Ein Bild sagt mehr als tausend Worte, darunter ein Diagramm, das die Kommunikation zwischen dem Client und dem Remote-Server sowie die Unterschiede zwischen den klassischen und den AJAX-basierten Anwendungen veranschaulicht:

Für den orangefarbenen Teil können Sie alles von Hand machen (mit der XMLHttpRequest Objekt) oder Sie können berühmte JavaScript-Bibliotheken wie verwenden jQuery, Prototyp, YUI, usw., um die Client-Seite Ihrer Anwendung zu “AJAXify”. Solche Bibliotheken zielen darauf ab, die Komplexität der JavaScript-Entwicklung (z. B. die Cross-Browser-Kompatibilität) zu verbergen, könnten aber für ein einfaches Feature übertrieben sein.

Auf der Serverseite können auch einige Frameworks helfen (z DWR oder RAJAX wenn Sie Java verwenden), aber alles, was Sie tun müssen, ist im Grunde, einen Dienst bereitzustellen, der nur die erforderlichen Informationen zurückgibt, um die Seite teilweise zu aktualisieren (anfänglich als XML/XHTML – das X in AJAX – aber JSON wird heutzutage oft bevorzugt).

Die Essenz von AJAX ist dies:

Ihre Seiten können im Internet surfen und ihre eigenen Inhalte aktualisieren, während der Benutzer andere Dinge tut.

Das heißt, Ihr Javascript kann asynchrone GET- und POST-Anforderungen senden (normalerweise über eine XMLHttpRequest Objekt) verwenden Sie dann die Ergebnisse dieser Anfragen, um seine Seite zu ändern (via Dokumentobjektmodell Manipulation).

AJAX beinhaltet typischerweise das Senden von HTTP-Anforderungen vom Client an den Server und das Verarbeiten der Antwort des Servers, ohne die gesamte Seite neu zu laden. (Asynchron).

Javascript führt im Allgemeinen die Übermittlung durch und empfängt die Datenantwort vom Server (traditionell XML, oft andere weniger ausführliche Formate wie JSON).

Das Javascript kann dann das Seiten-DOM dynamisch aktualisieren, um die Ansicht des Benutzers zu aktualisieren.

Also ‘Asynchrones Javascript und XML’.

Es gibt andere Möglichkeiten, die Ansicht des Benutzers zu aktualisieren, ohne die Seite neu zu laden, Dinge wie Flash und Applets, aber diese klingen nicht nach guten Lösungen für Ihren Fall. Klingt wie Javascript ist der Weg zu gehen. Es gibt jede Menge guter Bibliotheksunterstützung, wie z jQuery wie auf dieser Seite verwendet wird, so dass Sie selbst nicht viel Javascript schreiben müssen.

Ajax ist mehr als nur ein Teil der Seite neu zu laden. Ajax steht für Asynchronous Javascript And XML.

Der einzige Teil von Ajax, den Sie benötigen, ist die XMLHttpRequest Objekt aus Javascript. Sie müssen es verwenden, um einen kleinen Teil Ihres HTML-Codes als div oder andere Tags zu laden und neu zu laden.

Lies das Beispiel und du wirst schneller Profi sein, als du denkst!

<html>
<body>

<script type="text/javascript">
function ajaxFunction()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {
  // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
else
  {
  alert("Your browser does not support XMLHTTP!");
  }
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
  {
  document.myForm.time.value=xmlhttp.responseText;
  }
}
xmlhttp.open("GET","time.asp",true);
xmlhttp.send(null);
}
</script>

<form name="myForm">
Name: <input type="text" name="username" onkeyup="ajaxFunction();" />
Time: <input type="text" name="time" />
</form>

</body>
</html>

AJAX steht für Asynchrones Javascript und XML. AJAX unterstützt Teilaktualisierungen von Seiten, ohne dass die gesamte Seite an den Server zurückgesendet werden muss.

Es gibt viele Optionen für AJAX. Die zwei bemerkenswertesten (wohl) sind Microsofts ASP.NET AJAX (ehemals Atlas) und jQuery.

ASP.NET AJAX ist relativ einfach einzurichten, wenn Sie bereits mit ASP.NET vertraut sind. jQuery ist gut, wenn Sie bereits Javascript kennen, und ermöglicht eine sehr genaue Kontrolle über das Abfragen und Aktualisieren Ihrer Seite.

HTH

Wenn Sie interessiert sind, hat IBM eine 10-teilige (möglicherweise mehr) Serie zu Ajax: Ajax meistern Teil 1

Obwohl es jetzt ein paar Jahre alt ist, ist es ein gutes Intro (auch wenn Sie nur den ersten Teil lesen!)

Ich denke, die ganze Serie sollte aufgeführt werden Hierobwohl die Seite für mich im Moment etwas langsam ist …

Zusammenfassung:

Ajax, das aus HTML, JavaScript™-Technologie, DHTML und DOM besteht, ist ein hervorragender Ansatz, mit dem Sie klobige Weboberflächen in interaktive Ajax-Anwendungen umwandeln können. Der Autor, ein Ajax-Experte, demonstriert, wie diese Technologien zusammenarbeiten – von einem Überblick bis zu einem detaillierten Blick –, um eine äußerst effiziente Webentwicklung zu einer einfachen Realität zu machen. Er enthüllt auch die zentralen Konzepte von Ajax, einschließlich des XMLHttpRequest-Objekts.

das ist ajax. Sie können Ajax nicht ohne Javascript verwenden. Sie sollten sich jquery- und Prototyp-Beispiele ansehen, um eine Vorstellung von der Verwendung zu bekommen.