Opis obiektu Response. Szalone formularze Bezwartościowe odpowiedzi html

Tłumaczenie: Wład Merzhevich

Każdy zna formularze internetowe, prawda? Wstawiamy tag, może kilka, uzupełniamy całość przyciskiem i gotowe.

Nie znasz połowy. HTML5 definiuje kilkanaście nowych typów pól, których możesz używać w swoich formularzach. A kiedy mówię „użyj”, mam na myśli, że można ich użyć od razu – bez żadnych sztuczek, hacków i obejść. Nie martw się zbytnio, nie twierdzę, że wszystkie te ekscytujące nowe funkcje są obsługiwane w każdej przeglądarce. Absolutnie nie, nie mam na myśli wszystkich. Tak, w nowoczesnych przeglądarkach Twoje formularze pokażą wszystko, do czego są zdolne. Jednak w starszych przeglądarkach formularze będą nadal działać, choć nie w pełni wykorzystają swój potencjał. Oznacza to, że funkcje te ulegają stopniowej degradacji w każdej przeglądarce. Nawet w IE6.

Szybki tekst Szybka obsługa tekstu

TJ.	Firefoksa	Safari	Chrom	Opera	iPhone'a	Android
-	4.0+	4.0+	4.0+	11.0+	4.0+	-

Pierwszym ulepszeniem HTML5 dotyczącym formularzy jest możliwość ustawienia tekstu podpowiedzi w polu wejściowym. Ten tekst jest wyświetlany w polu wejściowym, jeśli pole jest puste i nie jest aktywne. Gdy tylko klikniesz pole wprowadzania (lub przejdziesz do niego za pomocą klawisza Tab), tekst podpowiedzi zniknie.

Prawdopodobnie widziałeś już tekst zachęty. Na przykład przeglądarka Mozilla Firefox umieszcza na pasku adresu sugestywny tekst o treści „Wyszukaj zakładki i historię”.

Po kliknięciu paska adresu tekst podpowiedzi zniknie.

Oto, jak możesz umieścić sugestywny tekst w swoich formularzach.

Przeglądarki, które nie obsługują atrybutu zastępczego, po prostu go ignorują. Żadnej szkody ani naruszenia.

Zapytaj profesora Markupa

☞ P. Czy mogę użyć znaczników HTML dla atrybutu zastępczego? Chcę wstawić zdjęcie lub może zmienić kolory.

A. Atrybut zastępczy może zawierać tylko tekst, bez kodu HTML. Istnieją jednak specjalne rozszerzenia CSS, które pozwalają ustawić styl tekstu w niektórych przeglądarkach.

Pola autofokusa Obsługa autofokusa

TJ.	Firefoksa	Safari	Chrom	Opera	iPhone'a	Android
-	-	4.0+	3.0+	10.0+	-	-

Strony internetowe mogą używać JavaScriptu do automatycznego skupiania uwagi na pierwszym polu formularza. Na przykład na stronie głównej Google.com Pole do wpisania wyszukiwanych słów kluczowych posiada funkcję autofokusa. Chociaż jest to wygodne dla większości ludzi, może być denerwujące dla zaawansowanych użytkowników i osób o specjalnych potrzebach. Jeśli podczas oczekiwania na przewinięcie strony naciśniesz spację, przewijanie nie nastąpi, ponieważ fokus znajduje się na polu wejściowym formularza (zamiast przewijania zostanie wpisana spacja w polu). Jeśli podczas ładowania strony przeniesiesz fokus na inne pole wejściowe, skrypt autofokusa witryny może „pomocnie” przenieść fokus z powrotem na oryginalne pole wejściowe, przerywając pisanie i powodując wpisywanie w niewłaściwym miejscu.

Ponieważ autofokus działa poprzez JavaScript, obsługa tych ekstremalnych przypadków może być trudna, a opcje dla osób, które nie chcą, aby strona internetowa „kradła” ich ostrość, mogą być trudne.

Aby rozwiązać te problemy, HTML5 wprowadza atrybut autofokusa dla wszystkich elementów formularzy. Atrybut autofocus robi dokładnie to, na co wygląda: po załadowaniu strony przenosi fokus na określone pole. Ponieważ jednak jest to tylko znacznik, a nie skrypt, zachowanie będzie spójne we wszystkich witrynach. Ponadto producenci przeglądarek (lub autorzy rozszerzeń) mogą oferować użytkownikom możliwość wyłączenia autofokusa.

Oto jak ustawić automatyczne ustawianie ostrości w polu formularza.

Przeglądarki, które nie obsługują atrybutu autofokusa, zignorują go.

Co się stało? Załóżmy, że chcesz, aby autofokus działał wszędzie, a nie tylko w wymyślnych przeglądarkach HTML5? Możesz pozostawić bieżący skrypt z autofokusem, po prostu dokonaj dwóch małych zmian:

dodać atrybut autofokusa do kodu HTML;
Sprawdź, czy przeglądarka obsługuje atrybut autofokusa, a jeśli nie, uruchom własny skrypt.

Autofokus z alternatywą

if (!("autofokus" w document.createElement("input")) ) (
dokument.getElementById("q").focus();
}

Ustaw ostrość wcześniej

Wiele stron internetowych czeka na uruchomienie window.onload i ustawienie fokusu. Jednak zdarzenie window.onload nie zostanie uruchomione, dopóki wszystkie obrazy nie zostaną załadowane. Jeśli Twoja strona zawiera dużo obrazów, takie naiwne skrypty potencjalnie zmienią treść, gdy użytkownik zacznie wchodzić w interakcję z inną częścią Twojej strony. Właśnie dlatego zaawansowani użytkownicy nienawidzą skryptów autofokusa.

Na przykład w poprzedniej sekcji skrypt autofokusa został umieszczony bezpośrednio po polu formularza, do którego się odnosił. Jest to optymalne rozwiązanie, ale może urazić Twoją wrażliwość poprzez umieszczenie bloku kodu JavaScript na środku strony (lub, co bardziej prozaiczne, Twój system może nie być tak elastyczny). Jeśli nie możesz wstawić skryptu na środku strony, powinieneś ustawić fokus za pomocą niestandardowego zdarzenia, takiego jak $(document).ready() w jQuery zamiast window.onload .

Autofokus za pomocą jQuery

$(dokument).gotowy(funkcja() (

$("#q").focus();
}
});

Zdarzenie niestandardowe jQuery jest uruchamiane, gdy tylko DOM stanie się dostępny — to znaczy czeka na załadowanie tekstu strony, ale nie czeka na załadowanie wszystkich obrazów. Nie jest to optymalne podejście – jeśli strona jest wyjątkowo duża lub połączenie sieciowe jest wolne, użytkownik może nadal wchodzić w interakcję ze stroną przed wykonaniem skryptu fokusowego. Ale to wciąż dużo lepsze rozwiązanie niż czekanie, aż nastąpi zdarzenie window.onload.

Jeśli się zgadzasz i chcesz wstawić do kodu swojej strony skrypt składający się z jednej instrukcji, jest to kompromis mniej nieprzyjemny niż pierwsza opcja i lepszy niż druga. Możesz użyć niestandardowych zdarzeń jQuery, aby ustawić własne zdarzenia, powiedzmy autofocus_ready. Następnie możesz uruchomić to zdarzenie ręcznie, gdy tylko pole autofokusa stanie się dostępne. Dziękuję E.M. Shtenbergowi za nauczenie mnie tej techniki.

Autofokus z alternatywnym zdarzeniem niestandardowym

$(dokument).bind("autofokus_gotowy", funkcja() (
if (!("autofokus" w document.createElement("input"))) (
$("#q").focus();
}
});

$(dokument).trigger("autofocus_ready");

Rozwiązanie to jest optymalne, podobnie jak podejście pierwsze. Fokus zostanie ustawiony na polu formularza tak szybko, jak to będzie technicznie możliwe, podczas gdy tekst strony będzie nadal się ładował. Część logiki aplikacji (fokus w polu formularza) została przeniesiona z treści strony do sekcji. Ten przykład jest oparty na jQuery, ale koncepcja zdarzeń niestandardowych nie jest unikalna dla jQuery. Inne biblioteki JavaScript, takie jak YUI i Dojo, oferują podobne możliwości.

Podsumujmy.

Ważne jest prawidłowe ustawienie ostrości.
Jeśli to możliwe, poproś przeglądarkę o użycie atrybutu autofokusa na polu, na którym chcesz ustawić ostrość.
Jeśli używasz alternatywnego kodu dla starszych przeglądarek, zdefiniuj obsługę atrybutu autofocus tak, aby skrypt działał tylko w starszych przeglądarkach.
Ustaw ostrość tak wcześnie, jak to możliwe. Wstaw skrypt fokusowy do kodu bezpośrednio po polu formularza. Jeśli Ci to nie przeszkadza, osadź bibliotekę JavaScript obsługującą zdarzenia niestandardowe i wywołaj zdarzenie w kodzie bezpośrednio po polu formularza. Jeśli nie jest to możliwe, użyj zdarzenia takiego jak $(document).ready() z jQuery.
W żadnym wypadku nie należy czekać, aż window.onload uzyska fokus.

Adresy e-mail

Przez ponad dekadę formularze zawierały tylko kilka typów pól. Najczęstsze są następujące.

Wszystkie te typy pól nadal działają w HTML5. Jeśli „przejdziesz na HTML5” (być może zmieniając !DOCTYPE ), nie będziesz musiał wprowadzać ani jednej zmiany w swoich formularzach. Brawo za kompatybilność wsteczną!

Jednak HTML5 definiuje 13 nowych typów pól i nie ma powodu, aby nie zacząć z nich korzystać.

Pierwszy z tych nowych typów adresów e-mail. Wygląda mniej więcej tak.

Chciałem napisać zdanie, które zaczynałoby się „w przeglądarkach, które nie obsługują type="email" …”, ale zatrzymało się. Dlaczego? Ponieważ nie jestem pewien, czy przeglądarki nie obsługują type="email" . Wszystkie przeglądarki „obsługują” type="email" . Być może nie robią nic specjalnego, ale przeglądarki, które nie rozpoznają type="email", potraktują go jako type="text" i renderują jako normalne pole tekstowe.

Podkreślę, jak ważne jest to. W Internecie są miliony formularzy proszących o podanie adresu e-mail i wszystkie korzystają z rozszerzenia . Zobaczysz pole tekstowe, wpisz w nim swój adres e-mail i gotowe. A potem pojawia się HTML5, który definiuje type="email" . Czy przeglądarki wariują? NIE. Każda przeglądarka na Ziemi traktuje nieznany atrybut type jako type="text" - nawet IE6. Możesz więc już teraz „odświeżyć” swoje formularze za pomocą type="email".

Co się stanie, jeśli powiemy, że przeglądarka obsługuje type="email"? Cóż, to może oznaczać wszystko. Specyfikacja HTML5 nie wymaga żadnego specjalnego interfejsu użytkownika dla nowych typów pól. Opera dodaje małą ikonę do pola formularza. Inne przeglądarki HTML5, takie jak Safari i Chrome, renderują jako pole tekstowe — takie samo jak type="text" — więc użytkownicy nie zauważą różnicy (dopóki nie spojrzą na kod źródłowy).

A potem jest iPhone.

iPhone nie ma fizycznej klawiatury. Całe „pisanie” odbywa się poprzez kliknięcie w klawiaturę ekranową, która pojawia się w odpowiednim momencie, np. po przejściu do pola formularza na stronie internetowej. Apple zrobił coś sprytnego z przeglądarką iPhone'a. Rozpoznaje niektóre nowe pola HTML5 i dynamicznie zmienia klawiaturę ekranową, aby zoptymalizować wprowadzanie.

Na przykład adres e-mail to tekst, prawda? Oczywiście, ale jest to szczególny rodzaj tekstu. Dlatego prawie wszystkie adresy e-mail zawierają symbol @ i co najmniej jedną kropkę (.), ale jest mało prawdopodobne, aby zawierały spację. Kiedy więc użyjesz iPhone'a i przejdziesz do , pojawi się klawiatura ekranowa zawierająca mniejszą spację oraz dedykowane klawisze do symboli. I @.

Podsumuję to. Natychmiastowa konwersja wszystkich pól e-mail na type="email" nie ma żadnych wad. Prawie nikt tego nie zauważy, z wyjątkiem użytkowników iPhone'a, którzy prawdopodobnie też tego nie zauważą. Ale ci, którzy to zauważą, uśmiechną się cicho i podziękują za ułatwienie im pracy.

Adresy internetowe

Adres internetowy – który maniacy standardów nazywają adresami URL, z wyjątkiem kilku pedantów nazywających URI – to inny typ specjalistycznego tekstu. Składnia adresu internetowego jest ograniczona do odpowiedniego standardu internetowego. Jeśli ktoś poprosi Cię o podanie adresu internetowego w formularzu, oczekuje czegoś w rodzaju „http://www.google.com/”, a nie „125 Farwood Road”. Ukośniki są powszechne – nawet strona główna Google ma ich trzy. Kropki są również powszechne, ale spacje są zabronione. Każdy adres internetowy ma sufiks domeny, taki jak „.com” lub „.org”.

I tak... (proszę werble)... . Na iPhonie wygląda to tak.

iPhone przeprojektował swoją wirtualną klawiaturę, tak jak to miało miejsce w przypadku poczty e-mail, ale teraz optymalizuje ją pod kątem wpisywania adresu internetowego. Spacja została całkowicie zastąpiona trzema wirtualnymi klawiszami: ukośnikiem, kropką i „.com” (możesz przytrzymać klawisz „.com”, aby wybrać inny przyrostek, np. „.org” lub „.net”).

Przeglądarki, które nie obsługują HTML5, traktują type="url" jako type="text" , więc nie ma wad używania tego typu we wszystkich polach, w których należy wprowadzić adres internetowy.

Liczby jako liczniki

Następny krok: liczby. Prośba o numer jest bardziej złożona niż prośba o adres e-mail lub adres internetowy. Po pierwsze, liczby są bardziej złożone, niż myślisz. Szybko wybierz numer. -1? Nie, miałem na myśli liczbę od 1 do 10,7 ½? Nie, nie, nie bądź ułamkiem, głupcze. π? Właśnie wybrałeś liczbę niewymierną.

Chciałbym zauważyć, że rzadko pyta się Cię o „tylko liczbę”. Bardziej prawdopodobne jest, że poproszą o liczbę z określonego zakresu. Możesz chcieć tylko określonych typów liczb w tym zakresie – może liczb całkowitych, ale nie ułamków zwykłych lub dziesiętnych lub czegoś bardziej egzotycznego, na przykład wielokrotności 10. HTML5 obejmuje to wszystko.

Wybierz liczbę, prawie dowolną

Przyjrzyjmy się jednemu atrybutowi na raz.

type="number" oznacza, że jest to pole numeryczne.
min="0" określa minimalną dozwoloną wartość dla tego pola.
max="10" to maksymalna dozwolona wartość.
step="2" w połączeniu z wartością minimalną określa prawidłowe liczby z zakresu: 0, 2, 4 itd., aż do wartości maksymalnej.
wartość="6" wartość domyślna. Powinien wyglądać znajomo, jest to ten sam atrybut, który jest zawsze używany do definiowania wartości pól formularza. Wspominam o tym tutaj jako punkt wyjścia, że HTML5 opiera się na poprzednich wersjach HTML. Nie musisz uczyć się na nowo, aby robić to, co już zrobiłeś.

To jest kod pola numerycznego. Należy pamiętać, że wszystkie te atrybuty są opcjonalne. Jeśli masz minimum, ale nie maksimum, możesz określić atrybut min, ale nie atrybut max. Domyślna wartość kroku to 1 i można pominąć atrybut step, dopóki nie będzie potrzebna inna wartość kroku. Jeśli nie ma wartości domyślnej, atrybut wartości może być pustym ciągiem znaków lub nawet zostać całkowicie pominięty.

Ale HTML5 na tym się nie kończy. Za tę samą niską cenę wolności otrzymujesz te przydatne techniki JavaScript.

input.stepUp(n) zwiększa wartość pola o n.
input.stepDown(n) zmniejsza wartość pola o n.
input.valueAsNumber zwraca bieżącą wartość jako liczbę zmiennoprzecinkową (właściwość input.value jest zawsze ciągiem znaków).

Problemy z wyświetlaniem? Cóż, właściwy interfejs do zarządzania liczbami jest zaimplementowany inaczej w przeglądarkach. Na iPhonie, gdzie pisanie jest trudne, przeglądarka ponownie optymalizuje wirtualną klawiaturę pod kątem wprowadzania cyfr.

W komputerowej wersji Opery pole type="number" pojawia się jako licznik z małymi strzałkami w górę i w dół, które można kliknąć, aby zmienić wartości.

Opera szanuje atrybuty min, max i step, więc zawsze uzyskasz akceptowalną wartość liczbową. Jeśli zwiększysz wartość do maksimum, strzałka w górę na liczniku zmieni kolor na szary.

Podobnie jak w przypadku wszystkich innych pól wejściowych, które opisałem w tym rozdziale, przeglądarki nie obsługujące type="number" traktują je jako type="text" . W polu zostanie wyświetlona wartość domyślna (ponieważ jest przechowywana w atrybucie value), natomiast inne atrybuty takie jak min i max zostaną zignorowane. Możesz je wdrożyć samodzielnie lub użyć frameworka JavaScript, który już implementuje zarządzanie licznikami. Najpierw sprawdź tutaj.

if (! .inputtypes.number) (
// brak natywnej obsługi pola typ=liczba
// możesz wypróbować Dojo lub inny framework JavaScript
}

Liczby jako suwak

Licznik nie jest jedynym sposobem reprezentowania wprowadzanych liczb. Prawdopodobnie widziałeś także suwak wyglądający tak.

Teraz możesz mieć także slider na formularzu. Kod wygląda dziwnie podobnie do pola licznika.

Wszystkie dostępne atrybuty są takie same jak dla type="number" - min, max, step, value - i oznaczają to samo. Jedyną różnicą jest interfejs użytkownika. Zamiast pola wejściowego oczekuje się, że przeglądarki będą wyświetlać type="range" jako suwak. W chwili pisania tego tekstu działają z tym najnowsze wersje Safari, Chrome i Opera. Niestety iPhone wyświetla się jako proste pole tekstowe i nie optymalizuje nawet klawiatury ekranowej pod kątem wprowadzania cyfr. Wszystkie inne przeglądarki po prostu traktują to pole jako type="text" , więc nie ma powodu, aby od razu zaczynać używać tego typu.

HTML 4 nie umożliwia wyboru daty za pomocą kalendarza. Frameworki JavaScript pozwalają to obejść (Dojo, jQuery UI, YUI, Closure Library), ale oczywiście każde z tych rozwiązań wymaga „implementacji” frameworka dla dowolnego wbudowanego kalendarza.

HTML5 wreszcie definiuje sposób włączania natywnych selektorów dat bez użycia skryptów. W rzeczywistości jest ich sześć: data, miesiąc, tydzień, godzina, data + godzina i data + godzina ze strefą czasową.

Jak na razie wsparcie jest... znikome.

Obsługa wyboru daty Wpisz Opera Inne przeglądarki

typ="data"	9.0+	-
type="miesiąc"	9.0+	-
type="tydzień"	9.0+	-
typ="czas"	9.0+	-
typ="datagodzina"	9.0+	-
type="datetime-local"	9.0+	-

Oto jak wyświetla się Opera:

Jeśli potrzebujesz czasu wraz z datą, Opera obsługuje również:

Jeśli potrzebujesz miesiąca plus rok (na przykład data ważności karty kredytowej), Opera może wyświetlić:

Mniej powszechne, ale dostępne jest wybranie tygodnia roku za pomocą:

Ostatnią, ale nie najmniej ważną kwestią jest czas:

Selektor dat z alternatywą

...

var i = document.createElement("input");
i.setAttribute("typ", "data");
if (i.type == "tekst") (
// Brak natywnej obsługi selektora dat :(
// Użyj Dojo/jQueryUI/YUI/Closure, aby go utworzyć,
// następnie dynamicznie zastąp element
}

Jest prawdopodobne, że inne przeglądarki w końcu będą obsługiwać te typy. Podobnie jak type="email" i inne typy, te pola formularzy będą wyświetlane jako zwykły tekst w przeglądarkach, które nie rozpoznają type="date" i jego odmian. Jeśli chcesz, możesz po prostu użyć , uszczęśliwić użytkowników Opery i poczekać, aż inne przeglądarki nadrobią zaległości. Użycie tego jest bardziej realistyczne, ale sprawdź, czy przeglądarka ma natywną obsługę selektora dat i dołącz alternatywne rozwiązanie w postaci wybranego skryptu (Dojo, jQuery UI, YUI, Closure Library lub inne opcje).

Okno wyszukiwania

Więc szukaj. Nie tylko wyszukiwania w Google czy Yahoo (cóż, te też). Pomyśl o dowolnym polu wyszukiwania, na dowolnej stronie, w dowolnej witrynie. Amazon ma pole wyszukiwania, Yandex ma pole wyszukiwania, większość blogów też. Jak się je robi? , tak jak każde inne pole tekstowe w Internecie. Naprawmy to.

Szukaj nowego pokolenia

W niektórych przeglądarkach nie zauważysz żadnej różnicy w stosunku do zwykłego pola tekstowego. Jeśli jednak używasz przeglądarki Safari w systemie Mac OS X, będzie ona wyglądać tak.

Czy znalazłeś różnicę? Pole wejściowe ma zaokrąglone rogi! Wiem, wiem, nie możesz powstrzymać swoich uczuć. Ale czekaj, jest więcej! Kiedy zaczniesz wpisywać type="search" w polu, Safari wstawi mały przycisk "x" po prawej stronie okna. Kliknięcie na „x” czyści zawartość pola. Google Chrome, który ma pod maską tę samą technologię, zachowuje się w ten sam sposób. Obie te małe sztuczki wyglądają i zachowują się podobnie do wyszukiwania natywnego w iTunes i innych aplikacjach klienckich Mac OS X.

Apple.com korzysta z wyszukiwania w witrynie, aby nadać witrynie klimat „kochający ary”. Ale nie ma tu nic specyficznego dla komputerów Mac. To tylko kod, więc każda przeglądarka na każdej platformie może wybrać sposób renderowania zgodnie z konwencjami platformy. Podobnie jak w przypadku wszystkich innych nowych typów, przeglądarki, które nie rozpoznają type="search" traktują go jako type="text" , więc nie ma absolutnie żadnego powodu, aby nie zacząć już dziś używać type="search" do wszystkich pól wyszukiwania.

Mówi profesor Markup

Domyślnie Safari nie stosuje większości stylów. Jeśli chcesz zmusić Safari do traktowania pola wyszukiwania jak zwykłego pola tekstowego (abyś mógł zastosować własne style), dodaj tę regułę do swojego arkusza stylów.

wejście(
-wygląd-webkit: pole tekstowe;
}

Dziękuję Johnowi Lane’owi za nauczenie mnie tej sztuczki.

Wybór koloru

HTML5 definiuje również pole, które pozwala wybrać kolor i zwraca go w postaci szesnastkowej. Żadna przeglądarka nie obsługuje selektorów kolorów, a szkoda, bo zawsze lubiłem palety Mac OS. Może pewnego dnia.

Notatka tłumacz Opera 11 obsługuje tę funkcję.

Walidacja formularza

W tym rozdziale mówiłem o nowych elementach formularzy i nowych funkcjach, takich jak autofokus, ale nie wspomniałem o prawdopodobnie najbardziej ekscytującej części formularzy HTML5: automatycznej weryfikacji wprowadzonych danych. Przyjrzyjmy się częstym problemom z wprowadzaniem adresu e-mail w formularzu. Prawdopodobnie masz weryfikację po stronie klienta za pomocą JavaScript, a następnie sprawdzanie poprawności po stronie serwera za pomocą PHP, Pythona lub innego języka po stronie serwera. HTML5 nigdy nie zastąpi sprawdzania poprawności po stronie serwera, ale pewnego dnia może zastąpić weryfikację po stronie klienta.

Istnieją dwa duże problemy z walidacją adresu e-mail w JavaScript:

Niewielka liczba Twoich gości (prawdopodobnie około 10%) nie ma włączonej obsługi JavaScript.

Otrzymasz błędny adres.

Poważnie, pomylisz adres. Ustalenie, że zestaw losowych znaków jest prawidłowym adresem e-mail, jest niezwykle trudne. Im mocniej patrzysz, tym staje się to trudniejsze. Czy wspominałem, że jest to bardzo, bardzo trudne? Czy nie jest łatwiej zawiesić ten ból głowy w przeglądarce?

Opera sprawdza type="e-mail"

Oto zrzut ekranu z Opery 11, chociaż ta funkcjonalność jest dostępna od Opery 9. Kod polega na ustawieniu wartości e-mail dla atrybutu type. Kiedy użytkownik Opery próbuje przesłać formularz za pomocą , przeglądarka automatycznie sprawdza adres e-mail, nawet jeśli skrypty są wyłączone.

HTML5 oferuje także weryfikację adresów internetowych za pomocą pól i liczb za pomocą rozszerzenia . Walidacja liczb uwzględnia wartości atrybutów min i max, dlatego przeglądarki nie pozwolą na przesłanie formularza, jeśli wpiszesz zbyt dużą liczbę.

Nie ma kodu umożliwiającego sprawdzanie poprawności formularzy w HTML5, jest to robione domyślnie. Aby wyłączyć sprawdzanie poprawności, użyj atrybutu novalidate.

Nie testuj mnie

Przeglądarki powoli włączają obsługę sprawdzania poprawności formularzy w HTML5. Firefox 4 będzie miał pełne wsparcie. Niestety Safari i Chrome są zaimplementowane tylko częściowo: sprawdzają elementy formularzy, ale nie wyświetlają żadnych widocznych komunikatów, gdy pole formularza nie przejdzie pomyślnie weryfikacji. Innymi słowy, jeśli wpiszesz nieprawidłową (lub błędnie) datę w type="date" , Safari i Chrome nie prześlą formularza, ale nie poinformują Cię, dlaczego tak się nie stało. Ustawią fokus na polu zawierającym nieprawidłową wartość, ale nie wyświetli komunikatu o błędzie, jak Opera lub Firefox 4.

Wymagane pola Wsparcie

TJ.	Firefoksa	Safari	Chrom	Opera	iPhone'a	Android
-	4.0+	-	-	9.0+	-	-

Walidacja formularza w HTML5 nie ogranicza się do typu każdego pola. Możesz także określić, że niektóre pola są wymagane, pola te muszą mieć wartość, zanim będzie można wysłać formularz.

Kod wymaganych pól jest tak prosty, jak to tylko możliwe.

Przeglądarki mogą zmienić oryginalny wygląd wymaganego pola. Oto przykład tego, jak to wygląda w przeglądarce Mozilla Firefox 4.0.

Dodatkowo, jeśli spróbujesz wysłać formularz bez wypełnienia wymaganej wartości, Firefox wyświetli pasek informacyjny z informacją, że pole jest wymagane i nie może być puste.

Po odebraniu i zinterpretowaniu komunikatu żądania serwer odpowiada komunikatem odpowiedzi HTTP:

Linia statusu
Zero lub więcej pól nagłówka (General|Response|Entity), po których następuje CRLF
Pusta linia (tj. linia bez niczego poprzedzająca CRLF) wskazująca koniec pól nagłówka
Opcjonalnie treść wiadomości

W poniższych sekcjach wyjaśniono jednostki używane w komunikacie odpowiedzi HTTP.

Linia stanu składa się z wersji protokołu, po której następuje numeryczny kod stanu i powiązana z nim fraza tekstowa. Elementy oddzielane są znakami spacji SP.

Linia stanu = Wersja HTTP SP Kod stanu SP Powód – zdanie CRLF Wersja HTTP

Serwer obsługujący protokół HTTP w wersji 1.1 zwróci następujące informacje o wersji:

Wersja HTTP = HTTP/1.1

Kod statusu

Element Status-Code to 3-cyfrowa liczba całkowita, gdzie pierwsza cyfra Status-Code określa klasę odpowiedzi, a dwie ostatnie cyfry nie pełnią żadnej roli kategorycznej. Pierwsza cyfra ma 5 wartości:

S.N. Kod i opis

1	1xx: Informacyjne Oznacza to, że żądanie zostało przyjęte i proces jest kontynuowany.
2	2xx: Sukces Oznacza to, że działanie zostało pomyślnie odebrane, zrozumiane i zaakceptowane.
3	3xx: Przekierowanie Oznacza to, że należy podjąć dalsze działania, aby zrealizować żądanie.
4	4xx: Błąd klienta Oznacza to, że żądanie zawiera niepoprawną składnię lub nie może zostać zrealizowane.
5	5xx: Błąd serwera Oznacza to, że serwer nie spełnił pozornie prawidłowego żądania.

Kody stanu HTTP są rozszerzalne i aplikacje HTTP nie są wymagane do zrozumienia znaczenia wszystkich zarejestrowanych kodów stanu. Lista wszystkich kodów statusu została podana w oddzielnym rozdziale w celach informacyjnych.

Pola nagłówka odpowiedzi

Nagłówki ogólne i nagłówki jednostek omówimy w osobnym rozdziale, w którym będziemy poznawać pola nagłówka HTTP. Na razie sprawdźmy czym są pola nagłówka odpowiedzi.

Pola nagłówka odpowiedzi pozwalają serwerowi przekazać dodatkowe informacje o odpowiedzi, których nie można umieścić w Lini Statusu. Te pola nagłówka dostarczają informacji o serwerze i dalszym dostępie do zasobu identyfikowanego przez URI żądania.

Uwierzytelnianie proxy
Uwierzytelnianie WWW

Możesz wprowadzić własne pola, jeśli zamierzasz napisać własnego klienta i serwer WWW.

Przykłady wiadomości odpowiedzi

Teraz zbierzmy to wszystko w jedną całość, tworząc odpowiedź HTTP na żądanie pobrania strony hello.htm z serwera WWW działającego w witrynie

HTTP/1.1 200 OK Data: pon., 27 lipca 2009 r. 12:28:53 GMT Serwer: Apache/2.2.14 (Win32) Ostatnia modyfikacja: środa, 22 lipca 2009 r. 19:15:56 GMT Długość zawartości: 88 Zawartość- Typ: tekst/html Połączenie: Zamknięte Witaj, świecie!

Poniższy przykład pokazuje komunikat odpowiedzi HTTP wyświetlający błąd, gdy serwer WWW nie mógł znaleźć żądanej strony:

HTTP/1.1 404 Nie znaleziono Data: niedziela, 18 października 2012 10:36:20 GMT Serwer: Apache/2.2.14 (Win32) Długość zawartości: 230 Połączenie: Zamknięte Typ zawartości: tekst/html; charset=iso-8859-1 404 Nie znaleziono Nie znaleziono

Żądany adres URL /t.html nie został znaleziony na tym serwerze.

Poniżej znajduje się przykład komunikatu odpowiedzi HTTP pokazującego stan błędu, gdy serwer WWW napotkał niewłaściwą wersję HTTP w danym żądaniu HTTP:

HTTP/1.1 400 Błędne żądanie Data: niedziela, 18 października 2012 10:36:20 GMT Serwer: Apache/2.2.14 (Win32) Długość zawartości: 230 Typ zawartości: tekst/html; charset=iso-8859-1 Połączenie: Zamknięte 400 Złe żądanie Złe żądanie

Twoja przeglądarka wysłała żądanie, którego ten serwer nie mógł zrozumieć.

Wiersz żądania zawierał nieprawidłowe znaki następujące po ciągu protokołu.

W tym artykule podsumowano działania, jakie organizacja lub projekt może podjąć, aby zarządzać ryzykiem. Ryzyko można zdefiniować jako niepewność wyniku, zarówno pozytywnego (szansa), jak i negatywnego (zagrożenie). Zarządzanie ryzykiem ma kluczowe znaczenie dla powodzenia projektu, a zadaniem zarządzania ryzykiem jest zarządzanie ekspozycją projektu na ryzyko ().

Reakcja(y) na dane ryzyko powinna odzwierciedlać rodzaj ryzyka, ocenę ryzyka (prawdopodobieństwo, wpływ, krytyczność) oraz podejście organizacji do ryzyka. Istnieje wiele możliwych reakcji na ryzyko, a ponieważ ryzyko może być zagrożeniem lub szansą, obejmują one reakcje odpowiednie dla potencjalnych możliwości. Odpowiedzi podsumowano w poniższej tabeli.

Tabela reakcji na ryzyko

Ryzykowna odpowiedź	Opis/przykład	Nadaje się do…. rodzaje ryzyka (są to sugestie i nie są wyczerpujące)
Zagrożenia
Unikać	Ryzyka można uniknąć, zmieniając projekt w taki sposób, aby ominąć ryzyko.	Niektóre ryzyka polityczne, np. nieprzychylna opinia publiczna Niektóre ryzyka techniczne/operacyjne/infrastrukturalne, np. problemy z konserwacją. Ryzyka prawne i regulacyjne m.in. kontrole regulacyjne, wymogi licencyjne.
Przenosić		Niektóre ryzyka strategiczne/handlowe, np. kradzieży, przed niewypłacalnością można się ubezpieczyć. Więcej przykładów można znaleźć w sekcji Ryzyka biznesowe.
Zmniejszyć	Podejmowane są działania mające na celu zmniejszenie prawdopodobieństwa wystąpienia ryzyka lub jego skutków.	Najczęściej stosowana reakcja na ryzyko. Szerokie zastosowanie – techniczne/operacyjne/infrastruktura np. zaniedbanie, brak wydajności, „pełzanie” zakresu, niejasne oczekiwania. Czynniki organizacyjne/zarządcze/ludzkie, np.: konflikty osobowości, słabe przywództwo i zły dobór personelu.
		Konieczne może być zaakceptowanie niektórych ryzyk politycznych, prawnych i regulacyjnych oraz ekonomiczno-finansowych poprzez wdrożenie np. wojny i zamieszki, wahania kursu walutowego.
Przypadkowość	W tym przypadku ustalany jest plan reakcji w przypadku zrealizowania się ryzyka.	Ekonomiczne/finansowe/rynkowe Polityczny Prawne i regulacyjne Prawdopodobnie w przypadku każdego ryzyka można i należy wdrożyć plan awaryjny.
Możliwości
Udział	Możliwość jest dzielona z partnerem lub dostawcą w celu maksymalizacji korzyści poprzez wykorzystanie wspólnych zasobów/technologii itp.	Infrastruktura techniczna/operacyjna/infrastruktura m.in. nowa technologia, ulepszone projekty.
Wykorzystać	Projekt można dostosować, aby wykorzystać zmianę technologii lub nowy rynek.	Ekonomiczne/finansowe/rynkowe np. nowe i rynki wschodzące, pozytywne zmiany kursów walut lub stóp procentowych.
Zwiększyć	Podejmowane są działania mające na celu zwiększenie prawdopodobieństwa wystąpienia szansy lub pozytywnego wpływu, jaki może ona mieć.	Możliwości strategiczne/komercyjne, takie jak nowe partnerstwa, nowe inwestycje kapitałowe, nowi promotorzy.
Odrzucić	Tutaj nie podejmuje się żadnych działań, a szansa na zysk z okazji zostaje odrzucona. mogą zostać wprowadzone, jeżeli nadarzy się taka okazja.	Polityczne lub środowiskowe, np. nowe połączenia transportowe, zmiana rządu przynosząca pozytywne zmiany w polityce/możliwości lobbowania itp.

Plany awaryjne powinny określać działania, które zostaną podjęte w przypadku wystąpienia ryzyka. Działania warunkowe będą często powiązane z kosztami i w uzasadnieniu biznesowym należy zarezerwować budżet na ich pokrycie. 50 najważniejszych ryzyk biznesowych i jak nimi zarządzać! 20 Typowe ryzyka projektowe – przykład Rejestru ryzyka Lista kontrolna 30 ryzyk budowlanych Reakcje na ryzyko – odniesienia Biuro ds. handlu rządowego (2002), Zarządzanie udanymi projektami za pomocą PRINCE2, Londyn: TSO.

The Projects Group PLC, 2006, Przegląd zarządzania ryzykiem, Sutton: The Projects Group plc.

Ataki polegające na wstrzykiwaniu skryptów między witrynami

W przypadku ataku typu cross-site scripting (XSS) osoba atakująca wstrzykuje złośliwy kod na legalną stronę internetową, która następnie uruchamia złośliwy skrypt po stronie klienta. Kiedy użytkownik odwiedza zainfekowaną stronę, skrypt jest pobierany do przeglądarki użytkownika i tam wykonywany. Ten schemat ma wiele odmian. Złośliwy skrypt może uzyskać dostęp do plików cookie przeglądarki, tokenów sesji lub innych poufnych informacji przechowywanych w przeglądarce. Jednakże wszystkie ataki działają według schematu pokazanego na rysunku 1.

Rysunek 1. Rysunek 1. Typowy atak XSS

Luki XSS

W typowym ataku XSS osoba atakująca znajduje sposób na wstrzyknięcie ciągu znaków na stronę internetową serwera. Załóżmy, że osoba atakująca umieściła na stronie internetowej następujący wiersz: alert("jesteś atakowany"). Za każdym razem, gdy użytkownik odwiedza tę stronę, jego przeglądarka pobiera ten skrypt i uruchamia go wraz z pozostałą zawartością strony. W takim przypadku w wyniku uruchomienia skryptu użytkownikowi wyświetli się wyskakujące okienko z tekstem „jesteś atakowany”.

Konsekwencje XSS

Jeśli atakującemu uda się wykorzystać lukę XSS w aplikacji internetowej, może wstawić na stronę skrypt zapewniający dostęp do informacji o koncie użytkownika. W takim przypadku osoba atakująca może wykonać wiele złośliwych działań, na przykład:

ukraść konto;
rozprzestrzeniać wirusy;
uzyskać dostęp do historii przeglądania i zawartości schowka;
zyskać możliwość zdalnego sterowania przeglądarką;
skanuj i korzystaj z zasobów sprzętu i oprogramowania oraz aplikacji w sieci wewnętrznej.

Zapobieganie atakom XSS

Aby zapobiec atakom XSS, aplikacja musi szyfrować dane wyjściowe strony przed dostarczeniem ich użytkownikowi końcowemu. Kiedy dane wyjściowe są szyfrowane, znaczniki HTML są zastępowane alternatywnymi reprezentacjami − obiekty. Przeglądarka wyświetla te obiekty, ale ich nie uruchamia. Na przykład przekonwertowany na .

Tabela 1 pokazuje nazwy obiektów dla niektórych popularnych znaków HTML.

Tabela 1. Nazwy obiektów dla znaków HTML Wynik Opis Nazwa obiektu Numer obiektu

	Nierozrywająca przestrzeń
<	Mniej niż	<
>	Więcej niż	>	>
&	Ampersand	&	&
¢	Cent	¢	¢
£	Funt	£	£
¥	Jena	¥	¥
Euro	€	€
§	Ustęp	§	§
©	Prawo autorskie		©
®		®	®
™	Znak towarowy	™	™

Gdy przeglądarka napotka obiekty, są one konwertowane z powrotem do formatu HTML i drukowane, ale nie są uruchamiane. Na przykład, jeśli atakujący wstawi ciąg znaków alert („jesteś atakowany”) w polu zmiennej na stronie WWW serwera, to przy zastosowaniu opisanej strategii serwer zwróci ciąg znaków alert („jesteś atakowany”) .

Gdy przeglądarka pobierze zaszyfrowany skrypt, przekonwertuje go na alert („jesteś atakowany”) i wyświetli skrypt jako część strony internetowej, ale go nie uruchomi.

Dodawanie kodu HTML do aplikacji Java po stronie serwera

Aby zapobiec renderowaniu złośliwego kodu skryptu wraz ze stroną, aplikacja musi szyfrować wszystkie zmienne łańcuchowe przed wyświetleniem ich na stronie. Szyfrowanie polega po prostu na konwersji każdego znaku na odpowiednią nazwę obiektu HTML, jak pokazano w kodzie Java pokazanym na Listingu 1.

Listing 1. Konwersja znaków na nazwy obiektów HTML klasa publiczna EscapeUtils ( public static final HashMap m = new HashMap(); static ( m.put(34, """); //< - меньше чем m.put(60, ""); // >- większe niż //Użytkownik musi dopasować wszystkie obiekty HTML do odpowiednich wartości dziesiętnych. //Mapowania obiektów na wartości dziesiętne pokazano w poniższej tabeli) public static String escapeHtml() ( String str = "alert(\"abc\")"; try ( StringWriterwriter = new StringWriter((int) (str .length() * 1.5)); escape(writer, str); System.out.println("zakodowany ciąg znaków to " +writer.toString()); return write.toString(); ) catch (IOException ioe) ( ioe .printStackTrace() ; return null; ) ) public static void escape(Pisający zapis, String str) zgłasza wyjątek IOException ( int len = str.length(); for (int i = 0; i< len; i++) { char c = str.charAt(i); int ascii = (int) c; String entityName = (String) m.get(ascii); if (entityName == null) { if (c >0x7F) ( pisarz.write(""); pisarz.write(Integer.toString(c, 10)); pisarz.write(";"); ) else ( pisarz.write(c); ) ) else ( pisarz. write(nazwa jednostki); ) ) ) )

Kod Java z Listingu 1 koduje ciąg HTML String String "alert(\"abc\)" . Skorzystaj z poniższej procedury:

W rezultacie na wyjściu pojawi się następujący wiersz: alert("abc") .

Tabela 2 przedstawia mapowanie obiektów HTML na ich wartości dziesiętne.

Tabela 2. Wartości dziesiętne obiektu HTML Wartość dziesiętna Opis obiektu

160		Nierozrywająca przestrzeń
60	<	Mniej niż
62	>	Więcej niż
38	&	Ampersand
162	¢	Cent
163	£	Funt
165	¥	Jena
8364	€	Euro
167	§	Ustęp
169		Prawo autorskie
174	®	Zarejestrowany znak towarowy
8482	™	Znak towarowy

Wniosek

Wstrzykiwanie skryptów między witrynami to jedna z najpopularniejszych metod ataku na komputer użytkownika. Można jednak znacznie ograniczyć zdolność osoby atakującej do zainfekowania aplikacji internetowej złośliwym kodem. Budując aplikację, pamiętaj o zaszyfrowaniu wszystkich wartości wyjściowych strony przed wysłaniem ich do przeglądarki użytkownika końcowego.

Generowanie odpowiedzi ze sterowników

Gdy kontroler zakończy przetwarzanie żądania, zwykle musi wygenerować odpowiedź. Kiedy tworzymy kontroler niskiego poziomu poprzez bezpośrednią implementację interfejsu IController, musimy wziąć odpowiedzialność za każdy aspekt przetwarzania żądania, łącznie z generowaniem odpowiedzi dla klienta.

Na przykład, aby wysłać odpowiedź w formacie HTML, należy utworzyć i skomponować dane HTML, a następnie wysłać je do klienta za pomocą metody Response.Write(). Podobnie, aby przekierować przeglądarkę użytkownika na inny adres URL, należy wywołać metodę Response.Redirect() i przekazać jej wymagany adres URL. Obydwa podejścia zademonstrowano w poniższym kodzie, który przedstawia rozszerzenia klasy BasicController, którą utworzyliśmy we wcześniejszym artykule, implementując interfejs IController:

Korzystanie z System.Web.Mvc; przy użyciu System.Web.Routing; przestrzeń nazw ControllersAndActions.Controllers ( klasa publiczna BasicController: IController ( public void Execute(RequestContext requestContext) ( string kontroler = (string)requestContext.RouteData.Values["kontroler"]; string action = (string)requestContext.RouteData.Values["akcja "]; if (action.ToLower() == "przekierowanie") ( requestContext.HttpContext.Response.Redirect("/Derived/Index"); ) else ( requestContext.HttpContext.Response.Write(string.Format("Kontroler : (0), Metoda akcji: (1)", kontroler, akcja)); ) ) ) )

To samo podejście można zastosować w przypadku dziedziczenia kontrolera z klasy Controller. Klasa HttpResponseBase, która jest zwracana po odczytaniu właściwości requestContext.HttpContext.Response w metodzie Execute(), jest dostępna poprzez właściwość Controller.Response, jak pokazano w poniższym przykładzie, która stanowi rozszerzenie klasy DerivedController, również utworzonej wcześniej przez dziedziczenie z klasy Controller:

Korzystanie z systemu; przy użyciu System.Web; przy użyciu System.Web.Mvc; przestrzeń nazw ControllersAndActions.Controllers ( klasa publiczna DerivedController: Controller ( public ActionResult Index() ( // ... ) public void ProduceOutput() ( if (Server.MachineName == "ProfessorWeb") Response.Redirect("/Basic/Index" ); else Response.Write("Kontroler: pochodny, metoda akcji: ProduceOutput"); ) ) )

Metoda ProduceOutput() wykorzystuje wartość właściwości Server.MachineName, aby zdecydować, jaką odpowiedź wysłać do klienta. („ProfessorWeb” to nazwa mojej maszyny programistycznej.)

Choć takie podejście do generowania odpowiedzi dla użytkownika działa, wiąże się z nim kilka problemów:

Klasy kontrolerów muszą zawierać informacje o strukturze HTML lub URL, co sprawia, że klasy są trudne do odczytania i utrzymania.

Kontroler generujący odpowiedź bezpośrednio na dane wyjściowe jest trudny do przetestowania jednostkowego. Będziesz musiał utworzyć próbne implementacje obiektu Response, a następnie móc przetworzyć dane wyjściowe kontrolera, aby określić, co to jest. Może to oznaczać na przykład konieczność analizowania znaczników HTML pod kątem słów kluczowych, co jest długim i żmudnym procesem.

Przetwarzanie w ten sposób drobnych szczegółów każdej odpowiedzi jest złożone i podatne na błędy. Niektórzy programiści lubią całkowitą kontrolę zapewnianą przez budowanie kontrolera niskiego poziomu, ale zwykle bardzo szybko się to komplikuje.

Na szczęście Framework MVC posiada przydatne narzędzie, które rozwiązuje wszystkie te problemy – wyniki działań. W poniższych sekcjach wyjaśniono koncepcję wyników działań i pokazano różne sposoby jej wykorzystania do generowania odpowiedzi od kontrolerów.

Wyniki działań

Wyniki akcji w MVC Framework służą do oddzielenia deklaracji intencji od realizacji intencji (przepraszam za tautologię). Koncepcja będzie wydawać się prosta, gdy już ją zrozumiesz, ale jej zrozumienie zajmuje trochę czasu ze względu na pewną pośredniość.

Zamiast bezpośrednio zajmować się obiektem Response, metody akcji zwracają obiekt klasy wywodzący się z ActionResult, który opisuje, jaka powinna być odpowiedź z kontrolera — na przykład renderowanie widoku lub przekierowanie do innego adresu URL lub metody akcji. Jednak (jest to bardzo pośredniość) odpowiedź nie jest generowana bezpośrednio. Zamiast tego tworzony jest obiekt ActionResult, który środowisko MVC Framework przetwarza w celu wygenerowania wyniku po wywołaniu metody akcji.

System wyników działań jest przykładem wzorca projektowego Dowództwa. Ten wzorzec reprezentuje scenariusze, w których przechowujesz i przekazujesz obiekty opisujące wykonywane operacje.

Kiedy struktura MVC otrzymuje obiekt ActionResult z metody akcji, wywołuje Metoda ExecuteResult()., zdefiniowany w klasie tego obiektu. Implementacja wyników akcji następnie działa na obiekcie Response, generując dane wyjściowe zgodne z Twoimi intencjami. Aby zademonstrować to w działaniu, utwórzmy folder Infrastructure i dodajmy do niego nowy plik klasy o nazwie CustomRedirectResult.cs z niestandardową implementacją ActionResult pokazaną w poniższym przykładzie:

Korzystanie z System.Web.Mvc; przestrzeń nazw ControllersAndActions.Infrastructure ( klasa publiczna CustomRedirectResult: ActionResult ( publiczny string Url ( get; set; ) publiczne nadpisanie void ExecuteResult(kontekst ControllerContext) ( string fullUrl = UrlHelper.GenerateContentUrl(Url, kontekst.HttpContext); kontekst.HttpContext.Response.Redirect (pełnyUrl); ) ) )

Ta klasa opiera się na sposobie działania klasy System.Web.Mvc.RedirectResult. Jedną z zalet open source MVC Framework jest możliwość zbadania wewnętrznego działania czegokolwiek. Klasa CustomRedirectResult jest znacznie prostsza niż jej odpowiednik w MVC, ale jest wystarczająca na potrzeby tego artykułu.

Tworząc instancję klasy RedirectResult, przekazujemy adres URL, na który użytkownik powinien zostać przekierowany. Metoda ExecuteResult(), która zostanie wykonana przez platformę MVC po zakończeniu metody akcji, odbiera obiekt Response dla żądania za pośrednictwem obiektu ControllerContext dostarczonego przez platformę i wywołuje metodę RedirectPermanent() lub metodę Redirect() (jest to dokładnie to, co zostało zrobione w niskopoziomowej implementacji IController w przykładzie wcześniej w artykule).

Zastosowanie klasy CustomRedirectResult ilustruje poniższy przykład, który przedstawia zmiany, jakie zostały wprowadzone w kontrolerze Derived:

// ... przy użyciu ControllersAndActions.Infrastructure; przestrzeń nazw ControllersAndActions.Controllers ( klasa publiczna DerivedController: Controller ( public ActionResult Index() ( // ... ) public ActionResult ProduceOutput() ( if (Server.MachineName == "MyMachineName") zwróć nowy CustomRedirectResult ( Url = "/Basic/ Index" ); else ( Response.Write("Kontroler: Pochodny, Metoda akcji: ProduceOutput"); return null; ) ) ) )

Zauważ, że byliśmy zmuszeni zmienić wynik metody akcji, aby zwrócił ActionResult. Zwracamy wartość null, jeśli nie chcemy, aby struktura MVC Framework wykonywała jakiekolwiek czynności po wykonaniu naszej metody akcji, co zrobiliśmy w przypadku, gdy instancja CustomRedirectResult nie została zwrócona.

Kontrolery i akcje testów jednostkowych

Wiele części frameworka MVC zaprojektowano tak, aby ułatwić testowanie jednostkowe, szczególnie dotyczy to akcji i kontrolerów. Powodów takiego wsparcia jest kilka:

Możesz testować akcje i kontrolery poza serwerem WWW. Dostęp do obiektów kontekstowych można uzyskać poprzez ich klasy bazowe (takie jak HttpRequestBase), co można łatwo wyśmiewać.

Aby przetestować wyniki metody akcji, nie musisz analizować znaczników HTML. Aby upewnić się, że otrzymujesz oczekiwane wyniki, możesz sprawdzić zwrócony obiekt ActionResult.

Emulacja żądań klientów nie jest potrzebna. System powiązań modeli platformy MVC umożliwia pisanie metod akcji, które otrzymują dane wejściowe w swoich parametrach. Aby przetestować metodę akcji, wystarczy ją bezpośrednio wywołać i podać odpowiednie wartości parametrów.

Przyszłe artykuły na temat generowania danych z kontrolerów pokażą, jak tworzyć testy jednostkowe dla różnych typów wyników akcji.

Nie zapominaj, że testy jednostkowe to tylko część obrazu. Złożone zachowanie aplikacji ma miejsce, gdy metody akcji są wywoływane sekwencyjnie. Testowanie jednostkowe działa najlepiej w połączeniu z innymi podejściami do testowania.

Teraz, gdy już wiesz, jak działa specjalny wynik akcji przekierowania, możesz przejść na jego odpowiednik oferowany przez framework MVC, który jest potężniejszy i został dokładnie przetestowany przez Microsoft. Wymagane zmiany w kontrolerze pochodnym podano poniżej:

// ... public ActionResult ProduceOutput() (zwróć nowy RedirectResult("/Basic/Index"); ) // ...

Z metody akcji usunięto instrukcję warunkową, co oznacza, że po uruchomieniu aplikacji i przejściu pod adres URL taki jak /Derived/ProduceOutput, przeglądarka zostanie przekierowana pod adres URL taki jak /Basic/Index. Aby uprościć kod metody akcji, klasa Controller zawiera wygodne metody generowania różnego rodzaju obiektów ActionResult. Czyli np. ten sam efekt co w powyższym przykładzie możemy osiągnąć zwracając wynik metody Redirect():

// ... public ActionResult ProduceOutput() ( return Redirect("/Basic/Index"); ) // ...

Nie ma nic szczególnie skomplikowanego w systemie wyników akcji, ale ostatecznie pomaga on w tworzeniu prostszego, czystszego i bardziej spójnego kodu, który jest łatwy do odczytania i przetestowania jednostkowego. Na przykład w przypadku przekierowania możesz po prostu sprawdzić, czy metoda akcji zwraca instancję RedirectResult, której właściwość Url zawiera oczekiwany cel.

Framework MVC definiuje wiele wbudowanych typów wyników akcji, które opisano w poniższej tabeli:

Wbudowane typy ActionResult Typ Opis Metody pomocnicze klasy Controller

Pokaż rezultat	Renderuje określony lub standardowy szablon widoku	Pogląd()
Wynik częściowego widoku	Renderuje określony lub standardowy szablon widoku częściowego	Częściowy widok()
RedirectToRouteResult	Wysyła przekierowanie HTTP 301 lub 302 do metody akcji lub określonego wpisu trasy, generując adres URL zgodnie z konfiguracją routingu	PrzekierujDoAkcji() PrzekierujDoAkcjiStałe() Przekieruj na trasę() Przekieruj na trasę na stałe()
Wynik przekierowania	Wysyła przekierowanie HTTP 301 lub 302 na podany adres URL	Przeadresować() PrzekierowanieStałe()
Wynik treści	Zwraca do przeglądarki niesformatowane dane tekstowe, dodatkowo ustawiając nagłówek typu treści	Treść()
Wynik pliku	Przesyła dane binarne (takie jak plik na dysku lub tablica bajtów w pamięci) bezpośrednio do przeglądarki	Plik()
Wynik Jsona	Serializuje obiekt .NET do formatu JSON i wysyła go jako odpowiedź. Odpowiedzi tego typu częściej generowane są przy wykorzystaniu narzędzi Web API i AJAX	Json()
Wynik JavaScript	Wysyła fragment kodu źródłowego JavaScript do wykonania przez przeglądarkę	JavaScript()
HttpNieautoryzowany wynik	Ustawia kod stanu odpowiedzi HTTP na 401 (co oznacza „nieautoryzowany”), co powoduje, że zastosowany mechanizm uwierzytelniania (uwierzytelnianie formularzy lub uwierzytelnianie systemu Windows) monituje odwiedzającego o zalogowanie się	NIE
Wynik HttpNotFound	Zwraca kod błędu HTTP 404 — Nie znaleziono	HttpNie znaleziono()
Wynik kodu stanu Http	Zwraca określony kod HTTP	NIE
Pusty wynik	Nic nie robić	NIE

Wszystkie te typy wywodzą się z klasy ActionResult, a wiele z nich ma wygodne metody pomocnicze w klasie Controller. Wykorzystanie tego typu wyników zademonstrujemy w kolejnych artykułach.