Żądania synchroniczne i asynchroniczne
W niektórych przypadkach musisz odczytać wiele plików zewnętrznych. Jest to standardowa funkcja, która używa obiektu XMLHttpRequest
asynchronicznie w celu przełączenia zawartości odczytywanego pliku do określonego listenera.
function xhrSuccess() { this.callback.apply(this, this.arguments);}function xhrError() { console.error(this.statusText);}function loadFile(url, callback /*, opt_arg1, opt_arg2, ... */) { var xhr = new XMLHttpRequest(); xhr.callback = callback; xhr.arguments = Array.prototype.slice.call(arguments, 2); xhr.onload = xhrSuccess; xhr.onerror = xhrError; xhr.open("GET", url, true); xhr.send(null);}
Użycie:
function showMessage(message) { console.log(message + this.responseText);}loadFile("message.txt", showMessage, "New message!\n\n");
Opis funkcji użytkowej loadFile deklaruje (i) docelowy adres URL do odczytania (poprzez żądanie HTTP GET), (ii) funkcję do wykonania po pomyślnym zakończeniu operacji XHR, oraz (iii) dowolną listę dodatkowych argumentów, które są przekazywane przez obiekt XHR (poprzez właściwość arguments
) do funkcji wywołania zwrotnego sukcesu.
Linia 1 deklaruje funkcję wywoływaną, gdy operacja XHR zakończy się sukcesem. Ona z kolei wywołuje funkcję wywołania zwrotnego określoną w wywołaniu funkcji loadFile
(w tym przypadku funkcji showMessage
), która została przypisana do właściwości obiektu XHR (linia 11). Dodatkowe argumenty (jeśli istnieją) dostarczone do wywołania funkcji loadFile są „stosowane” do uruchomienia funkcji callback.
Linia 5 deklaruje funkcję wywoływaną, gdy operacja XHR nie zakończy się powodzeniem.
Linia 11 przechowuje success callback podany jako drugi argument funkcji loadFile
we właściwości callback
obiektu XHR.
Linia 12 kroi tablicę argumentów podaną do wywołania funkcji loadFile
. Począwszy od trzeciego argumentu, wszystkie pozostałe argumenty są zbierane, przypisywane do właściwości arguments zmiennej xhr
, przekazywane do funkcji wywołania zwrotnego sukcesu xhrSuccess
. i ostatecznie dostarczane do funkcji wywołania zwrotnego (w tym przypadku showMessage
), która jest wywoływana przez funkcję xhrSuccess
.
Linia 15 określa true dla swojego trzeciego parametru, aby wskazać, że żądanie powinno być obsługiwane asynchronicznie.
Linia 16 faktycznie inicjuje żądanie.
.