Ajax

Terminem Ajax nazwano mechanizm przesyłania danych z serwera na stronę internetową, bez przeładowywania (wczytywania na nowo) całej tej strony.

Zobaczmy to na prosty przykładzie:

<html>
<head>
<meta charset="utf-8" />
<script  src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function () {
  $('#przycisk').click(function () {

   jQuery.ajax({
     url: 'example.txt',
     type: 'get',
     success: function(dane){
        $('#dane').append(dane);
     },
     error: function(xhr, status, error) {
       alert('Bład');
     }
    });
  });    
});
</script>

</head>
<body>
<div id="dane"></div>
<button id="przycisk">kliknij</button>

</body>
</html>

Tak jak w poprzednich przykładach, mamy tu zdefiniowanie obsługi wydarzenia "onClick". W skrypcie wykorzystano funkcję ajax z biblioteki jQuery. Parametrem tej funkcji jest struktura (obiekt) o polach:

url - adres pobierania (tu z pliku example.txt umieszczonym w tym samym miejscu na serwerze, co tworzona strona;
type - sposób pobierania danych (get/post)
success - finkcja wywoływana po pobraniu danych (parametrem są te dane)
error - funkcja wywoływana w razie błedu

W funkcji "success" dodaje się wczytany tekst do sekcji div o identyfikatorze dane.

W tym przykładzie należy zwrócić uwagę na zrównoleglenie danych. Zapytanie jest wysyłane do serwera (funkcją ajax), natomiast funkcja success (;ub error) zostaje wywołana dopiero po zakończeniu transmisji. W międzyczasie strona / skrypt może wykonywać inne działania (równolegle do transmisji).

Funkcja takie jak error / success nazywamy funkcjami powrotu (callback functions).

Otrzymane dane mogą być w formacie Json - wtedy trzeba je przed użyciem przetworzyć. W jQuery istnieje funkcja specjalizowana do komunikacji Json: $.getJSON .

Przykład:

Tworzymy plik Json z danymi:

{
  "items": [
    {
      "key": "Pierwszy",
      "value": 1
    },
    {
      "key": "Drugi",
      "value": 2
    }
  ],
  "title": "Dane testowe."
}

Wczytujemy ten plik:

<html>
<head>
<meta charset="utf-8" />
<script  src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function () {

  $('#przycisk').click(function () {
    $.getJSON('example.json', function (data) {
      $('#tytul').append(data.title);

      var items = data.items.map(
        function (item) {
          return item.key + ': ' + item.value+'<br />';
        }
      );
      if (items.length) {
        $('#lista')
          .empty()
          .html('<li>' + items.join('</li><li>') + '</li>');
      }

    });
  });
});
</script>

</head>
<body>
<h1 id="tytul"></h1>
<ul id="lista"></ul>
<button id="przycisk">kliknij</button>

</body>
</html>

1) Zauważ, że funkcja powrotu (callback) jest drugim parametrem funkcja getJSON. Zwracane dane nie są tekstem, ale strukturą!!!

2) Listę do wyświetlenia przygotowuje metoda map (https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Obiekty/Array/map ), która przekszałca listę parametrów (z Json) na listę wartości wyliczonych na podstawie tych parametrów przez podaną funkcję. Tutaj funkcja tworzy napis klucz: wartość;

3). Funkcja join (https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Obiekty/Array/join) łączy tablicę (listę) elementów w jeden napis (łańcuch znaków)

4). Zapis zaczynający się od $('#lista')króconą formą (często stosowaną) instrukcji:


if (items.length) {
  lista=$('#lista');
  lista.empty();
  lista.html('<li>' + items.join('</li><li>') + '</li>');
}

Taki skrót jest możliwy dzięki temu, że każda kolejna funkcja zwraca obiekt jQuery, który może być dalej przetwarzany.