W dzisiejszym odcinku tłumaczeń z Mozilla Hacks notka Paula Rogeta, jednego z głównych europejskich „ewangelizatorów” Mozilli, poświęcona interfejsowi FormData. Jak większość treści z MozHacks, zarówno oryginalny artykuł, jak i poniższe tłumaczenie dostępne są na warunkach licencji Creative Commons Attribution 3.0 USA.
Interfejs FormData wkrótce w Firefoksie
Implementacja tego interfejsu pojawiła się w Mozilla Central (trunku) i dostępna jest aktualnie tylko w conocnych kompilacjach Firefoksa.
Specyfikacja XMLHttpRequest Level 2 (obecnie w wersji roboczej) dodaje nowy interfejs – FormData. Obiekty FormData umożliwiają tworzenie par klucz-wartość, reprezentujących pola formularzy i ich wartości, które można następnie łatwo przesłać w formacie “multipart/form-data” wykorzystując metodę send() obiektu XMLHttpRequest.
Dlaczego FormData?
W celu przesłania złożonych danych ze strony WWW do serwera (pliki, treści inne niż ASCII) konieczne jest stosowanie typu zawartości multipart/form-data. Zazwyczaj aby utworzyć formularz z takim typem, stosuje się kod jak poniżej:
<form method="post" enctype="multipart/form-data" action="http://foo.bar/upload.php"> <input type="file" name="media"/> <input name="nickname"/> <input name="website"/> <input type="submit" value="upload"/> </form>
W ten sposób zwykle przesyła się pliki.
Firefox 3.6 umożliwił manipulację plikami z poziomu JavaScriptu (zob. File API [w jęz. angielskim - przyp. tłum.]), ale nie było dotąd prostego sposobu na przesłanie plików przez XMLHttpRequest. Odtworzenie funkcjonalności powyższego formularza z poziomu JavaScriptu było trudne, bo wymagało zakodowania treści do postaci multipart/form-data przez kod skryptu (np. ten kod, napisany przeze mnie [przez Paula Rogeta - przyp. tłum.] jakiś czas temu, implementuje kodowanie multipart/form-data: jest powolny i niezbyt elegancki).
Tutaj właśnie przydaje się FormData: do odtworzenia funkcjonalności przesyłania formularzy z poziomu JavaScriptu.
Obiekt FormData
Obiekt FormData pozwala ułożyć zbiór par klucz-wartość do przesłania przez XMLHttpRequest. Obiekt ten posiada tylko jedną metodę:
append(key, value);
Argument key to nazwa klucza dla przesłanej wartości, a wartość ta – value – może być ciągiem znaków lub plikiem.
Można utworzyć obiekt FormData, dołączyć do niego wartości i przesłać go z wykorzystaniem XMLHttpRequest. Aby zasymulować powyższy formularz, wystarczy:
// aFile może być plikiem z inputa z atrybutem type="file" // albo plikiem przeciągniętym metodą drag&drop var formdata = new FormData(); formdata.append("nickname", "Foooobar"); formdata.append("website", "http://hacks.mozilla.org"); formdata.append("media", aFile); var xhr = new XMLHttpRequest(); xhr.open("POST", "http://foo.bar/upload.php"); xhr.send(formdata);
FormData i element <form>
Firefox (czy raczej silnik Gecko – przyp. tłum.) nieco rozszerza element <form> języka HTML o metodę getFormData(), która pozwala na pobranie danych formularza w postaci obiektu FormData. Nie jest to obecnie część standardu HTML, ale spodziewamy się, że pojawi się w niej w przyszłości (możliwe, że pod inną nazwą):
var formElement = document.getElementById("myFormElement"); var xhr = new XMLHttpRequest(); xhr.open("POST", "submitform.php"); xhr.send(formElement.getFormData());
Można także dodać dane do obiektu FormData pomiędzy pobraniem go z formularza a przesłaniem, jak poniżej:
var formElement = document.getElementById("myFormElement"); formData = formElement.getFormData(); formData.append("serialnumber", serialNumber++); xhr.send(formData);
Pozwala to na modyfikację danych formularze przed przesłaniem, na przykład rozszerzając je o dodatkowe informacje, które nie są przeznaczone do edycji przez użytkownika w formularzu.
