AJAX — obiekt XMLHttpRequest
Zwornikiem AJAX jest obiekt XMLHttpRequest.
- Utwórz obiekt XMLHttpRequest
- Zdefiniuj funkcję zwrotną
- Otwórz obiekt XMLHttpRequest
- Wyślij żądanie do serwera
Obiekt XMLHttpRequest
Wszystkie nowoczesne przeglądarki obsługują XMLHttpRequestobiekt.
Obiekt XMLHttpRequestmoże być używany do wymiany danych z serwerem sieciowym za kulisami. Oznacza to, że możliwe jest aktualizowanie części strony internetowej bez przeładowywania całej strony.
Utwórz obiekt XMLHttpRequest
Wszystkie nowoczesne przeglądarki (Chrome, Firefox, IE, Edge, Safari, Opera) mają wbudowany XMLHttpRequestobiekt.
Składnia tworzenia XMLHttpRequestobiektu:
variable = new XMLHttpRequest();
Zdefiniuj funkcję oddzwaniania
Funkcja wywołania zwrotnego to funkcja przekazana jako parametr do innej funkcji.
W takim przypadku funkcja wywołania zwrotnego powinna zawierać kod do wykonania, gdy odpowiedź będzie gotowa.
xhttp.onload = function() {
// What to do when the response is ready
}
Wyślij zapytanie
Aby wysłać żądanie do serwera, możesz użyć metod open() i send()
XMLHttpRequestobiektu:
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Przykład
// Create an XMLHttpRequest object
const xhttp = new XMLHttpRequest();
// Define a callback function
xhttp.onload = function() {
// Here you can use the Data
}
// Send a request
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Dostęp w wielu domenach
Ze względów bezpieczeństwa nowoczesne przeglądarki nie pozwalają na dostęp między domenami.
Oznacza to, że zarówno strona internetowa, jak i plik XML, który próbuje załadować, muszą znajdować się na tym samym serwerze.
Przykłady na W3Schools wszystkie otwarte pliki XML znajdujące się w domenie W3Schools.
Jeśli chcesz użyć powyższego przykładu na jednej z własnych stron internetowych, ładowane pliki XML muszą znajdować się na własnym serwerze.
Metody obiektów XMLHttpRequest
| Method | Description |
|---|---|
| new XMLHttpRequest() | Creates a new XMLHttpRequest object |
| abort() | Cancels the current request |
| getAllResponseHeaders() | Returns header information |
| getResponseHeader() | Returns specific header information |
| open(method, url, async, user, psw) | Specifies the request method: the request type GET or POST url: the file location async: true (asynchronous) or false (synchronous) user: optional user name psw: optional password |
| send() | Sends the request to the server Used for GET requests |
| send(string) | Sends the request to the server. Used for POST requests |
| setRequestHeader() | Adds a label/value pair to the header to be sent |
Właściwości obiektu XMLHttpRequest
| Property | Description |
|---|---|
| onload | Defines a function to be called when the request is recieved (loaded) |
| onreadystatechange | Defines a function to be called when the readyState property changes |
| readyState | Holds the status of the XMLHttpRequest. 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready |
| responseText | Returns the response data as a string |
| responseXML | Returns the response data as XML data |
| status | Returns the status-number of a request 200: "OK" 403: "Forbidden" 404: "Not Found" For a complete list go to the Http Messages Reference |
| statusText | Returns the status-text (e.g. "OK" or "Not Found") |
Nieruchomość na obciążeniu
Za pomocą XMLHttpRequestobiektu można zdefiniować funkcję zwrotną, która zostanie wykonana, gdy na żądanie otrzyma odpowiedź.
Funkcja jest zdefiniowana we onloadwłaściwości XMLHttpRequestobiektu:
Przykład
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Wiele funkcji zwrotnych
Jeśli masz więcej niż jedno zadanie AJAX w witrynie, powinieneś utworzyć jedną funkcję do wykonywania XMLHttpRequestobiektu i jedną funkcję wywołania zwrotnego dla każdego zadania AJAX.
Wywołanie funkcji powinno zawierać adres URL i funkcję do wywołania, 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) {
// action goes here
}
function myFunction2(xhttp) {
// action goes here
}
Właściwość onreadystatechange
Właściwość readyStateposiada status XMLHttpRequest.
Właściwość onreadystatechangedefiniuje funkcję zwrotną, która zostanie wykonana, gdy zmieni się readyState.
Właściwość statusi statusTextwłaściwości przechowują status obiektu XMLHttpRequest.
| Property | Description |
|---|---|
| onreadystatechange | Defines a function to be called when the readyState property changes |
| readyState | Holds the status of the XMLHttpRequest. 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready |
| status | 200: "OK" 403: "Forbidden" 404: "Page not found" For a complete list go to the Http Messages Reference |
| statusText | Returns the status-text (e.g. "OK" or "Not Found") |
Funkcja onreadystatechangejest wywoływana za każdym razem, gdy zmienia się stan readyState.
Gdy readyStatewynosi 4, a status to 200, 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 onreadystatechangejest wyzwalane czterokrotnie (1-4), jeden raz na każdą zmianę stanu gotowości.