Wie funktioniert AJAX?

Was ist die Essenz von AJAX? Ich möchte beispielsweise einen Link auf meiner Seite haben, sodass beim Klicken eines Benutzers auf diesen Link einige Informationen an meinen Server gesendet werden, ohne dass die aktuelle Seite neu geladen werden muss. Ist das AJAX?

Ich konnte dieses Verhalten mithilfe von Isoframes erzielen. In weiteren Details 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 gesendet hat. Angenommen, 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 meine Server-Update-Datenbank (um sich daran zu erinnern, dass der Benutzer die Nachricht mag).

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

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

• HTML und CSS zum Markieren und Gestalten von Informationen.
• Das DOM, auf das mit JavaScript zugegriffen wird, um die dargestellten Informationen dynamisch anzuzeigen und mit ihnen zu interagieren.
• Eine Methode zum asynchronen Datenaustausch zwischen Browser und Server, um das erneute Laden von Seiten zu vermeiden. Das XMLHttpRequest (XHR) -Objekt wird normalerweise 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. Zu den gängigen Formaten gehören XML, vorformatiertes HTML, Klartext und JavaScript Object Notation (JSON). Diese Daten können dynamisch durch serverseitiges Scripting erstellt werden.

Wie Sie sehen, gibt es hier aus rein technologischer Sicht nichts wirklich Neues. Die meisten AJAX-Teile waren bereits 1994 dort (1999 für das XMLHttpRequestObjekt). Die wahre Neuheit war die Verwendung dieser Teile zusammen zu verwenden wie es Google mit GMail (2004) und Google Maps (2005) getan hat. Tatsächlich haben beide Websites stark zur Förderung von AJAX beigetragen.

Ein Bild mit mehr als tausend Worten unter einem Diagramm, das die Kommunikation zwischen dem Client und dem Remote-Server sowie die Unterschiede zwischen den klassischen und den AJAX-Anwendungen veranschaulicht:

Für den orangefarbenen Teil können Sie alles von Hand (mit dem XMLHttpRequestObjekt) erledigen oder berühmte JavaScript-Bibliotheken wie jQuery , Prototype , ausführen YUI usw. verwenden, um die Clientseite Ihrer Anwendung zu "AJAXifizieren". Solche Bibliotheken zielen darauf ab, die Komplexität der JavaScript-Entwicklung (z. B. die browserübergreifende Kompatibilität) zu verbergen, können jedoch für eine einfache Funktion übertrieben sein.

Auf der Serverseite können auch einige Frameworks hilfreich sein (z. B. DWR oder RAJAX, wenn Sie Java verwenden). Sie müssen jedoch lediglich einen Dienst verfügbar machen, der nur die erforderlichen Informationen zurückgibt, um die Seite teilweise zu aktualisieren (zunächst als XML) / XHTML - das X in AJAX - aber JSON wird heutzutage oft bevorzugt).

Die Essenz von AJAX ist folgende:

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

Das heißt, Ihr Javascript kann asynchrone GET- und POST-Anforderungen senden (normalerweise über ein XMLHttpRequestObjekt) und dann die Ergebnisse dieser Anforderungen verwenden, um seine Seite zu ändern (über die Manipulation des Dokumentobjektmodells ).

Bei AJAX werden normalerweise HTTP-Anforderungen vom Client an den Server gesendet und die Antwort des Servers verarbeitet, ohne dass die gesamte Seite neu geladen werden muss. (Asynchron).

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

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

Also 'Asychrones Javascript und XML'.

Es gibt andere Optionen, um die Ansicht des Benutzers zu aktualisieren, ohne die Seite neu zu laden, z. B. Flash und Applets. Diese Optionen klingen jedoch nicht nach guten Lösungen für Ihren Fall. Klingt so, als wäre Javascript der richtige Weg. Es gibt jede Menge gute Bibliotheksunterstützung, wie z. B. jQuery, wie es auf dieser Site verwendet wird, sodass Sie nicht selbst 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 das XMLHttpRequest- Objekt aus Javascript. Sie müssen es verwenden, um einen kleinen Teil Ihres HTML als div oder andere Tags zu laden und neu zu laden.

Lesen Sie dieses Beispiel und Sie werden schneller Profi, als Sie denken!

<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 Asynchronous Javascript und XML. AJAX unterstützt teilweise Aktualisierungen von Seiten, ohne dass die gesamte Seite auf dem Server zurückgesendet werden muss.

Es gibt viele Optionen für AJAX. Die beiden bemerkenswertesten (wohl) sind Microsoft 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 mit Javascript vertraut sind, und ermöglicht eine sehr detaillierte Kontrolle über das Abfragen und Aktualisieren Ihrer Seite.

HTH

Wenn Sie interessiert sind, hat IBM eine 10 (möglicherweise mehr) Teileserie zu Ajax: Mastering Ajax Teil 1

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

Ich denke , die ganze Reihe aufgeführt sein hier , obwohl die Website im Moment ein bisschen langsam für mich zu sein ...

Zusammenfassung:

Ajax, das aus HTML, JavaScript ™ -Technologie, DHTML und DOM besteht, ist ein hervorragender Ansatz, mit dem Sie klobige Webschnittstellen in interaktive Ajax-Anwendungen verwandeln können. Der Autor, ein Ajax-Experte, zeigt, wie diese Technologien zusammenarbeiten - von einer Übersicht bis zu einem detaillierten Erscheinungsbild -, 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 Beispiele für Abfragen und Prototypen ansehen, um eine Vorstellung von der Verwendung zu erhalten.

Was Sie versuchen zu tun, ist technisch Ajax. Ajax erstellt XML-Fragmenttransaktionen, um Abschnitte einer Seite zu aktualisieren. Javascript macht diese Anfragen nett und ordentlich.