2009-10-02 8 views
74

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

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

Allerdings denke ich, es ist kein eleganter Weg, 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. Sagen wir, 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).

+8

Obligatorische Link zu wikipedia: http://en.wikipedia.org/wiki/Ajax_(programming) –

+0

Für die Antwort finden Sie unter dem Link: http://www.w3schools.com/php/php_ajax_intro. asp –

Antwort

1

das ist Ajax. Sie können Ajax nicht ohne Javascript verwenden. Sie sollten sich Jquery- und Prototyp-Beispiele ansehen, um sich ein Bild von der Verwendung zu machen.

+0

Sie können AJAX mit VBScript tun, nach einigen Quellen. Kein guter Grund, es zu tun. :-) – Nosredna

+0

Nein, das geht nicht. Sie können AVAX mit VBScript ausführen. –

+6

Heh. Ich habe gehört, dass AJAX asynchrones JavaScript und XML ist. Außer dass es nicht asynchron sein muss, muss es kein JavaScript sein und es muss nicht XML sein. – Nosredna

0

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

5

AJAX steht für asynchrones Javascript und XML. AJAX unterstützt teilweise Aktualisierungen von Seiten, ohne die gesamte Seite zurück auf den Server zu stellen.

Es gibt viele Optionen für AJAX. Die zwei 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 JavaScript bereits kennen und sehr genaue Kontrolle über die Abfrage und Aktualisierung Ihrer Seite haben.

HTH

+1

XML, nicht XHTML, oder? – Nosredna

+0

@Nosredna: Ja. – Stardust

17

AJAX umfasst in der Regel HTTP-Anfragen vom Client zum Server zu senden und die Antwort des Servers verarbeiten, ohne die gesamte Seite neu zu laden. (Asynchron).

Javascript tut im Allgemeinen die Vorlage und empfängt die Daten Antwort vom Server (traditionell XML, oft andere weniger ausführlich Formate wie JSON)

Die Javascript dann kann die Seite DOM dynamisch aktualisieren die Sicht des Benutzers zu aktualisieren.

Also 'Asynchronous Javascript und XML'.

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

+0

Ich mag diese Antwort. @Vertex alles, was Sie wissen müssen, ist über XMLHttpRequest. – enguerran

15

Das Wesen von AJAX ist dies:

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

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

+0

Irgendwelche Beispiele, die Sie sich vorstellen können, wo ich diese "Aktualisierung auf eigene Faust" in Aktion sehen kann? –

13

Ajax ist mehr als nur einen Teil der Seite neu laden. Ajax steht für asynchrones Javascript und Xml.

Der einzige Teil von Ajax, den Sie benötigen, ist das XMLHttpRequest Objekt von 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, dass example und Sie werden schneller pro wie 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> 
+1

Trotz des Namens benötigt AJAX kein XML, aber das X im Wort/Akronym AJAX steht für XML, weil es historisch die Art ist, zwischen Server und Client zu kommunizieren. – enguerran

109

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

wie DHTML und LAMP ist AJAX kein Technologie an sich, aber eine Gruppe von Technologien. AJAX verwendet eine Kombination aus:

  • HTML und CSS zum Markieren und Styling-Informationen.
  • Das DOM zugegriffen mit JavaScript zu dynamisch anzeigen und interagieren mit die Informationen präsentiert.
  • Eine Methode für den Austausch von Daten asynchron zwischen Browser und Server, dadurch Vermeidung von Seiten neu geladen. 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 Daten an den Browser gesendet. Zu den gängigen Formaten gehören XML, vorformatierter HTML-Code, einfacher Text und JavaScript-Objektnotation (JSON). Diese Daten könnten dynamisch durch irgendeine Form von Server-Side-Scripting erstellt werden.

Wie Sie, von einer reinen technologischen Sicht sehen können, gibt es nichts wirklich Neues hier. Die meisten AJAX-Teile gab es bereits 1994 (1999 für das XMLHttpRequest Objekt). Die wirkliche Neuheit war, diese Teile zusammen wie Google mit GMail (2004) und Google Maps (2005) zu verwenden. Tatsächlich haben beide Seiten stark zur Förderung von AJAX beigetragen.

Ein Bild sagt mehr als tausend wert Worte zu sein, unter einem Diagramm, das die Kommunikation zwischen dem Client und dem Remote-Server, sowie die Unterschiede zwischen den klassischen und den AJAX-basierten Anwendungen zeigt:

alt text

Für den orangefarbenen Teil können Sie alles von Hand (mit dem XMLHttpRequest Objekt) machen oder Sie können berühmte JavaScript-Bibliotheken wie jQuery, Prototype, YUI usw. verwenden, 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 jedoch für ein einfaches Merkmal übertrieben sein. Auf der Serverseite können einige Frameworks auch helfen (zB DWR oder RAJAX wenn Sie Java verwenden), aber Sie müssen lediglich einen Service bereitstellen, 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).

1

Wenn Sie interessiert sind, IBM 10 (möglicherweise mehr) teiligen Serie über Ajax hat: (! Auch wenn Sie den ersten Teil nur lesen) Mastering Ajax part 1

Obwohl ein paar Jahre alt jetzt ist es ein gutes Intro,

denke ich die ganze Reihe sollte Here aufgeführt werden, obwohl die Seite ist ein bisschen für mich im Moment langsam 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 umwandeln können. Der Autor, ein Ajax-Experte, zeigt, wie diese Technologien zusammenarbeiten - von der Übersicht bis zum Detail - um eine äußerst effiziente Web-Entwicklung zu ermöglichen. Er enthüllt auch die zentralen Konzepte von Ajax, einschließlich des XMLHttpRequest-Objekts.