70-480 – Serializacja, deserializacja i przesyłanie danych

70-480

Dane binarne; dane tekstowe (JSON, XML); wdrażanie metody serializacji kwerendy jQuery; metoda Form.Submit; analiza danych; wysyłanie danych przy użyciu obiektu XMLHTTPRequest; oczyszczanie danych wejściowych przy użyciu kodowania identyfikatora URI/formularza.



Przed nami ostatnia już część podrozdziału o Uzyskiwaniu dostępu i zabezpieczaniu danych. O JSON, XML oraz XMLHTTPRequest pisałem już w zasadzie w poprzednim wpisie. Została metoda serialize z biblioteki jQuery, Form.Submit, dane binarne oraz kodowanie URL. Do dzieła więc!

jQuery.serialize

Funkcja ta pozwala w swej prostocie użycia na odczytanie wartości z formularza i zbudowanie z nich tak zwanego query string, który doklejany jest do adresu URL po znaku ?. Funkcję serialize wywołujemy dla całego formularza, a zobaczymy to najlepiej na przykładzie:

W wyniku wypełnienia formularza danymi w postaci:

  • First name: M
  • Last name: R
  • Email: mr@gmail.com

Otrzymamy query string w postaci: firstName=M&lastName=R&email=mr%40gmail.com. Nazwy poszczególnych kontrolek służą tutaj jako nazwy parametrów przesyłanych w URL.

Ważne jest to, że tylko kontrolki spełniające reguły walidacji zostaną poddane transformacji. Ponadto każda z kontrolek posiadać musi swoją unikalną nazwę nadaną poprzez atrybut name. Elementy takie jak radiocheckbox zostaną poddane transformacji jedynie, gdy zostaną wybrane.

Form.Submit

Wysłanie formularza za pomocą kodu JavaScript? Jest to niebywale prosta sprawa, bo ogranicza się do wywołania metody submit na obiekcie formularza, w celu wysłania formularza. Tyle! Spójrzmy na prosty przykład:

// html
<form id="sendProgrammatically" action="#"></form>
// javascript
var form = document.getElementById('sendProgrammatically');
form.submit();

Dane binarne

W przeszłości operowanie na danych binarnych musiało być to symulowane przez traktowanie surowych danych jako string i używanie metody charCodeAt(), aby przeczytać bajty z buforu danych. W momencie, gdy aplikacje internetowe stają się coraz bardziej potężne przydałoby się by pomagałby nam w tym kod JavaScript. W ten sposób powstały tablice, które zawierać mogą różne typy danych JavaScript. Mowa tutaj głównie o ArrayBuffer.

ArrayBuffer oraz tak zwane widoki posiadają wiele implementacji i najlepiej będzie odesłać Was do specyfikacji na stronach Mozilla: Tablice reprezentujące typy JavaScript

Załóżmy, że chcemy stworzyć bufor, który przyjmie 16 bajtów, a następnie wykorzystamy typ integer w obrębie stworzonego bufora i na koniec wypełnimy go danymi. Cały przykład wygląda następująco:

var buffer = new ArrayBuffer(16);
var int32View = new Int32Array(buffer);
for (var i = 0; i < int32View.length; i++) {
  int32View[i] = i * 2;
}

Ile wartości posiada bufor? Dokładnie 4, bo typ integer zajmuje 4 bajty. W tym wypadku będą to wartości: 0, 2, 4 oraz 6.

Poszczególne bufory mogą zawierać różne rodzaje formatów danych. W obrębie jednego bufora możemy stworzyć wiele widoków dla różnych typów JavaScript. Przykład ze strony Mozilla:

var buffer = new ArrayBuffer(24);

// ... read the data into the buffer ...

var idView = new Uint32Array(buffer, 0, 1);
var usernameView = new Uint8Array(buffer, 4, 16);
var amountDueView = new Float32Array(buffer, 20, 1);

Kodowanie URL

Ostatni temat na dzisiaj to kodowanie URL, a de facto łańcuchów znakowych. Posłużę się tutaj funkcjami:  encodeURI()encodeURIComponent()decodeURI()decodeURIComponent(). Funkcje te posłużą nam do zakodowania lub dekodowania części naszego URL lub jego całości. Szczególnie przydaje się to wtedy, gdy musimy przesłać dalej URL zawierający znaki specjalne, czy tak zwane polskie ogonki.

Funkcja encodeURI() pozwala na kodowanie wszystkich znaków specjalnych poza: , / ? : @ & = + $ #:

var uri = 'http://mrzepinski.pl?name=żółć';
encodeURI(uri); // "http://mrzepinski.pl?name=%C5%BC%C3%B3%C5%82%C4%87"

Funkcja decodeURI() ma dokładnie odwrotne zadanie do funkcji encodeURI():

var encodedUri = 'http://mrzepinski.pl?name=%C5%BC%C3%B3%C5%82%C4%87';
decodeURI(encodedUri); // "http://mrzepinski.pl?name=żółć"

Jeżeli jednak chcemy zakodować wszystkie znaki, wliczając w to pełny adres URL, to użyć musimy funkcji encodeURIComponent() (funkcja decodeURIComponent() ma dokładnie odwrotne działanie):

var uri = 'http://mrzepinski.pl?name=żółć';
var encodedUri = encodeURIComponent(uri); // "http%3A%2F%2Fmrzepinski.pl%3Fname%3D%C5%BC%C3%B3%C5%82%C4%87"
decodeURIComponent(encodedUri); // "http://mrzepinski.pl?name=żółć"