Javascript XMLHttpRequest, historie tvorby, standardy, příklady

XMLHttpRequest (XHR) - tento API jako názorná dána prostředím JavaScript prohlížeč. Zejména XHR vyhledávání dat za účelem neustálé změny stáhnout webové stránky, je základní koncepce Ajax. Přes jméno, XHR může být použita s jinými než HTTP protokoly, a data mohou být ve tvaru nejen XML, ale JSON, HTML nebo prostý text. WHATWG podporuje standard XHR. Současná práce ve W3C, která vytváří stabilní specifikaci, je založena na snapshotech standardu WHATWG.

[palec] http://hi-news.pp.ua/uploads/posts/2018-12/javascript-xmlhttprequest-storya-stvorennya-standarti-prikladi_261.jpeg [/palec]
První JavaScript XMLHttpRequest byl objekt ActiveX, jeho použití bylo omezeno na intranety založené na společnosti Microsoft a nebylo vhodné pro jiné weby. Mozilla tým zájem o realizaci ekvivalentní JScript a rozšířil ho na všech prohlížečích, včetně těch, které jsou založeny na Gecko /KHTML a Opera. Dokonce IE7 již nepotřebuje instalaci ActiveX pro použití s ​​XHR.


Historie XMLHttpRequest

Koncepce byla vytvořena odborníky JavaScript XMLHttpRequest Outlook Web Access serveru pro použití na serveru Microsoft Exchange 2000. Verze 5 a 6 byly stanoveny identifikátor XHR objektem jejich skriptovacích jazyků as Vlastní požadavek ID nebyl v době vydání standardní standardní. Společnost Microsoft přidala identifikátor objektu do svých skriptovacích jazyků v aplikaci Internet Explorer 7.0, která byla vydána v říjnu 2006. V projektu prohlížeče byla vyvinuta a implementována v JavaScriptu XMLHttpRequest layout rozhraní mechanismu Gecko. Byla modelována tak, aby byla co nejblíže rozhraní Microsoft Request. Mozillavytvořil shell pro použití tohoto rozhraní prostřednictvím objektu JS, který byl nazván XMLHttpRequest. Objekt již zpřístupněny v Gecko 0.6 verze uvolněna 06.12.2000, ale to nebylo plně funkční až do 05.6.2002 není uvolněna verze 1.0 Gecko, pak je identifikátor objektu se stal de facto standardem další velké webové systémy:


  • Safari 1.2 vydané v únoru 2004.
  • Opera 8.0 byla vydána v dubnu 2005.
  • iCab 3.0b352 vydané v září 2005.
  • S příchodem knihovny cross-browser JavaScript, včetně jQuery, mohou vývojáři volat javascript funkce XMLHttpRequest bez kódování přímo do API. World Wide Web Consortium zveřejnila návrh specifikace pro XMLHttpRequest 5. dubna 2006 za účelem dokumentace minimálního souboru kompatibilních funkcí založených na stávajících implementacích, což umožňuje vývojářům používat bez kódu specifické pro platformu. 25.února 2008 W3C také zveřejněny další údaje Projektové práce - XMLHttpRequest Level 2. Level 2 má rozšířené funkce, včetně podpory pro dotazování a zpracování byte proudy.

    standardy identifikátor objektu

    Jako W3C standard pro objekt XMLHttpRequest JavaScript po stále předchozí verze, vlastní činidla nemůže řídit všechny funkce identifikace, a jakýkoli z následujících může být změněn. Při psaní scénáře s objektem XMLHttpRequest pro několik uživatelských agentů je třeba vzít v úvahu extrémní péči.
    HTTP a HTTPS požadavky XMLHttpRequest objekty jsou inicializovány otevřítzpůsobem. Volá se před odesláním skutečné žádosti o ověření. Tato metoda nezaručuje, že adresa URL existuje a informace jsou správné. Může přijmout až pět parametrů, ale pouze dvě budou vyžadovat inicializaci požadavku. První parametr je textový řetězec. Představujeme metody dotazu, které musí podporovat příslušný uživatelský agent, specifický projekt W3C pro jazyk XMLHttpRequest javascript. Příklady:
  • GET podporuje Mozilla Internet Explorer 7.
  • POST podporuje IE7 Mozilla.
  • HEAD podporuje IE7.
  • Metody žádosti nejsou omezeny na ty, které jsou uvedeny výše. Projekt W3C říká, že prohlížeč je může podporovat podle vlastního uvážení. Druhým parametrem je další textový řetězec, který určuje adresu URL požadavku HTTP. Třetí parametr je logická hodnota, která označuje, zda bude požadavek asynchronní. Projekt W3C nevyžaduje. Jeho výchozí hodnota by měla být považována za správnou pomocí příslušného rozhraní agenta W3C. Požadavek asynchronní "pravdy" nebude čekat na to, aby server reagoval před pokračováním v provádění aktuálního skriptu. Místo toho bude volat posluchače události onreadystatechange na příspěvku javascript XMLHttpRequest v různých fázích dotazu. Čtvrtým a pátým parametrem je uživatelské jméno a heslo. Tyto parametry mohou být poskytnuty pro ověření a autorizaci, pokud to vyžaduje server.

    Metoda SetRequestHeader

    Po úspěšné inicializaci můžete zavolat metodu hlavičky objektu open javascript objektu XMLHttpRequest a odeslat HTTP hlavičky do dotazu. Prvním parametrem metody je název záhlaví. Druhým parametrem je hodnota řetězce. Tato metoda by mělakterý se používá pro každou hlavičku odeslanou s požadavkem.
    Skrytý "kamen" ve standardu XMLHttpRequest, který zjednodušuje proces odběru vzorků a analýzu dat JSON prostřednictvím Ajaxu, je JSON & amp; JSON-P Obvyklým způsobem, jak nabízet data serveru pro prohlížeče, aby mohly být použity v javascriptu klienta, je formátovat data jako JSON a přistupovat k němu prostřednictvím vlastní URL. Například: XMLHttpRequest javascript Json Chcete-li odeslat požadavek HTTP, musíte volat metodu odesílání XMLHttpRequest. Firefox 3.0.x a předchozí verze vydávají výjimku, pokud je volání odesíláno bez argumentů. Pokud je tato možnost předmětem dokumentu DOM, uživatelský agent musí zajistit, aby byl převeden do dobře vytvořeného XML. Pokud hlavička Content-Type dosud nebyla přidána prostřednictvím SetRequestHeader, měla by ji příslušný agent automaticky přidávat uživateli s následující akcí: "application /xml; charset = charset ", kde charset je kódování použité pro dokument. Pokud je uživatelský agent nakonfigurován pro použití proxy, objekt XMLHttpRequest změní požadavek na předání nakonfigurovaných záhlaví na oprávnění proxy.

    Informace o změnách stavu XHR

    V případě, že postup byl úspěšně nazývá vlastnosti objektu XmlHttpRequest bude nastavena na 1 (otevřené). Po odevzdání záhlaví HTTP odpovědí je hodnota 2 (HEADERS_RECEIVED) přiřazena vlastnost objektu readyState XHR. Po načtení obsahu odpovědi HTTP musí být vlastnost readyState objektu XHR nastavena na hodnotu 3 (Načítání). Po dokončení odezvy HTTP musí být vlastnost readyState objektu XHR nastavena na hodnotu 4 (Hotovo). Posluchač budereagovat na změny stavu, ke kterým dojde po určení. Chcete-li zjistit stav 1 a 2, musí být před voláním otevřen posluchač. Otevřená metoda musí být použita před odesláním hovoru. Tato metoda přeruší požadavek, pokud objekt readyState objektu XHR dosud není 4 (Hotovo). Metoda přerušení zajišťuje, že při asynchronním dotazu nebude volána obslužná jednotka zpětného volání. Některé knihovny AJAX používají přerušení k rušení potenciálních duplicitních nebo poškozených dotazů.

    Dotazy mezi doménami

    V historii časného vývoje internetu bylo zjištěno, že je možné přerušit bezpečnost uživatelů, kteří používají javascript, k výměně informací z jedné webové stránky do jiné, méně autoritní. Takže všechny moderní prohlížeče implementují jednu a tutéž politiku původu, která zabraňuje mnoha útokům, jako je skriptování mezi různými servery.
    javascript XMLHttpRequest onload data je náchylná k této bezpečnostní politice, ale někdy weboví vývojáři chtějí záměrně obcházet omezení. Důvodem je legitimní použití subdomén, protože vytvoření XHR ze stránky generované foo.example.com pro získání informací z bar.example.com z něj obvykle selže. Existují různé alternativy k obcházení tohoto bezpečnostního prvku, včetně použití JSONP, sdílení prostředků (CORS) nebo alternativ k plug-inům, jako jsou Flash a Silverlight.

    Aplikace prohlížeče

    Inicializace objektu XHR je ve většině prohlížečů poměrně jednoduchá, ale pro podporu MSIE 5 a 6 je nutné sloužit řadě různých metod, takže proces vypadá tak komplikovaně. V podstatěskript se pokusí používat tři různé metody důsledně, dokud se to nepodaří nebo nekončí.
    [palec] http://hi-news.pp.ua/uploads/posts/2018-12/javascript-xmlhttprequest-storya-stvorennya-standarti-prikladi_412.jpeg [/palec]
    funkce má dvě loadXMLDoc parametry První je umístění skriptu na straně serveru a druhá je proměnná, která musí být předána tomuto skriptu. Jedná se o stručný příklad toho, jak lze volat skript. Používá skript umístěný v souboru /scripts/myscript.php se dvěma parametry GET (q a cíl). Doporučuje se zakódovat hodnoty pomocí encodeURIComponentu.

    POST místo GET

    Pro přenos dat do svazku serveru větší než 512 bajtů, musíte použít zakládat nová XMLHttpRequest JavaScript JavaScript xml 34 namísto GET. Pokud přijmete data POST, musíte změnit typ dotazu MIME pomocí záhlaví Content-Type a předávání proměnných volat expedici. Poslední část funkce loadXMLDoc se změní, jak je znázorněno na obrázku níže.
    [palec] http://hi-news.pp.ua/uploads/posts/2018-12/javascript-xmlhttprequest-storya-stvorennya-standarti-prikladi_143.jpeg [/palec]
    Většina z třetího může být otevřený parametr příkazu zastaven. Hodnota true označuje, že výzva by měla být asynchronní - skript pokračuje bez čekání na XML odezvy, která je již výchozí. Přenos hodnoty false vede k zastavení skriptu před přijetím odpovědi. Skript, na který odkazuje adresa URL, bude skriptem na straně serveru (PHP, Perl nebo podobně). Vrátí dobře vytvořený dokument XML. Aby nedošlo k varování před zabezpečením prohlížeče, musí být umístěn ve stejné doméně, což způsobí, že stránka bude přístupná.přes HTTP nebo HTTPS.

    Přenos z javascriptu na serverový skript

    Funkce, která zpracovává odpověď (například processReqChange) musí být schopna dekomprimovat a zpracovat přijatý XML. Tento diagram ukazuje, jak jsou data přenášena z javascriptu na serverový skript a zpět. Princip je velmi jednoduchý. Vrácený dokument XML bude obsahovat jeden nebo více příkazů, které jsou prováděny postupně - generovat výstrahy, měnit hodnoty formuláře nebo spravovat DOM. To je prováděno funkcí processReqChange.

    Dostupné příkazy

    Celkem sedm různých příkazů, které lze vyvolat v knihovně objektů:
  • alert (message) - zobrazí varování javascript.
  • nastavit hodnotu (cíl, hodnota) - nastavit hodnotu pole formuláře s identifikátorem cíle.
  • setdefault (cíl) - resetujte hodnotu pole formuláře.
  • zaostření (cíl) - nastavte zaostření na pole formuláře.
  • setcontent (cíl, obsah) - nastavte interní HTML element HTML.
  • setstyle (cíl, hodnota vlastnosti) - nastaví styl prvku HTML.
  • setproperty (cíl, hodnota vlastnosti) - nastaví vlastnost elementu HTML.
  • V každém případě je cílem identifikátor odkazující na prvek stránky HTML. Dalšími hodnotami jsou text nebo HTML pro přidání dalších parametrů do funkce processReqChange.

    Generování odpovědi XML pomocí PHP

    Zde popsané funkce jsou určeny programátorům PHP, kteří nechtějí příliš mnoho vědět o javascriptu, protože po odeslání první žádosti není třeba další JScript. Soubor XML (generuje varování, například pro případ, když kliknete na níže uvedený odkaz vytvoří oknovarování JS s textem "hello world!") je důležitým prvním krokem v jakémkoli programovacím jazyce.
    [palec] http://hi-news.pp.ua/uploads/posts/2018-12/javascript-xmlhttprequest-storya-stvorennya-standarti-prikladi_604.jpeg [/palec]
    Následující reakce zatížení XML nějaký text v položce na stránce. V tomto případě bude výstup s identifikátorem 2 zobrazen v div. Namísto div můžete snadno nastavit obsah záhlaví, odstavce nebo buňky tabulky: example2 hello world.
    [palec] http://hi-news.pp.ua/uploads/posts/2018-12/javascript-xmlhttprequest-storya-stvorennya-standarti-prikladi_855.jpeg [/palec]
    Jak bylo uvedeno výše, můžete vložit HTML, ne text a vrátit dynamické, ne statické údaje. Následující požadavek XML je generován pomocí PHP pro vložení aktuálního data a času.
    [palec] http://hi-news.pp.ua/uploads/posts/2018-12/javascript-xmlhttprequest-storya-stvorennya-standarti-prikladi_676.jpeg [/palec]
    Internet Explorer mezipaměti Odpovězte na XML a použijte jej pro budoucí dotazy. To znamená, že výstup se nikdy nezmění. Další prohlížeče způsobují pokaždé nový požadavek. Všechny prohlížeče podporující DOM užívající backgroundColor, název stylu jako barvu pozadí, která je více „správné“ a funguje pouze v některých z nich. Hodnoty lze generovat "za běhu" pomocí PHP nebo jiného serveru. První příkaz nastaví vlastnost barvy pozadí v poli Hello world na žlutou (# ff0) a druhou na náhodnou (červenou, zelenou nebo modrou). Týmy se většinou týkají vytváření polí - nastavení /resetování hodnot v poli a nastavení zaostření. Jsou užitečné při kontrole formuláře na straně serveru v reálném čase, kdy je potřeba zobrazit data bez restartu.aktuální stránku.

    Vytváření XML pomocí javascriptu

    Existuje několik různých způsobů volání funkce loadXMLDoc. Například odkaz na formulář je bráno jako první parametr a pak dvě další proměnné. Úspěšné volání loadXMLDoc vrátí hodnotu "ano". onsubmit handler vrátí "lož". Tím, že zrušíte výchozí akci, představí událost, která by jinak způsobila formulář. Následující spuštění se provádí pomocí programu Ajax, takže prohlížeč nemusí načítat novou stránku. Neúspěšný volání na loadXMLDoc vrátí hodnotu "lož". obslužný program "onsubmit" se vrátí "true", což vede k tomu, že formulář je prezentován v normálním režimu. Další provedení se provádí pomocí nonAjaxTarget.html.
    [palec] http://hi-news.pp.ua/uploads/posts/2018-12/javascript-xmlhttprequest-storya-stvorennya-standarti-prikladi_567.jpeg [/palec]
    zabránilo funkci ukládání do mezipaměti hodnoty odpovědi cookie javascript xmlhttprequest. Některé prohlížeče budou ukládat do mezipaměti požadavek GET pomocí příkazu XHR, takže po prvním volání budou ze stejného skriptu restartována první odpověď. Chcete-li tento postup obejít, je třeba přidat náhodný řetězec nebo časové razítko požadavku, jak je vidět na fotografii níže:
    [palec] http://hi-news.pp.ua/uploads/posts/2018-12/javascript-xmlhttprequest- storya-stvorennya-standarti-prikladi_288.jpeg [/palec]
    Pokud skript vrací vždy stejnou odpověď na daných parametrů, pak se nemusíte starat o to, protože mezipaměť slouží k urychlení programu. Shrnutí, jak snadné je pracovat s Ajaxem pomocí této struktury, stačí pouze doplnit následujícíAkce:
  • Nastavte skript na straně serveru, který přijme parametry GET nebo POST nebo COOKIE a vrátí platný soubor XML.
  • Zadejte soubor JS xmlhttp.js na stránce.
  • Pro volání použijte javascript.
  • Inverzní volání v Ajaxu lze provést vytvořením instance objektu XHR v jazyce JScript. javascript XMLHttpRequest get může být použit k přímému volání serverových objektů, jako jsou stránky a webové služby. Budou ukládat nebo otáčet data. Ajax byl původně zkratkou pro asynchronní JS a XML. "Asynchronní" znamená, že několik událostí se vyskytuje naprosto nezávisle na sobě. Jakmile klient provede zpětné hlášení služby Ajax na server, nemusí čekat na odpověď, protože při zpracování žádosti může nadále používat webovou aplikaci. Poté server odpoví na klienta a podle potřeby jej zpracuje.

    Související publikace