AJAX - Obiekt XMLHttpRequest
- Poprzednia strona Przegląd AJAX
- Następna strona Żądania AJAX
Obiekt XMLHttpRequest jest fundamentem AJAX.
- Tworzenie obiektu XMLHttpRequest
- Zdefiniowanie funkcji zwrotnej
- Otwieranie obiektu XMLHttpRequest
- Wysyłanie żądań do serwera
Obiekt XMLHttpRequest
Wszystkie współczesne przeglądarki obsługują Obiekt XMLHttpRequest.
Obiekt XMLHttpRequest można używać do wymiany danych z serwerem w tle. Oznacza to, że można aktualizować część zawartości strony bez konieczności ponownego ładowania całej strony.
Tworzenie obiektu XMLHttpRequest
Wszystkie współczesne przeglądarki (Chrome, Firefox, IE, Edge, Safari, Opera) mają wbudowane Obiekt XMLHttpRequest.
Gramatyka tworzenia obiektu XMLHttpRequest:
variable = new XMLHttpRequest();
Zdefiniowanie funkcji zwrotnej
Funkcja zwrotna to funkcja przekazywana jako parametr do innej funkcji.
W tym przypadku funkcja zwrotna powinna zawierać kod do wykonania, gdy odpowiedź jest gotowa.
xhttp.onload = function() {
// Co zrobić, gdy odpowiedź jest gotowa
}
Wysyłanie żądania
Aby wysłać żądanie do serwera, możesz użyć obiektu XMLHttpRequest open() i send() Metoda:
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Przykład
// Tworzenie obiektu XMLHttpRequest
const xhttp = new XMLHttpRequest();
// Zdefiniowanie funkcji zwrotnej
xhttp.onload = function() {
// Możesz tutaj użyć danych
}
// Wysyłanie żądania
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Dostęp między domenami (Access Across Domains)
Z powodów bezpieczeństwa, współczesne przeglądarki nie pozwalają na dostęp między domenami.
Oznacza to, że strona i plik XML, który próbuje go załadować, muszą być umieszczone na tym samym serwerze.
Przykłady na CodeW3C.com otwierają pliki XML znajdujące się w domenie CodeW3C.com.
Jeśli chcesz użyć powyższego przykładu na swojej stronie, plik XML, który ładujesz, musi być umieszczony na swoim serwerze.
Metody obiektu XMLHttpRequest
| Metoda | Opis |
|---|---|
| new XMLHttpRequest() | Tworzenie nowego obiektu XMLHttpRequest. |
| abort() | Anulowanie bieżącego żądania. |
| getAllResponseHeaders() | Zwracanie informacji nagłówkowych. |
| getResponseHeader() | Zwracanie specyficznych informacji nagłówkowych. |
| open(method, url, async, user, psw) |
Określenie żądania.
|
| send() | Wysyłanie żądania do serwera, używane dla żądań GET. |
| send(string) | Wysyłanie żądania do serwera, używane dla żądań POST. |
| setRequestHeader() | Dodanie pary etykieta/wartość do nagłówków do wysłania. |
Atrybuty obiektu XMLHttpRequest
| Właściwości | Opis |
|---|---|
| onload | Zdefiniowanie funkcji wywoływanej przy otrzymaniu (ładowaniu) żądania. |
| onreadystatechange | Zdefiniowanie funkcji wywoływanej, gdy zmienia się atrybut readyState. |
| readyState |
Zapisuje stan XMLHttpRequest
|
| responseText | Zwraca dane odpowiedzi w formie ciągului znaków |
| responseXML | Zwraca dane odpowiedzi w formacie XML |
| status |
Zwraca numer stanu żądania
Aby uzyskać pełną listę, odwiedź Podręcznik odnośnie wiadomości HTTP |
| statusText | Zwraca tekst stanu (np. "OK" lub "Nie znaleziono") |
Właściwości onload
Podczas korzystania z XMLHttpRequest można zdefiniować funkcję zwrotną, aby wykonać ją po otrzymaniu odpowiedzi na żądanie
Proszę zdefiniować funkcję w obiekcie XMLHttpRequest onload Funkcję zdefiniowaną w właściwości
Przykład
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Wiele funkcji zwrotnych
Jeśli na stronie są多个 AJAX zadania, powinno się utworzyć funkcję do wykonywania obiektu XMLHttpRequest i dla każdego zadania AJAX utworzyć funkcję zwrotną
Wywołanie funkcji powinno zawierać URL oraz funkcję wywoływana gdy odpowiedź jest gotowa
Przykład
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {cFunction(this);}
xhttp.open("GET", url);
xhttp.send();
}
function myFunction1(xhttp) {
// Oto akcja
}
function myFunction2(xhttp) {
// Oto akcja
}
Właściwości onload
readyState Właściwości zapisują stan XMLHttpRequest
onreadystatechange Właściwości definiują funkcję zwrotną, która jest wykonywana gdy zmienia się wartość właściwości readyState
status Właściwości i statusText Właściwości zapisują stan obiektu XMLHttpRequest
| Właściwości | Opis |
|---|---|
| onreadystatechange | Definiuje funkcję wywoływane gdy zmienia się wartość właściwości readyState |
| readyState |
Zapisuje stan XMLHttpRequest
|
| status |
Zwraca numer stanu żądania
Aby uzyskać pełną listę, odwiedź Podręcznik odnośnie wiadomości HTTP |
| statusText | statusText |
Zwróć stan tekstu (np. "OK" lub "Nie znaleziono").
Funkcja onreadystatechange jest wywoływana przy każdym zmianie readyState. 4 i status wynosi 200 Gdy odpowiedź jest gotowa:
Przykład
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
}
Zdarzenie onreadystatechange zostało wywołane czterokrotnie (1-4), przy każdym zmianie readyState.
- Poprzednia strona Przegląd AJAX
- Następna strona Żądania AJAX
