Maciej Żukiewicz

AJAX

Asynchronous JavaScript And XML

AJAX

Asynchroniczny JavaScript i XML

Metoda tworzenia aplikacji internetowych, w których komunikacja z serwerem odbywa się w tle, bez zawieszania i przeładowywania całej strony.

Asynchroniczność

Asynchroniczność vs Synchroniczność

Możemy wykonywać wiele czynności w tym samym momencie.

JavaScript

Tego już chyba tłumaczyć nie musimy ;)

XML

Extensible Markup Language

Rozszerzalny Język Znaczników

Uniwersalny język znaczników przeznaczony do reprezentowania strukturalnych danych.

<?xml version="1.0" encoding="UTF-8"?>
<playlist title="Muzyka do pracy">
    <song id="1">
        <title>Reaktywacja</title>
        <author>Grammatik</author>
        <album year="2004">Reaktywacja EP</album>
    </song>
    <song id="2">
        <title>Nie jestem dawno</title>
        <author>Pezet/Noot</author>
        <album year="2004">Muzyka poważna</album>
    </song>
</playlist>

Przykładowy dokument XML

Nie tylko XML

Inne wykorzystywane formaty

Czysty tekst (Plain text)

Muzyka do pracy

1
Reaktywacja
Grammatik
Reaktywacja EP (2004)

2
Nie jestem dawno
Pezet/Noon
Muzyka poważna (2004)

Nie tylko XML

HTML

<h2>Muzyka do pracy</h2>
<ol>
    <li data-id="1">
        <strong class="title">Reaktywacja</strong>
        <em class="author">Grammatik</em>
        <span class="album">Reaktywacja EP (2004)</span>
    </li>
    <li data-id="2">
        <strong class="title">Nie jestem dawno</strong>
        <em class="author">Pezet/Noon</em>
        <span class="album">Muzyka poważna (2004)</span>
    </li>
</ol>

Nie tylko XML

JSON

{
    "title": "Muzyka do pracy",
    "songs": [
        {
            "id": 1,
            "title": "Reaktywacja",
            "author": "Grammatik",
            "album": {
                "title": "Reaktywacja EP",
                "year": 2004
            }
        },
        {
            "id": 2,
            "title": "Nie jestem dawno",
            "author": "Pezet/Noon",
            "album": {
                "title": "Muzyka poważna",
                "year": 2004
            }
        }
    ]
}

Nie tylko XML

JavaScript Object Notation

JavaScript'owa notacja obiektów

Standardowe działanie strony WWW

Zwykłe żądanie HTTP

Budowa żądania HTTP

Asynchroniczne działanie strony WWW

Żądanie XMLHttpRequest (XHR)

XMLHttpRequest

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
    if (4 === this.readyState && 200 === this.status) {
        console.log('Mamy odpowiedź, oto ona:');
        console.log(this.responseText);
        console.log(this.responseXML);
    }
};

xhr.open('GET', 'playlist.xml', true); 
// xhr.open('GET', 'playlist.xml', true, 'admin', 'admin123');

xhr.send();

Przykład stworzenia i wysłania prostego żądania XHR

Ze względów bezpieczeństwa, możemy wysyłać żądania tylko i wyłącznie w obrębie domeny (strony).

Ograniczenie to można obejść stosując JSONP lub konfigurując nagłówek Access-Control-Allow-Origin na serwerze.

readyState

- żądanie nie zostało zainicjowane

- ustanowiono połączenie z serwerem

- serwer otrzymał żądanie

- serwer przetwarza żądanie

- żądanie się powiodło, serwer zwrócił odpowiedź i możemy ją odczytać

0

1

2

3

4

Kody stanów i ich znaczenie

Przechowuje informacje na temat aktualnego stanu żądania XMLHttpRequest.

status

- "OK" - strona pod danym adresem została odnaleziona, serwer otrzymał żądanie i jest w trakcie jego obsługiwania

 

- "Forbidden" - strona pod danym adresem została odnaleziona, serwer otrzymał żądanie, ale nie posiadamy uprawnień, aby serwer mógł wykonać żądanie (np. nie jesteśmy zalogowani)

 

- "Page not found" - strona pod danym adresem nie została odnaleziona.

200

Najczęstsze statusy

Przechowuje informacje o statusie HTTP żądania.

403

404

JavaScript AJAX

By Maciej Żukiewicz

JavaScript AJAX

  • 172