JQuery - AJAX

Aus Wikizone
Version vom 19. Oktober 2012, 07:24 Uhr von 134.3.241.116 (Diskussion) (Die Seite wurde neu angelegt: „ == Wie funktioniert AJAX ? == Früher mußte man bei jeder Anfrage die Webseite komplett neu laden. Auch wenn nur ein kleiner Teil neu benötigt wird (z.B. ein …“)
(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)
Wechseln zu: Navigation, Suche

Wie funktioniert AJAX ?

Früher mußte man bei jeder Anfrage die Webseite komplett neu laden. Auch wenn nur ein kleiner Teil neu benötigt wird (z.B. ein Suchergebnis). Mit AJAX kann man Teile einer Website neu laden. Das funktioniert über ein JavaScript Objekt den sogenannten XML-HTTP Request oder kurz XHR. Dieser kommuniziert quasi am Browser vorbei mit dem Server.

Die alte Kommunikationsart ist Synchron: Eine Anfrage - eine Webseite. Die neue Art ist asynchron. Alle Eigenschaften zusammengefaßt spricht man von Asynchronous JavaScript and XML - AJAX

jQuery und AJAX

jQuery bietet eine gute AJAX Unterstützung, und macht es dem Programmierer leicht mit den Besonderheiten der verschiedenen Browser umzugehen.

Datenanforderung mit jQuery und AJAX

ajax1.html

<html>
<head>
  <script type="text/javascript" src="lib/jquery/jquery.js"></script>
  <script>
    $(document).ready(function(){
      $("button:first").click(function(){
        $.get("ajax.txt", function(data){
          $("#ausgabe").text(data);
        });
      });
      $("button:eq(1)").click(function(){
        $.post("ajax.txt", function(data){
          $("#ausgabe").text(data);
        });			 
      });
    });
  </script>
</head>
<body>
	<button>AJAX-Anfrage mit $.get()</button>
	<button>AJAX-Anfrage mit $.post()</button>
	<div id="ausgabe"></div>
</body>
</html>

ajax.txt

Es gibt zwei Sachen, denen ich mir völlig sicher bin. Erstens: Männer sind viel schlauer als Frauen! Und zweitens? Die Erde ist flach. Genau.