JQuery - AJAX: Unterschied zwischen den Versionen

Version vom 19. September 2020, 13:51 Uhr

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

Übertragen wird immer Klartext, allerdings selten XML-Daten. Heute nutzt man eher HTML-Fragmente oder JSON Daten.

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

Daten werden vom Server immer im Klartext geliefert und über das http Protokoll übertragen.

Textdatei anfordern

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.

Erklärung:

Die 2 Buttons bekommen eine Klickfunktion zugewiesen. Button 1 führt einen AJAX Request über GET aus. Button 2 über Post ($.get() bzw. $.post()). Als Parameter enthält die Funktion die Datei und eine weitere Funktion (oder Referenz auf eine Funktion). Diese neue Funktion bekommt als Parameter die erhaltenen Daten und schreibt sie in das div mit der id #ausgabe.

HTML Anfordern

Enthält die Antwort HTML Daten sollte der Browser sie auch so interpretieren. Dazu kann man jQuery direkt mitteilen, dass es sich um HTML Daten handelt.

//$("#ausgabe").text(data);
$("#ausgabe").html(data);

Kommunikation mit dem Server über AJAX und jQuery

ajax.html

<html>
  <head>
    <script type="text/javascript" 
      src="lib/jquery/jquery.js"></script>
    <script>
      $(document).ready(function(){
        $("button:first").click(function(){
          $.get("login_get.php",  
            { 
              username: $("input:first").val(), 
              password: $("input:last").val() 
            }, 
            function(data){
             $("#ausgabe").html(data);
            }
          );
        });
        $("button:last").click(function(){
          $.post("login_post.php",  
            { 
              username: $("input:first").val(), 
              password: $("input:last").val() 
            }, 
            function(data){
             $("#ausgabe").html(data);
            }
          );
        });
      });
    </script>
  </head>
  <body>
    <h1>Bitte Benutzername und Passwort eingeben</h1>
    <form name="f1">
      <table width="200" border="1">
        <tr>
          <td>Name</td><td><input type="text" size="30"></td>
        </tr>
        <tr>
          <td>Passwort</td>
          <td><input type="password" size="30"></td>
        </tr>
      </table>
    </form>
    <button>AJAX-Login mit $.get()</button>
    <button>AJAX-Login mit $.post()</button>
    <div id="ausgabe"></div>
  </body>
</html>

Der Aufruf erfolgt fast gleich. Nur werden in diesem Fall 3 Parameter übergeben. 1. Der Name des Skriptes. 2. Die Daten die übermittelt werden. 3. Eine (anonyme) Funktion die die Antwort des Servers verarbeitet.

Interessant ist also Parameter2. Hier wird einfach wie in jQuery an vielen Stellen üblich mit einem Optionen-Objekt gearbeitet. Dieses enthält die Deklarationen der Übergabewerte in der Form

bezeichner : wert

ln diesem Fall ist der Wert die Eingabe der HTML Input Felder (hier das erste Input der Seite).

username : $("input:first").val(),

login_get.php

<?php

$host = "localhost"; // Der MySQL-Server
$user = "root";// Der Datenbank Benutzername
$password = ""; // Das Passwort für die Datenbank
$dbname = "jquery"; // Der Name der Datenbank
$tabelle ="logindaten"; // Der Name der Tabelle
$loginrichtig =false;
$dbverbindung = mysql_connect ($host, $user, $password);
$dbanfrage = "SELECT * from $tabelle";
$result = mysql_db_query ($dbname, $dbanfrage, $dbverbindung);
while ($ausgabe = mysql_fetch_array ($result)) {
if (($ausgabe['username'] == $_GET['username']) && ($ausgabe['password'] == $_GET['password']) )
   {$loginrichtig=true; 
	 break;
    }
} 
if($loginrichtig) {
  echo "Login erfolgreich";
}
else {
  echo "Leider war ihr Login nicht erfolgreich, bitte überprüfen sie ihre Eingaben."; 
}

mysql_close ($dbverbindung);
?>

Auf Seite des PHP-Skriptes kommen die Daten als GET oder POST Variablen an (Hier GET). 

Als Antwort erwartet AJAX ja Klartext. Das bedeutet wir können einfach eine ganz normale Ausgabe über Echo machen. Möchten wir Daten zurückgeben muß das ebenfalls über Klartext funktionieren. Dazu können wir dann z.B. JSON oder XML nehmen.

Kommunikation über JSON

Eine gute Methode Strukturierte Daten (Objekte, Arrays, etc.) zu übertragen ist JSON. JSON ist eine Methode strukturierte Daten als platzsparenden String zu speichern, der trotzdem für den Menschen lesbar bleibt, aber auch vom Rechner leicht verarbeitet werden kann.

JSON - Daten

So sieht es aus.

ajax.json

{ 
  "name" : "Stephan Schlegel", 
  "beruf" : "Dipl Ing audiovisuelle Medien",
  "ort" : "Nürtingen",
  "webseiten" :	 { 
    "url1" : "www.geo-bit.de", 
    "url2" : "www.3d-relief.com", 
    "url3" : "www.ko-rockband.de"
  }
}

Im Prinzip ist es wieder ein Objekt indem es Bezeichner und Wertzuweisungen gibt. Im Fall Webseiten ist der Wert wiederum ein Objekt, bestehend aus Bezeichnern und Werten.

JSON Daten über jQuery lesen

<html>
  <head>
    <script type="text/javascript"  src="lib/jquery/jquery.js"></script>
    <script>
      $(document).ready(function(){
        $("button:first").click(function(){
          $.getJSON("ajax.json", function(data){
            $("#ausgabe").append(data.name + ", " + data.webseiten.url1);
          });
        });
      });
    </script>
  </head>
  <body>
    <button>getJSON</button>
    <div id="ausgabe"></div>
  </body>
</html>

Die Daten werden über getJSON geladen:

$.getJSON("ajax.json", function(data){ $("#ausgabe").append(data.name + ", " + data.webseiten.url1); });
$.getJSON("Datei", meineFunktion(data));

An die Funktion wird das Bezeichner-Objekt data übergeben und über dieses kann man auf die enthaltenen Daten zugreifen. Hier z.B. auf Name oder die erste URL.

data.name
data.webseiten.url1

Hinweis: über die getJSON Funktion werden die Daten direkt in ein jQuery Objekt umgewandelt. Über get und post würde man einfach den Text bekommen. Man kann aber einen JSON String auch nachträglich umwandeln. Dafür gibt es die jQuery Funkion parseJSON(json).

Beispiel Datensätze aus einem JSON Objekt verarbeiten mit each

Beispiel einer Funktion aus dem 3d-relief map-editor. Im Beispiel wird ein Dropdown-Feld erzeugt, in dem sich alle Produkte auswählen lassen. Zusätzlich wird ein Click Handler registriert. Der bei Klick wiederum eine JS Funktion "loadMap" ausführt.

...
$.getJSON("dataHandler.php",{action:"loadMaps"},function(data){
	//mapData = data;
	createMapSelector(data);
});
...

Übergeben wird das Data Objekt an diese Funktion


function createMapSelector(data){
	$("#map_selector_wrap").html('<div><h3>Select Relief Map</h3><select id="map_selector" name="map_selector">');
	$("#map_selector").append('<option value="na">Select product to view details</option>');
	$.each(data,function(key,obj){
		if(obj.products_name != null)
			$("#map_selector").append('<option value="' + obj.products_id + '">' + obj.products_name + '</option>');
	});
	$("#map_selector_wrap").append('</select></div>');
	// click handler for selector
	$("#map_selector").change(function(){
  		actID=$("#map_selector option:selected").val()
  		if(actID != "na")
  			loadMap(actID);
  	});
}

JSON Daten Senden

Daten aus einem Formular kann man einfach z.B. an ein PHP Skript senden

http://stackoverflow.com/questions/10955017/sending-json-to-php-using-ajax

Für Typo3 Extensions evtl. stringify machen und als POST DAten schicken statt als JSON Objekt, damit die Daten valide sind.

JSON Daten von fremden Servern

Normalerweise holt JavaScript Daten nur vom gleichen Server, auf dem das Skript läuft. Dies kann man mit JSONP umgehen. Das etwas umfangreichere Beispiel liest Twitterdaten über JSON und die Twitter API.

jQuery und JSONP - Tweets von Twitter lesen

siehe auch nächstes Beispiel "JavaScript" nachladen.

JavaScript nachladen

Mit jQuery kann man JavaScripte nachladen. Die enthaltenen Statements werden automatisch ausgeführt, bzw. enthaltene Funktionen verfügbar gemacht. So kann man sehr schön seine Funktionen auf mehrere Bibliotheken aufteilen und bei Bedarf laden.

$.getScript("ajax/test.js", function(data, textStatus, jqxhr) {
   console.log(data); //data returned
   console.log(textStatus); //success
   console.log(jqxhr.status); //200
   console.log('Load was performed.');
});

ajax.html

<html>
  <head>
    <script type="text/javascript" 
      src="lib/jquery/jquery.js"></script>
    <script>
      $(document).ready(function(){
        $("button:first").click(function(){
          $.getScript("zufall.js", function(){
            $("#ausgabe").text(zufallsZahl());
          });
        });
        $("button:last").click(function(){
          $.getScript("http://mydomain.de/jquery/zufall.js", function(){
            $("#ausgabe").text(zufallsZahl());
          });
        });
      });
    </script>
  </head>
  <body>
	<button>Lade Skript von gleicher Domain</button>
	<button>Lade Skript von fremder Domain</button>
	<div id="ausgabe"></div>
  </body>
</html>

zufall.js

function zufallsZahl(){
  return Math.random();
}

AJAX Probleme lösen

IE schickt Daten nicht ab

Im IE gibt es ab und zu Probleme mit dem Cache. Es gibt einige Lösungsansätze.

Lösung bei Wetzel Auto Erfalssung

Von $.get auf $.ajax umgestellt und cache deaktiviert. Hat noch nicht funktioniert. Erst die Umstellung auf post hat geklappt.

		// Replace Get because of IE Bug
		$.ajax({
  			url: "ajax.php",
  			cache: false,
  			data: {
				'output': str,
	  			'action': "save"
			},
        	datatype: "json",
        	type: "POST"
		}).done(function(data) {
			if(data["success"]){
				showMessage("Fahrzeug wurde gespeichert");
				getItems();
			}
			if(!data["success"]){
				showMessage("Fehler - Fahrzeug wurde NICHT gespeichert");
			}
		});
		
/*		
		$.get(
			'ajax.php',{
				'output': str,
	   			'action': "save"
			}
		).done(function(data){
				if(data["success"]){
					showMessage("Fahrzeug wurde gespeichert");
					getItems();
				}
				if(!data["success"]){
					showMessage("Fehler - Fahrzeug wurde NICHT gespeichert");
				}
		});
*/

Weitere Tipps

http://stackoverflow.com/questions/4303829/how-to-prevent-jquery-ajax-caching-in-internet-explorer

Das ist ein Nachbau von dem was der cache:false Parameter von jQuery tut. Er hängt einen uniq_param an, damit sich die URL ständig ändert.

$.ajax({
    url : "my_url",
    data : {
        'uniq_param' : (new Date()).getTime(),
        //other data
    }});

@@ Zeile 60: / Zeile 60: @@
 == Kommunikation mit dem Server über AJAX und jQuery ==
 '''ajax.html'''
-<pre>
+<syntaxhighlight lang="html5">
 <html>
    <head>
@@ Zeile 110: / Zeile 110: @@
    </body>
 </html>
-</pre>
+</syntaxhighlight>
 Der Aufruf erfolgt fast gleich. Nur werden in diesem Fall 3 Parameter übergeben.