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