Asynchroniczny JavaScript i XML (ang. Asynchronous JavaScript and XML, AJAX) – technika tworzenia aplikacji internetowych, w których interakcja użytkownika z serwerem odbywa się bez przeładowywania całego dokumentu, w sposób asynchroniczny. Ma to umożliwiać bardziej dynamiczną interakcję z użytkownikiem niż w tradycyjnym modelu, w którym każde żądanie nowych danych wiąże się z przesłaniem całej strony HTML. Terminal AJAX został wymyślony przez Jesse Jamesa Garretta.
Na technikę tę składa się kilka elementów:
Teoretycznie są to wszystkie wymagane elementy, jednak w praktyce używane są jeszcze odpowiednie skrypty funkcjonujące po stronie serwera i współpracujące z bazą danych. Można sobie jednak bez nich poradzić, jeśli wszystkie potrzebne dane zostały już wcześniej wygenerowane (np. zawartość poszczególnych stron prostego serwisu).
function ajaxFunction(){
var xmlHttp;
try{
// Utworzenie obiektu XMLHttpRequest (silnik Gecko, WebKit, Presto, Trident w IE>6)
xmlHttp=new XMLHttpRequest();
} catch(e) {
// Wyłapuje błąd jeśli JavaScript nie posiada obiektu XMLHttpRequest
try {
// Utworzenie obiektu ActiveXObject, który jest zawarty w kontrolce ActiveX IE
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
// Utworzenie obiektu ActiveXObject, dla innych wersji IE
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
// Wyświetlenie błędu o braku obsługi obiektu XMLHttpRequest
alert("Your browser does not support AJAX!");
return false;
}
}
}
// zwrócenie obiektu
return xmlHttp;
}
Uproszczone pobieranie w przeglądarkach wspierających standardowe tworzenie obiektu XHR oraz parsowanie JSON.
function pobierzDane(onLoad) {
var request = new XMLHttpRequest();
request.open('GET', 'data.json');
request.onload = function () {
var data = JSON.parse(request.responseText);
onLoad(data);
};
request.send();
}
Funkcja fetch to nowe API dostępne w przeglądarkach, które upraszcza wysyłanie zapytań HTTP. Funkcja fetch zwraca obietnicę.
fetch('data.json').then(response => {
return response.json();
}).then(data => {
console.log(data);
});
