Popis objektu Response. Bláznivé tvary Silné odezvy html
Po přijetí a interpretaci zprávy požadavku server odpoví zprávou HTTP odpovědi:
- Stavový řádek
- Nula nebo více polí záhlaví (General|Response|Entity) následovaných CRLF
- Prázdný řádek (tj. řádek, který před CRLF nic nepředchází) označující konec polí záhlaví
- Volitelně tělo zprávy
Každá z následujících částí vysvětluje entity použité ve zprávě odpovědi HTTP.
Stavový řádek zprávyStavový řádek se skládá z verze protokolu, za kterou následuje číselný stavový kód a související textová fráze. Prvky jsou odděleny mezerou SP znaky.
Server podporující HTTP verze 1.1 vrátí následující informace o verzi:
HTTP verze = HTTP/1.1
Stavový kódElement Status-Code je 3místné celé číslo, kde první číslice Status-Code definuje třídu odpovědi a poslední dvě číslice nemají žádnou kategorizační roli. Pro první číslici je 5 hodnot:
| 1 | Kód a popis 1xx: Informační |
| 2 | Znamená to, že požadavek byl přijat a proces pokračuje. 2xx: Úspěch |
| 3 | Znamená to, že akce byla úspěšně přijata, pochopena a přijata. 3xx: Přesměrování |
| 4 | Znamená to, že pro dokončení požadavku je třeba podniknout další kroky. 4xx: Chyba klienta |
| 5 | Znamená to, že požadavek obsahuje nesprávnou syntaxi nebo jej nelze splnit. 5xx: Chyba serveru |
Znamená to, že serveru se nepodařilo splnit zjevně platný požadavek.
Stavové kódy HTTP jsou rozšiřitelné a aplikace HTTP nemusí chápat význam všech registrovaných stavových kódů. Seznam všech stavových kódů je uveden v samostatné kapitole pro vaši informaci.Pole záhlaví odpovědi
General-header a Entity-header budeme studovat v samostatné kapitole, kdy se naučíme pole HTTP hlavičky. Nyní se podívejme, jaká jsou pole hlavičky odpovědi.
-
Pole hlavičky odpovědi umožňují serveru předat další informace o odpovědi, které nelze umístit na stavový řádek. Tato pole záhlaví poskytují informace o serveru ao dalším přístupu ke zdroji identifikovanému pomocí Request-URI.
-
Proxy-Authenticate
WWW-ověření
Svá vlastní pole můžete zavést v případě, že se chystáte napsat vlastního vlastního webového klienta a serveru.Nyní to dáme dohromady a vytvoříme odpověď HTTP na požadavek na načtení stránky hello.htm z webového serveru běžícího na místě
HTTP/1.1 200 OK Datum: Po, 27. července 2009 12:28:53 GMT Server: Apache/2.2.14 (Win32) Poslední změna: St, 22 Jul 2009 19:15:56 GMT Obsah-Délka: 88 Obsah- Typ: text/html Připojení: Uzavřeno Hello, World!
Následující příklad ukazuje zprávu s odpovědí HTTP zobrazující chybový stav, když webový server nemohl najít požadovanou stránku:
HTTP/1.1 404 Nenalezeno Datum: Ne, 18. října 2012 10:36:20 GMT Server: Apache/2.2.14 (Win32) Content-Length: 230 Connection: Closed Content-Type: text/html; charset=iso-8859-1 404 Nenalezeno Nenalezeno
Požadovaná adresa URL /t.html nebyla na tomto serveru nalezena.
Níže je uveden příklad zprávy s odpovědí HTTP zobrazující chybový stav, když webový server narazil na nesprávnou verzi HTTP v daném požadavku HTTP:
HTTP/1.1 400 Bad Request Date: Ne, 18. října 2012 10:36:20 GMT Server: Apache/2.2.14 (Win32) Content-Length: 230 Content-Type: text/html; charset=iso-8859-1 Připojení: Uzavřeno 400 Špatný požadavek Špatný požadavek
Váš prohlížeč odeslal požadavek, kterému tento server nerozuměl.
Řádek požadavku obsahoval neplatné znaky za řetězcem protokolu.
Generování odpovědi z ovladačů
Poté, co kontrolér dokončí zpracování požadavku, obvykle potřebuje vygenerovat odpověď. Když vytváříme nízkoúrovňový kontrolér přímou implementací rozhraní IController, musíme převzít odpovědnost za každý aspekt zpracování požadavků, včetně generování odpovědi klientovi.
Chcete-li například odeslat odpověď HTML, museli byste vytvořit a sestavit data HTML a poté je odeslat klientovi pomocí metody Response.Write(). Podobně, chcete-li přesměrovat prohlížeč uživatele na jinou adresu URL, budete muset zavolat metodu Response.Redirect() a předat jí požadovanou adresu URL. Oba přístupy jsou demonstrovány v kódu níže, který ukazuje rozšíření třídy BasicController, kterou jsme vytvořili v dřívějším článku implementací rozhraní IController:
Použití System.Web.Mvc; pomocí System.Web.Routing; jmenný prostor ControllersAndActions.Controllers ( veřejná třída BasicController: IController ( public void Execute(RequestContext requestContext) ( string controller = (string)requestContext.RouteData.Values["controller"]; string action = (string)requestContext.RouteData.Values["action "]; if (action.ToLower() == "přesměrování") ( requestContext.HttpContext.Response.Redirect("/Derived/Index"); ) else ( requestContext.HttpContext.Response.Write(string.Format("Controller) : (0), Metoda akce: (1)", ovladač, akce)); ) ) ) )
Stejný přístup lze použít v případě dědění ovladače ze třídy Controller. Třída HttpResponseBase, která je vrácena při čtení vlastnosti requestContext.HttpContext.Response v metodě Execute(), je přístupná prostřednictvím vlastnosti Controller.Response, jak ukazuje příklad níže, která rozšiřuje třídu DerivedController, vytvořenou dříve dědění z třídy Controller:
Použití systému; pomocí System.Web; pomocí System.Web.Mvc; jmenný prostor ControllersAndActions.Controllers ( veřejná třída DerivedController: Controller ( public ActionResult Index() ( // ... ) public void ProduceOutput() ( if (Server.MachineName == "ProfesorWeb") Response.Redirect("/Basic/Index" );
Metoda ProduceOutput() používá hodnotu vlastnosti Server.MachineName k rozhodnutí, jakou odpověď odeslat klientovi. ("ProfessorWeb" je název mého vývojového stroje.)
Ačkoli tento přístup generování odpovědi uživateli funguje, je s ním několik problémů:
Třídy řadiče musí obsahovat informace o struktuře HTML nebo URL, což ztěžuje čtení a údržbu tříd.
Kontrolér, který generuje odezvu přímo na výstup, se obtížně testuje. Budete muset vytvořit simulované implementace objektu Response a poté být schopni zpracovat výstup z řadiče, abyste určili, co to je. To může znamenat například nutnost analyzovat HTML značky pro klíčová slova, což je dlouhý a únavný proces.
Zpracování jemných detailů každé odpovědi tímto způsobem je složité a náchylné k chybám. Některým programátorům vyhovuje absolutní kontrola poskytovaná sestavením nízkoúrovňového řadiče, ale to se obvykle velmi rychle zkomplikuje.
Naštěstí má MVC Framework šikovný nástroj, který všechny tyto problémy řeší – výsledky akcí. Následující části vysvětlují koncept výsledků akcí a ukazují různé způsoby, jak je použít ke generování odpovědí z ovladačů.
Výsledky akcíVýsledky akcí v rámci MVC se používají k oddělení prohlášení o záměru od provedení záměru (omlouvám se za tautologii). Koncept se vám bude zdát jednoduchý, jakmile ho pochopíte, ale jeho pochopení kvůli určité nepřímosti nějakou dobu trvá.
Namísto toho, aby se metody akce zabývaly přímo objektem Response, vrací objekt třídy odvozený od ActionResult, který popisuje, jaká by měla být odezva z řadiče – například vykreslení pohledu nebo přesměrování na jinou adresu URL nebo metodu akce. Nicméně (to je právě ta nepřímost) odpověď není přímo generována. Místo toho se vytvoří objekt ActionResult, který MVC Framework zpracuje, aby vytvořil výsledek po zavolání metody akce.
Systém výsledků akcí je příkladem návrhového vzoru Command. Tento vzor představuje scénáře, ve kterých ukládáte a předáváte objekty, které popisují prováděné operace.
Když MVC Framework obdrží objekt ActionResult z metody akce, zavolá Metoda ExecuteResult()., definované ve třídě tohoto objektu. Implementace výsledků akce pak funguje na objektu Response a generuje výstup, který odpovídá vašemu záměru. Abychom to demonstrovali v akci, vytvořte složku Infrastructure a přidejte do ní nový soubor třídy nazvaný CustomRedirectResult.cs s vlastní implementací ActionResult ukázanou v příkladu níže:
pomocí System.Web.Mvc; jmenný prostor ControllersAndActions.Infrastructure ( veřejná třída CustomRedirectResult: ActionResult ( veřejný řetězec Url ( get; set; ) veřejné přepsání void ExecuteResult(ControllerContext context) ( string fullUrl = UrlHelper.GenerateContentUrl(Url, context.HttpContext.Respontse.Context); context.HttpContext (fullUrl);
Tato třída je založena na způsobu práce třídy System.Web.Mvc.RedirectResult. Jednou z výhod open source MVC Framework je možnost prozkoumat vnitřní fungování čehokoli. Třída CustomRedirectResult je mnohem jednodušší než její ekvivalent MVC, ale pro účely tohoto článku je dostatečná.
Při vytváření instance třídy RedirectResult předáme URL, na kterou má být uživatel přesměrován. Metoda ExecuteResult(), kterou MVC Framework spustí po dokončení metody akce, přijme objekt Response pro požadavek prostřednictvím objektu ControllerContext poskytnutého rámcem a zavolá buď metodu RedirectPermanent() nebo metodu Redirect() (toto je přesně to, co bylo provedeno uvnitř nízkoúrovňové implementace IController v příkladu výše v článku).
Použití třídy CustomRedirectResult je ilustrováno v příkladu níže, který ukazuje změny provedené v řadiči Derived:
// ... using ControllersAndActions.Infrastructure; jmenný prostor ControllersAndActions.Controllers ( public class DerivedController: Controller ( public ActionResult Index() ( // ... ) public ActionResult ProduceOutput() ( if (Server.MachineName == "MyMachineName") vrátí nový CustomRedirectResult ( Url = "/Basic/ Index" ); else ( Response.Write("Řadič: Odvozeno, metoda akce: ProduceOutput"); return null; ) ) ) )
Všimněte si, že jsme byli nuceni změnit výsledek metody akce tak, aby vrátila ActionResult. Vrátíme hodnotu null, pokud nechceme, aby MVC Framework něco provedl, když je naše metoda akce provedena, což jsme udělali, pokud nebyla vrácena instance CustomRedirectResult.
Testování jednotek řadiče a akce
Mnoho částí MVC Framework je navrženo tak, aby usnadnilo testování jednotek, a to platí zejména pro akce a ovladače. Tato podpora má několik důvodů:
Akce a ovladače můžete testovat mimo webový server. Kontextové objekty jsou přístupné prostřednictvím jejich základních tříd (jako je HttpRequestBase), což lze snadno zesměšnit.
Chcete-li otestovat výsledky metody akce, nemusíte analyzovat označení HTML. Chcete-li zajistit, že získáváte očekávané výsledky, můžete zkontrolovat vrácený objekt ActionResult.
Emulace klientských požadavků není potřeba. Systém vazby modelu MVC Framework vám umožňuje psát metody akcí, které dostávají vstup ve svých parametrech. Chcete-li otestovat metodu akce, jednoduše ji zavoláte přímo a poskytnete příslušné hodnoty parametrů.
Budoucí články o generování dat z kontrolérů vám ukážou, jak vytvořit testy jednotek pro různé typy výsledků akcí.
Nezapomeňte, že testování jednotek je pouze částí obrázku. Ke složitému chování v aplikaci dochází, když jsou metody akcí volány postupně. Testování jednotek funguje nejlépe v kombinaci s jinými testovacími přístupy.
Nyní, když víte, jak funguje speciální výsledek akce přesměrování, můžete přejít na jeho ekvivalent nabízený frameworkem MVC, který je výkonnější a byl důkladně testován společností Microsoft. Požadovaná změna odvozeného ovladače je uvedena níže:
// ... public ActionResult ProduceOutput() ( return new RedirectResult("/Basic/Index"); ) // ...
Podmíněný příkaz byl odstraněn z metody akce, což znamená, že po spuštění aplikace a navigaci na URL jako /Derived/ProduceOutput bude prohlížeč přesměrován na URL jako /Basic/Index. Pro zjednodušení kódu metody akce zahrnuje třída Controller pohodlné metody pro generování různých druhů objektů ActionResult. Můžeme tedy například dosáhnout stejného efektu jako ve výše uvedeném příkladu vrácením výsledku metody Redirect():
// ... public ActionResult ProduceOutput() ( return Redirect("/Basic/Index"); ) // ...
Na systému výsledků akcí není nic zvlášť složitého, ale nakonec pomáhá vytvářet jednodušší, čistší a konzistentnější kód, který se snadno čte a testuje jednotky. Například v případě přesměrování můžete jednoduše zkontrolovat, že metoda akce vrací instanci RedirectResult, jejíž vlastnost Url obsahuje očekávaný cíl.
MVC Framework definuje mnoho integrovaných typů výsledků akcí, které jsou popsány v tabulce níže:
| Zobrazit výsledek | Vykreslí zadanou nebo standardní šablonu zobrazení |
Pohled() |
| PartialViewResult | Vykreslí zadanou nebo standardní šablonu částečného pohledu |
PartialView() |
| RedirectToRouteResult | Vydává přesměrování HTTP 301 nebo 302 na metodu akce nebo zadanou položku trasy a generuje adresu URL podle konfigurace směrování |
RedirectToAction() RedirectToActionPermanent() RedirectToRoute() RedirectToRoutePermanent() |
| RedirectResult | Vydá přesměrování HTTP 301 nebo 302 na danou adresu URL |
Redirect() RedirectPermanent() |
| ContentResult | Vrátí neformátovaná textová data do prohlížeče a navíc nastaví záhlaví typu obsahu |
Obsah() |
| FileResult | Přenáší binární data (jako je soubor na disku nebo bajtové pole v paměti) přímo do prohlížeče |
Soubor() |
| JsonResult | Serializuje objekt .NET do JSON a odešle jej jako odpověď. Odezvy tohoto typu jsou častěji generovány při použití nástrojů Web API a AJAX |
Json() |
| JavaScriptResult | Odešle část zdrojového kódu JavaScriptu ke spuštění prohlížečem |
JavaScript() |
| HttpUnauthorizedResult | Nastaví stavový kód odpovědi HTTP na 401 (což znamená „není autorizováno“), což způsobí, že zavedený autentizační mechanismus (ověření pomocí formulářů nebo ověřování systému Windows) vyzve návštěvníka k přihlášení. |
Žádný |
| HttpNotFoundResult | Vrátí kód chyby HTTP 404 – nenalezeno |
HttpNotFound() |
| HttpStatusCodeResult | Vrátí zadaný kód HTTP |
Žádný |
| EmptyResult | Nedělá nic |
Žádný |
Všechny tyto typy jsou odvozeny od třídy ActionResult a mnoho z nich má pohodlné pomocné metody ve třídě Controller. Využití těchto typů výsledků si ukážeme v následujících článcích.
Překlad: Vlad Merzhevich
Každý zná webové formuláře, že? Vložíme štítek, několik, možná, vše doplníme tlačítkem a máte hotovo.
Neznáte polovinu. HTML5 definuje více než tucet nových typů polí, které můžete použít ve formulářích. A když říkám „použít“, myslím, že je lze použít okamžitě – bez jakýchkoli triků, hacků nebo řešení. Nebojte se příliš, neříkám, že všechny tyto vzrušující nové funkce jsou skutečně podporovány v každém prohlížeči. Absolutně ne, tím nemyslím všechny. V moderních prohlížečích ano, vaše formuláře zobrazí vše, čeho jsou schopny. Ale ve starších prohlížečích budou vaše formuláře stále fungovat, i když ne naplno. To znamená, že tyto funkce ladně degradují v každém prohlížeči. Dokonce i v IE6.
Výzvový text| TJ. | Firefox | Safari | Chrome | Opera | iPhone | Android |
| - | 4.0+ | 4.0+ | 4.0+ | 11.0+ | 4.0+ | - |
Prvním vylepšením HTML5 ohledně formulářů je možnost nastavit text výzvy ve vstupním poli. Tento text se zobrazí ve vstupním poli, pokud je pole prázdné a není aktivní. Jakmile kliknete do vstupního pole (nebo do něj přejdete přes Tab), text nápovědy zmizí.
Pravděpodobně jste již viděli text výzvy. Například Mozilla Firefox obsahuje v adresním řádku sugestivní text, který říká „Prohledat záložky a historii“.
Když kliknete na adresní řádek, text nápovědy zmizí.
Zde je návod, jak můžete do formulářů zahrnout sugestivní text.
Prohlížeče, které nepodporují zástupný atribut, jej jednoduše ignorují. Žádná újma ani porušení.
Zeptejte se profesora Markupa☞ Otázka: Mohu pro zástupný atribut použít značku HTML? Chci vložit obrázek nebo možná změnit barvy.
A. Atribut zástupného symbolu může obsahovat pouze text, žádný kód HTML. Existují však speciální CSS rozšíření, která umožňují nastavit styl textu v některých prohlížečích.
Pole autofokusu| TJ. | Firefox | Safari | Chrome | Opera | iPhone | Android |
| - | - | 4.0+ | 3.0+ | 10.0+ | - | - |
Weby mohou používat JavaScript, aby se automaticky zaměřily na první pole formuláře. Například na hlavní stránce Google.com Pole pro zadávání hledaných klíčových slov má automatické ostření. I když je to pohodlné pro většinu lidí, může to být nepříjemné pro pokročilé uživatele a lidi se speciálními potřebami. Pokud stisknete mezerník při čekání na posunutí stránky, nedojde k posouvání, protože fokus je na vstupním poli formuláře (místo posouvání se do pole napíše mezera). Pokud během načítání stránky přesunete fokus na jiné vstupní pole, skript automatického ostření na webu může „pomocně“ přesunout fokus zpět do původního vstupního pole, čímž přeruší vaše psaní a způsobí, že budete psát na nesprávném místě.
Protože automatické ostření funguje prostřednictvím JavaScriptu, může být obtížné zvládnout tyto extrémní případy a málo možností pro ty lidi, kteří nechtějí, aby jim webová stránka „ukradla“ zaměření.
K vyřešení těchto problémů zavádí HTML5 atribut autofocus pro všechny prvky formuláře. Atribut autofocus dělá přesně to, co zní: jakmile se stránka načte, přesune fokus na zadané pole. Ale protože se jedná pouze o označení a ne o skript, bude chování konzistentní na všech webech. Výrobci prohlížečů (nebo autoři rozšíření) navíc mohou uživatelům nabídnout způsob, jak deaktivovat automatické ostření.
Zde je návod, jak můžete nastavit pole formuláře na automatické ostření.
Prohlížeče, které nepodporují atribut autofocus, jej budou ignorovat.
co se stalo? Řekněme, že chcete, aby automatické ostření fungovalo všude, nejen v luxusních prohlížečích HTML5? Aktuální skript můžete ponechat s automatickým ostřením, stačí provést dvě malé změny:
- přidat atribut autofocus do HTML kódu;
- Zkontrolujte, zda prohlížeč podporuje atribut autofocus, a pokud ne, spusťte svůj vlastní skript.
Autofokus s alternativou
if (!("autofocus" v document.createElement("input")) ) (
document.getElementById("q").focus();
}
Mnoho webových stránek čeká na spuštění window.onload a nastavení fokusu. Ale událost window.onload se nespustí, dokud se nenačtou všechny obrázky. Pokud vaše stránka obsahuje mnoho obrázků, tyto naivní skripty potenciálně změní zaměření poté, co uživatel začne pracovat s jinou částí vaší stránky. To je důvod, proč pokročilí uživatelé nenávidí skripty automatického ostření.
Například v předchozí části byl skript automatického ostření umístěn bezprostředně za pole formuláře, na které odkazoval. Toto je optimální řešení, ale může urazit vaši citlivost tím, že doprostřed stránky umístíte blok kódu JavaScript (nebo více světské, váš systém nemusí být tak flexibilní). Pokud nemůžete vložit skript doprostřed stránky, měli byste nastavit fokus pomocí vlastní události, jako je $(document).ready() v jQuery namísto window.onload .
Autofocus přes jQuery
$(document).ready(function() (
$("#q").focus();
}
});
Vlastní událost jQuery se spustí, jakmile je DOM přístupný – to znamená, že čeká na načtení textu stránky, ale nečeká na načtení všech obrázků. Toto není optimální přístup – pokud je stránka neobvykle velká nebo připojení k síti je pomalé, uživatel může stále se stránkou interagovat před spuštěním skriptu fokusu. Ale pořád je to mnohem lepší než čekat na událost window.onload.
Pokud souhlasíte a jste ochotni vložit do kódu své stránky skript s jedním příkazem, jedná se o kompromis, který je méně ošklivý než první možnost a lepší než druhá. Vlastní události jQuery můžete použít k nastavení vlastních událostí, řekněme autofocus_ready. Poté můžete tuto událost spustit ručně, jakmile bude k dispozici pole automatického ostření. Děkuji E.M. Shtenbergovi za to, že mě naučil tuto techniku.
Automatické ostření s alternativní vlastní událostí
$(document).bind("autofocus_ready", function() (
if (!("autofocus" v document.createElement("input"))) (
$("#q").focus();
}
});
$(document).trigger("autofocus_ready");
Toto řešení je optimální, stejně jako první přístup. Zaměření bude nastaveno na pole formuláře, jakmile to bude technicky možné, zatímco se text stránky stále načítá. Část aplikační logiky (zaměření v poli formuláře) byla přesunuta z těla stránky do sekce. Tento příklad je založen na jQuery, ale koncept vlastních událostí není pro jQuery jedinečný. Jiné JavaScriptové knihovny jako YUI a Dojo nabízejí podobné možnosti.
Pojďme si to shrnout.
- Důležité je správné nastavení zaostření.
- Pokud je to možné, požádejte prohlížeč, aby použil atribut autofocus na pole, na které chcete zaostřit.
- Pokud používáte alternativní kód pro starší prohlížeče, definujte podporu pro atribut autofocus, aby se skript spouštěl pouze ve starších prohlížečích.
- Zaměřte se co nejdříve. Vložte skript fokusu do kódu bezprostředně za pole formuláře. Pokud vám to nevadí, vložte knihovnu JavaScriptu, která podporuje vlastní události, a uveďte událost v kódu ihned za pole formuláře. Pokud to není možné, použijte událost jako $(document).ready() z jQuery.
- Za žádných okolností nečekejte, až window.onload získá fokus.
Již více než deset let obsahují formuláře pouze několik typů polí. Nejběžnější jsou následující.
Všechny tyto typy polí stále fungují v HTML5. Pokud „upgradujete na HTML5“ (třeba změnou !DOCTYPE ), nebudete muset ve formulářích provádět jedinou změnu. Jo za zpětnou kompatibilitu!
HTML5 však definuje 13 nových typů polí a není důvod je nezačít používat.
První z těchto nových typů e-mailových adres. Vypadá to asi takhle.
Chystal jsem se napsat větu, která začala "v prohlížečích, které nepodporují type="email" ...", ale přestala. Proč? Protože si nejsem jistý, jestli prohlížeče nepodporují type="email" . Všechny prohlížeče "podporují" type="email" . Nemusí dělat nic zvláštního, ale prohlížeče, které nerozpoznají type="email" s ním budou zacházet jako s type="text" a vykreslí ho jako normální textové pole.
Zdůrazním, jak je to důležité. Na internetu jsou miliony formulářů, které po vás žádají zadání vaší e-mailové adresy, a všechny používají . Uvidíte textové pole, zadejte do něj svou e-mailovou adresu a je to. A pak přichází HTML5, které definuje type="email" . Zbláznili se prohlížeče? Žádný. Každý prohlížeč na Zemi považuje atribut neznámého typu za type="text" – dokonce i IE6. Takže můžete své formuláře "obnovit" pomocí type="email" právě teď.
Co se stane, když řekneme, že prohlížeč podporuje type="email" ? No, může to znamenat cokoliv. Specifikace HTML5 nevyžaduje žádné specifické uživatelské rozhraní pro nové typy polí. Opera přidá do pole formuláře malou ikonu. Jiné prohlížeče HTML5, jako je Safari a Chrome, se vykreslují jako textové pole – stejně jako type="text" – takže vaši uživatelé nepostřehnou rozdíl (dokud se nepodívají na zdrojový kód).
A pak je tu iPhone.
iPhone nemá fyzickou klávesnici. Veškeré „psaní“ se provádí kliknutím na klávesnici na obrazovce, která se objeví ve vhodnou chvíli, například když přejdete do pole formuláře na webové stránce. Apple udělal něco chytrého s prohlížečem iPhone. Rozpoznává některá nová pole HTML5 a dynamicky mění klávesnici na obrazovce, aby optimalizoval vstup.
Například e-mailová adresa je textová, ne? Samozřejmě, ale to je zvláštní typ textu. Téměř všechny e-mailové adresy tedy obsahují symbol @ a alespoň jednu tečku (.), ale je nepravděpodobné, že by obsahovaly mezeru. Když tedy používáte iPhone a přejdete na , získáte klávesnici na obrazovce, která obsahuje menší mezerník a také vyhrazené klávesy pro symboly. A @.
Dovolte mi to shrnout. Okamžité převedení všech e-mailových polí na typ="email" nemá žádnou nevýhodu. Téměř nikdo si toho nevšimne kromě uživatelů iPhonů, kteří si toho pravděpodobně také nevšimnou. Ale ti, kteří si toho všimnou, se tiše usmějí a poděkují, že jste jim trochu usnadnili práci.
webové adresyWebová adresa – kterou geekové standardy nazývali URL, s výjimkou několika pedantů, kteří volali URI – je dalším typem specializovaného textu. Syntaxe webové adresy je omezena na příslušný internetový standard. Pokud vás někdo požádá o zadání webové adresy do formuláře, očekává něco jako „http://www.google.com/“, nikoli „125 Farwood Road“. Lomítka jsou běžná – dokonce i domovská stránka Google má tři z nich. Tečky jsou také běžné, ale mezery jsou zakázány. A každá webová adresa má příponu domény jako „.com“ nebo „.org“.
A tak... (buben, prosím)... . Na iPhonu to vypadá takto.
iPhone přepracoval svou virtuální klávesnici stejně jako pro e-mail, ale nyní ji optimalizuje pro psaní webové adresy. Mezerník byl zcela nahrazen třemi virtuálními klávesami: lomítko, tečka a „.com“ (podržením klávesy „.com“ můžete vybrat jinou příponu, například „.org“ nebo „.net“).
Prohlížeče, které nepodporují HTML5, budou považovat type="url" za type="text" , takže použití tohoto typu pro všechna pole, do kterých je třeba zadat webovou adresu, není nevýhodné.
Čísla jako počítadlaDalší krok: čísla. Žádost o číslo je složitější než žádost o e-mail nebo webovou adresu. Za prvé, čísla jsou složitější, než si myslíte. Rychle vyberte číslo. -1? Ne, myslel jsem číslo mezi 1 a 10,7 ½? Ne, ne, nebuď zlomek, hlupáku. π? Teď jste právě vybrali iracionální číslo.
Rád bych poznamenal, že se vás často neptají „jen číslo“. Pravděpodobnější je, že požádají o číslo v určitém rozsahu. Možná budete chtít jen určité typy čísel v tomto rozsahu – možná celá čísla, ale ne zlomky nebo desetinná místa nebo něco exotičtějšího, jako jsou násobky 10. HTML5 to všechno pokrývá.
Vyberte si číslo, téměř libovolné
Podívejme se na jeden atribut po druhém.
- type="číslo" znamená, že se jedná o číselné pole.
- min="0" určuje minimální povolenou hodnotu pro toto pole.
- max="10" je maximální povolená hodnota.
- step="2" v kombinaci s minimální hodnotou definuje platná čísla v rozsahu: 0, 2, 4 atd., až po maximální hodnotu.
- value="6" je výchozí hodnota. Mělo by to vypadat povědomě, jedná se o stejný atribut, který se vždy používá k definování hodnot polí formuláře. Zmiňuji to zde jako výchozí bod, že HTML5 staví na předchozích verzích HTML. Nemusíte se znovu učit dělat to, co jste již udělali.
Toto je kód pro číselné pole. Mějte na paměti, že všechny tyto atributy jsou volitelné. Pokud máte minimum, ale ne maximum, můžete zadat atribut min, ale ne atribut max. Výchozí hodnota kroku je 1 a atribut kroku můžete vynechat, dokud nebude potřeba jiná hodnota kroku. Pokud neexistuje žádná výchozí hodnota, pak atribut value může být prázdný řetězec nebo dokonce může být zcela vynechán.
Tím ale HTML5 nekončí. Za stejně nízkou a nízkou cenu svobody získáte tyto praktické techniky JavaScriptu.
- input.stepUp(n) zvýší hodnotu pole o n.
- input.stepDown(n) sníží hodnotu pole o n.
- input.valueAsNumber vrací aktuální hodnotu jako číslo s plovoucí desetinnou čárkou (vlastností input.value je vždy řetězec).
Problémy se zobrazením? Správné rozhraní pro správu čísel je v prohlížečích implementováno jinak. Na iPhonu, kde je psaní obtížné, prohlížeč opět optimalizuje virtuální klávesnici pro zadávání čísel.
V desktopové verzi Opery se pole type="number" zobrazí jako počítadlo s malými šipkami nahoru a dolů, na které můžete kliknout a změnit hodnoty.
Opera respektuje atributy min , max a step, takže vždy dosáhnete přijatelné číselné hodnoty. Pokud zvýšíte hodnotu na maximum, šipka nahoru na počítadle zešedne.
Stejně jako u všech ostatních vstupních polí, o kterých jsem hovořil v této kapitole, budou prohlížeče, které nepodporují type="číslo" s nimi zacházet jako s type="text" . V poli bude zobrazena výchozí hodnota (jak je uložena v atributu value), ale ostatní atributy jako min a max budou ignorovány. Můžete je sami implementovat nebo použít framework JavaScript, který již implementuje správu čítačů. Nejprve zkontrolujte zde.
if (! .inputtypes.number) (
// žádná nativní podpora pro pole typ=číslo
// může zkusit Dojo nebo jiný rámec JavaScriptu
}
Počítadlo není jediný způsob, jak reprezentovat zadávání čísel. Pravděpodobně jste také viděli posuvník, který vypadá takto.
Nyní můžete mít na formuláři také posuvník. Kód vypadá podivně podobně jako pole čítače.
Všechny dostupné atributy jsou stejné jako pro type="number" - min , max , step , value - a znamenají totéž. Jediným rozdílem je uživatelské rozhraní. Namísto vstupního pole se očekává, že prohlížeče zobrazí type="range" jako posuvník. V době psaní tohoto článku s tím pracují nejnovější verze Safari, Chrome a Opera. Bohužel se iPhone zobrazuje jako jednoduché textové pole, ani neoptimalizuje klávesnici na obrazovce pro zadávání čísel. Všechny ostatní prohlížeče jednoduše zacházejí s polem jako type="text" , takže není důvod začít tento typ okamžitě používat.
HTML 4 nezahrnuje výběr data přes kalendář. JavaScriptové frameworky vám to umožňují obejít (Dojo, jQuery UI, YUI, Closure Library), ale každé z těchto řešení samozřejmě vyžaduje „implementaci“ frameworku pro jakýkoli vestavěný kalendář.
HTML5 konečně definuje způsob, jak povolit nativní výběr data bez jakéhokoli skriptování. Ve skutečnosti je jich šest: datum, měsíc, týden, čas, datum + čas a datum + čas s časovým pásmem.
Zatím je podpora... mizivá.
| type="date" | 9.0+ | - |
| type="měsíc" | 9.0+ | - |
| type="týden" | 9.0+ | - |
| type="time" | 9.0+ | - |
| type="datetime" | 9.0+ | - |
| type="datetime-local" | 9.0+ | - |
Opera se zobrazuje takto:
Pokud potřebujete čas spolu s datem, Opera také podporuje:
Pokud potřebujete měsíc plus rok (například datum vypršení platnosti kreditní karty), Opera může zobrazit:
Méně obvyklé, ale dostupné je vybrat týden v roce pomocí:
V neposlední řadě je načasování s:
Výběr data s alternativou
...
var i = document.createElement("vstup");
i.setAttribute("typ", "datum");
if (i.type == "text") (
// Žádná nativní podpora pro výběr data :(
// K vytvoření použijte Dojo/jQueryUI/YUI/Closure,
// pak dynamicky nahradit prvek
}
Je pravděpodobné, že ostatní prohlížeče budou tyto typy nakonec podporovat. Stejně jako type="email" a další typy se tato pole formuláře zobrazí jako prostý text v prohlížečích, které nerozpoznají type="date" a jeho varianty. Pokud chcete, stačí použít , udělat radost uživatelům Opery a počkat, až to ostatní prohlížeče doženou. Je realističtější použít toto, ale zkontrolujte, zda prohlížeč podporuje nativní výběr data, a zahrňte alternativní řešení ve formě skriptu dle vašeho výběru (Dojo, jQuery UI, YUI, Closure Library nebo jiné možnosti).
Vyhledávací oknoTakže hledej. Nejen vyhledávání z Google nebo Yahoo (tedy i těch). Přemýšlejte o jakémkoli vyhledávacím poli, na jakékoli stránce, na jakémkoli webu. Amazon má vyhledávací pole, Yandex má vyhledávací pole a většina blogů také. Jak se vyrábějí?
, stejně jako jakékoli jiné textové pole na webu. Pojďme to napravit.
Hledejte novou generaci
V některých prohlížečích si nevšimnete žádného rozdílu od běžného textového pole. Pokud ale používáte Safari na Mac OS X, bude to vypadat takto.
Našli jste rozdíl? Vstupní pole má zaoblené rohy! Já vím, já vím, stěží dokážeš potlačit své pocity. Ale počkat, je toho víc! Když do pole začnete psát type="search", Safari vloží na pravou stranu okna malé tlačítko "x". Kliknutím na "x" vymažete obsah pole. Stejně se chová i Google Chrome, který má pod kapotou stejnou technologii. Oba tyto malé triky vypadají a chovají se podobně jako nativní vyhledávání v iTunes a dalších klientských aplikacích Mac OS X.
Apple.com používá vyhledávání na webu, aby pomohl webu zprostředkovat pocit „milující papoušky“. Ale tady není nic specifického pro Mac. Je to jen kód, takže každý prohlížeč na každé platformě si může vybrat způsob vykreslování podle konvencí platformy. Stejně jako u všech ostatních nových typů, prohlížeče, které nerozpoznají type="search" s ním budou zacházet jako s type="text" , takže není absolutně žádný důvod, proč nezačít používat type="search" pro všechna svá vyhledávací pole ještě dnes.Ve výchozím nastavení Safari většinu stylů nepoužívá. Chcete-li přinutit Safari, aby s vyhledávacím polem zacházelo jako s běžným textovým polem (abyste mohli použít své vlastní styly), přidejte toto pravidlo do své šablony stylů.
vstup(
-webkit-appearance:textfield;
}
Děkuji Johnu Laneovi, že mě tento trik naučil.
Výběr barvyHTML5 také definuje pole, které umožňuje vybrat barvu a vrací ji v šestnáctkové soustavě. Žádný prohlížeč nepodporuje výběr barev, což je škoda, protože palety Mac OS jsem vždy miloval. Možná někdy.
Poznámka překladatel Opera 11 tuto funkci podporuje.
Ověření formulářeV této kapitole jsem mluvil o nových prvcích formulářů a nových funkcích, jako je automatické ostření, ale nezmínil jsem možná nejzajímavější část formulářů HTML5: automatické ověřování vstupu. Podívejme se na běžné problémy se zadáním e-mailové adresy do formuláře. Pravděpodobně máte ověření na straně klienta pomocí JavaScriptu, po kterém následuje ověření na straně serveru pomocí PHP, Pythonu nebo jiného jazyka na straně serveru. HTML5 nikdy nenahradí ověřování na straně serveru, ale jednoho dne může nahradit ověřování na straně klienta.
Existují dva velké problémy s ověřováním e-mailové adresy v JavaScriptu:
Vážně, spletete si adresu. Určení, že sada náhodných znaků je platnou e-mailovou adresou, je neuvěřitelně obtížné. Čím víc se díváte, tím je to těžší. Zmínil jsem se, že je to velmi, velmi obtížné? Není jednodušší pověsit tuto bolest hlavy na váš prohlížeč?
Opera kontroluje type="email"
Zde je snímek obrazovky z Opery 11, i když funkce je přítomna již od Opery 9. Kód zahrnuje nastavení e-mailové hodnoty pro atribut type. Když se uživatel Opery pokusí odeslat formulář pomocí , prohlížeč automaticky zkontroluje e-mailovou adresu, i když jsou skripty zakázány.
HTML5 také nabízí ověření webových adres pomocí pole a čísel pomocí . Ověření čísla bere v úvahu hodnoty atributů min a max, takže vám prohlížeče neumožní odeslat formulář, pokud zadáte příliš velké číslo.
Neexistuje žádný kód, který by umožňoval ověření formuláře v HTML5, provádí se standardně. Chcete-li zakázat ověřování, použijte atribut novalidate.
Nezkoušej mě
Prohlížeče pomalu začleňovaly podporu pro ověřování formulářů v HTML5. Firefox 4 bude mít plnou podporu. Safari a Chrome jsou bohužel implementovány pouze částečně: ověřují prvky formuláře, ale nezobrazují žádné viditelné zprávy, když ověření pole formuláře selže. Jinými slovy, pokud do type="date" zadáte neplatné (nebo chybně napsané) datum, Safari a Chrome formulář neodešle, ale neřeknou vám, proč to tak nebylo. Nastaví fokus na pole, které obsahuje neplatnou hodnotu, ale nezobrazí chybovou zprávu jako Opera nebo Firefox 4.
Povinná pole| TJ. | Firefox | Safari | Chrome | Opera | iPhone | Android |
| - | 4.0+ | - | - | 9.0+ | - | - |
Ověření formuláře v HTML5 není omezeno na typ každého pole. Můžete také určit, že některá pole jsou povinná, taková pole musí mít hodnotu, než budete moci formulář odeslat.
Kód pro povinná pole je tak jednoduchý, jak jen může být.
Prohlížeče mohou změnit původní vzhled požadovaného pole. Zde je příklad toho, jak to vypadá v Mozilla Firefox 4.0.
Pokud se navíc pokusíte odeslat formulář bez vyplnění požadované hodnoty, Firefox zobrazí informační lištu s informací, že pole je povinné a nemůže být prázdné.
Řekněme, že potřebujeme získat data z webové stránky, jejíž ruční sběr je vzhledem k jejich objemu nepraktický nebo nemožný. V tomto případě můžeme proces automatizovat pomocí nástrojů popsaných níže.
žádá knihovnuKnihovna Pythonu pro vytváření požadavků na server a zpracování odpovědí. Základ skriptu analýzy a naše hlavní zbraň. Pomocí této knihovny obdržíme obsah stránky ve formě html pro další analýzu.
požadavky na import odpověď = požadavky . get ("https://ya.ru" ) # get-request print (response . text ) # output page content payload = ( "key1" : "value1" , "key2" : "value2" ) response = requirements . get ("http://httpbin.org/get" , params = payload ) # request s parametry headers = ( "user-agent" : "my-app/0.0.1" ) response = requesty . get (url, headers = headers) # request s konkrétními html hlavičkami
APIRozhraní pro programování aplikací - rozhraní pro programování aplikací poskytované vlastníkem webové aplikace pro ostatní vývojáře. Absence API, které by uspokojilo naše potřeby, je první věcí, kterou bychom se měli ujistit, než se vrhneme na analýzu zdrojového kódu stránky a napsání analyzátoru. Mnoho populárních stránek má své vlastní API a dokumentaci, která vysvětluje, jak je používat. Můžeme použít api tímto způsobem - vytvoříme požadavek http podle dokumentace a obdržíme odpověď pomocí požadavků.
BS4Beautifulsoup4 je knihovna pro analýzu html a xml dokumentů. Umožňuje přímý přístup k obsahu libovolných značek v html.
from bs4 import BeautifulSoup soup = BeautifulSoup (raw_html, "html.parser" ) print (sup . find ( "p" , class_ = "some-class" ) . text ) # výstup obsahu tagu "p" s třídou "nějaká třída"
Webový ovladač SeleniumData na webu lze generovat dynamicky pomocí javascriptu. V tomto případě nebude možné tato data analyzovat pomocí request+bs4. Faktem je, že bs4 analyzuje zdrojový kód stránky bez spuštění js. Pro spuštění kódu js a získání stránky identické s tou, kterou vidíme v prohlížeči, můžete použít webový ovladač selenium - jedná se o sadu ovladačů pro různé prohlížeče, dodávanou s knihovnami pro práci s těmito ovladači.
Co dělat, pokud existuje oprávnění?session = request.Session() data = ("login_username":"login", "login_password":"password") url = "http://site.com/login.php" response = session.post(url, data =data)
Co když vás web zakáže kvůli příliš velkému počtu požadavků?- Nastavit prodlevu mezi požadavky:
response = requests.get(url, timeout=(10, 0.01)) # timeout spojení, timeout čtení (v sekundách)
- Předstírejte, že jste prohlížeč používající selenový webový ovladač nebo předávání obsahu hlavičky user-agent při zadávání požadavku:
user_agent = ("Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:50.0) " "Gecko/20100101 Firefox/50.0") request = requests.get(url, headers=("User-Agent":user_agent))
- Použít proxy:
