Bryan Albrecht

AJAX

In diesem Tutorial möchte ich erklären, was AJAX ist und wie man es benutzt.

Nutzen

Heutzutage gibt es viele Webseiten, welche auf dem "single page website" Prinzip aufgebaut sind.

Das bedeutet, dass die ganze Webseite funktioniert ohne, dass eine neue Seite geladen werden muss. Das heisst, dass sich die URL beim Navigieren nicht verändert.

Auch möglich ist es, das eine Seite dauerhaft abfragen muss, ob auf einem Server neue Inhalte verfügbar sind. Wenn neue Inhalte verfügbar sind, sollen diese automatisch, ohne die Seite neu zu laden, in die Webseite eingebunden werden.

Funktion

AJAX basiert auf jQuery, darum muss die jQuery Bibliothek in die Webseite eingebunden werden.

Um den ganzen Vorgang zu starten, muss man eine Aktion festlegen, nach welcher die AJAX Abfrage gestartet wird. Diese Aktion ruft eine JavaScript Funktion auf, welche die AJAX Abfrage bearbeitet.

Wenn die Antwort vom Server kommt, fügt die genannte JavaScript Funktion die Erhaltenen Daten in die Webseite ein.

Code

Einbinden der jQuery Bibliothek:

  1. <script src="http://code.jquery.com/jquery-1.11.2.js"></script>

Einbinden der Funktion für die AJAX Abfrage:

Die Javascript Funktion, befindet sich im Header

  1. <head runat="server">
  2. <title>FirstAjax</title>
  3. <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  5. <script type="text/javascript">
  6. $(document).ready(function () {
  7. var serviceURL = '/AjaxTest/FirstAjax';
  8. $.ajax({
  9. type: "POST",
  10. url: serviceURL,
  11. data: param = "",
  12. contentType: "application/json; charset=utf-8",
  13. dataType: "json",
  14. success: successFunc,
  15. error: errorFunc
  16. });
  17. function successFunc(data, status) {
  18. alert(data);
  19. }
  20. function errorFunc() {
  21. alert('error');
  22. }
  23. });
  24. </script>
  25. </head>

Aufrufen der Funktion:

In diesem Beispiel wird eine Funktion aus dem Controller aufgerufen.