Ajax jsou příklady. Ajax skripty

Internet poskytuje návštěvníkovi viditelnost každého zdroje umístěného na hostiteli v síti a prohlížeč - přístup přes síťové protokoly, mechanismy pro volání jednotlivých skriptů, odesílání / přijímání informací. Sada stránek, které tvoří stránku, má společný kořen - unikátní odkaz (název domény, jedinečná adresa uzlu).

Nezáleží na tom, zda zdroj reaguje na návštěvu staticky nebo dynamicky reaguje. I když typ a obsah stránky závisí na jakýchkoli podmínkách, nedílnou jednotkou komunikace mezi serverem a klientem (prohlížečem) je kompletní HTML dokument s kódem, obrázky, styly, soubory a dalším potřebným obsahem a okolím. Pokud je zde něco špatně, prohlížeč zobrazí vše, co "spravovalo" pro příjem, analýzu a spouštění.

Mnoho slibných technologií se objevilo po dlouhou dobu, ale byly nezasloužene zapomenuty nebo nebyly správně použity. První projekt AJAX (příklady použití objektu XMLHttpRequest) se objevil již před mnoha lety, ale úspěch a sláva přišla mnohem později.

Vše najednou nebo jen to, co potřebujete

V klasické verzi webu - jméno, adresa IP a odkaz (všechny jsou synonyma, což označuje stejný bod v internetovém prostoru). Skutečnost, že se jedná o hlavní stránku stránky - přemýšlela z vlastního podnětu o moderní "vývojáři", který si ani sám nevyptával: proč přesně? Proč je na webu hlavní stránka, ze které se můžete dostat k jiné? Tato možnost zjevně není ideální, tohle specifický obsah a skutečné funkce.

Jednoduše řečeno, pokud člověk potřebuje zubaře, jede na správnou adresu pro určitý účel, nikoliv do kuchyně pro chirurgický zákrok, a nikoliv do knihovny pro konzultace s terapeutem. Na místě, kde se někdo stane, uvidí, ale v plném rozsahu nedostane zubní polyklinikum. Maximálně, na které se návštěvník může spolehnout, je registr a směr (přesná cesta) k lékaři. A na místě (při příjezdu) můžete změnit lékaře i cíl.

Ale tady je to místo obvykle vždy načten v plné munice, při nakládání se nic nezmění, s přihlédnutím k času, který má někdo přišel ... Ale i v případě, kdy se jedná o skutečný život klinika, první návštěvě nového klienta dát dostatek informací strana , kontakty, a ... registru okno může být za předpokladu, že návštěva na místě byla provedena v době mimo hodin, jak je předepsáno lékařem není k dispozici, dočasné jmenování se provádí v jiném úřadě ...

Bod v internetovém prostoru

Klasická reakce zdroje internetového prostoru - v reakci na žádost návštěvníka o vydání stránky stránky (obvykle hlavní stránky) a pak dalších. Server webu také obsahuje obrázky, styly, skripty kódu jаvascript, PHP apod. Ne všechny soubory PHP vytvářejí stránky, některé z nich mohou reagovat na požadavky AJAX: přijímat, zpracovávat a odesílat informace.

Není skromné ​​napsat skript. Ovšem získání kontroly nad bodem v internetovém prostoru není možné určit, kdo a za jakou příležitost se adresoval, tj. Aktivoval toto jméno, adresu IP a odkaz. Jakákoli návštěvnost sítě se uskutečňuje programově, především prostřednictvím prohlížeče, ale také pomocí robotů různých původů a cílů prostřednictvím akcí jiných webů.

Skript, který přijal kontrolu, může vědět jen jistě: čas návštěvy, přes který prohlížeč přišel návštěvník, od kterého odkazu, z kterého IP adresy a přítomnosti cookies. Pouze ten může poskytnout informace o tom, jak vytvořit hlavní stránku, ale pouze pokud je tento návštěvník již zde. Ve všech ostatních situacích je možné generovat pouze obecnou odezvu serveru. AJAX-příklady, které lze snadno najít na internetu, by měly být pečlivě používány. Chyby v operaci (použití) objektu XMLHttpRequest jsou obtížné sledovat.

Společná reakce a soukromý dialog

Obecná odpověď serveru je normální stránka nazvaná hlavní stránka, která se nazývá index a začne s ním, tj. Odkazy na jiné přístupné stránky se liší od ní. Pokud však návštěvník zná jména těchto jiných stránek, budou ve svém pochopení neméně důležití, než ten, který určil developer. Tak to vypadá jako klasický model, vše najednou: obecný design a funkčnost, zaměřené na všechny návštěvníky.

Soukromý dialog je pokračováním předchozí návštěvy návštěvníka. Stránky již vědí, co dělá, co se zajímal, co stránky viděly a které si je uložily do paměti, napsal něco v prohlížeči cookies.

K serveru jsou dvě základní požadavky na stažení webu a práci s ním: POST a GET. Výsledkem dotazu je celá stránka. Na přijaté stránce může návštěvník aktivovat určité události konfigurované pro akce na určitých prvcích stránky.

Události prvků stránek

Prvek stránky může být tlačítkem pro nalezení informací, což znamená - obsahovat textové pole a najít, co návštěvník v něm napsal. U události může nastat položka nabídky, obrázek nebo textové pole. V každém případě bude spuštěna funkce jаvascript, která může provést požadavek AJAX následujícím způsobem:

InitXML (`../ Mphp / scSrvPhpWord.php? CTask = GoPage` + `cOwnerCode =` + Kótovací kód
+ `cSessionCode =` + cSessionCode + `cActiveItem =` + cActiveItem);

Funkce InitXML () je definována následovně (variabilní var scXHR by měla být popsána mimo funkci):

funkce InitXML (scURL) {

scXHR = null-

pokud (window.XMLHttpRequest)
{zkus
{scXHR = nový XMLHttpRequest () -
} úlovek (e) {}
} jinak
pokud (window.ActiveXObject)
{zkus
{scXHR = nový ActiveXObject (`Msxml2.XMLHTTP`) -
} úlovek (e)
{zkus
{scXHR = nový ActiveXObject (`Microsoft.XMLHTTP`) -
} úlovek (e) {}
}}
}}
pokud (scXHR)
{{
scXHR.open (`GET`, scURL) -
scXHR.onreadystatechange = WaitReplySC-
scXHR.send (null) -
} -
}}

Tato funkce načte adresu URL a iniciuje požadavek na ni. Asynchronní odpověď přijde, jakmile splní skript zadaný v URL (v tomto případě - scSrvPhpWord.php, který se nachází ve složce ../Mphp/ vzhledem ke kořenu místa), a začne WaitReplySC () funkce, která jde do vstupu na serveru XML odezvy, včetně názvu a obsahu.

Odpověď serveru

Samotný server je PHP skript - program, který začíná instalací základních podmínek, stahováním nezbytných zařízení, předběžným školením, které závisí na cílech vývojáře:

jmenný prostor PhpOffice PhpWord-

ini_set (`display_errors`, 1) -
error_reporting (E_ALL ^ ​​E_NOTICE) -

ignore_user_abort (true) -
set_time_limit (12) -

použijte PhpOffice PhpWord MphpObj scDocuments-

require_once `PhpOffice / PhpWord / Autoloader.php`-
PhpOffice PhpWord Autoloader :: registru ();

Předvedený start označuje značku všech chyb, zakáže zastavení skriptu při odpojení uživatele a nastaví mezní dobu pro případ smyčky - 12 sekund. Dále je knihovna PhpOffice PhpWord připojena k práci s dokumenty * .docx.

Jak je uvedeno výše AJAX-výzva ( `... cTask = GoPage` + `cOwnerCode =` + cOwnerCode + `cSessionCode =` + cSessionCode + `cActiveItem =` + cActiveItem) - to GET-čtyři proměnné, které nemusí být měli byste zkontrolovat jejich aktuální dostupnost:

$ cTask = (isset ($ _GET [`cTask`])))? $ _GET [`cTask`]: `` -
$ cOwnerCode = (isset ($ _ GET [`cOwnerCode`])))? $ _GET [`cOwnerCode`]: `` -
$ cSessionCode = (isset ($ _GET [`cSessionCode`))))? $ _GET [`cSessionCode`]: `` -
$ cActiveItem = (isset ($ _GET [`cActiveItem`])))? $ _GET [`cActiveItem`]: ``;

Po provedení přípravných akcí se skript rozhodne:

přepínač ($ cTask) {

případ "GoPage": // (toto je volání, když je stránka zpočátku načtena nebo obnovena)

$ cOwnerCode = `cOwner`-
$ cSessionCode = `cSession`-
$ cContents = `cContents`-
$ cStatus = `cStatus`-
$ cHtml = iconv (`UTF-8`, `CP1251`, `kódování prvků`) -
$ cActiveItem = iconv (`UTF-8`, `CP1251`, `proměnné hodnoty`);

$ CReply = "scSrvRM | GoPage | set | {$ cOwnerCode}` {$ cSessionCode} | {$ cContents} `{$ cStatus} | $ {} cHTML | {$ cActiveItem}" -

přestávka;

}}

a poslední část scénáře:

záhlaví ("Obsahový typ: text / xml-accept-charset = utf-8") -
záhlaví ("Cache-Control: no-cache") -
echo `$ cReply = iconv (`CP1251`, `UTF-8`, $ cReply) - // konverze z `CP1251` na `UTF-8`
echo $ cReply;

Přijímání odpovědi od klienta

Na stránce stažené do prohlížeče bylo zjištěno, že jakmile server připraví odpověď, bude zpracován funkcí WaitReplySC:

funkce WaitReplySC () {

zkuste {

pokud (scXHR.readyState == 4) {
pokud (scXHR.status == 200) {// zpracovat odpověď

var TestReply = scXHR.responseText-

pokud ((TestReply.indexOf (`Parse error`)> 0) ||
(TestReply.indexOf (`Upozornění`)> 0)) upozornění (scXHR.responseText) -

var cData = scXHR.responseText-
var aData = cData.split (`|`) -

var cCmd = aData [1] -
var cPos = aData [2] -
var aOwnerSession = aData [3] .split (```) -
cOwnerCode = aOwnerSession [0] -
var cSessionCode = aOwnerSession [1] -
var aContentStatus = aData [4] .split (```) -
var cContent = aContentStatus [0] -
var cStatus = aContentStatus [1] -
var cHTML = aData [5] - // odpověď HTML serveru
var cVarValues ​​= aData [6] - // hodnoty proměnných pro formuláře

přepínač (cCmd) {

případ "GoPage":

var dTestLine = document.getElementById (`scTestLine`) -
dTestLine.innerHTML = `Odpověď = [` + cOwnerCode + `,`
+ cSessionCode + `,`
+ cContent + `,`
+ cStatus + `,`
+ cHTML + `,`
+ cVarValues ​​+ `]` -

break-
}}

} else {
document.getElementById (`scAreaStatus`) innerHTML = "Chyba !!!"
}}
}}
} úlovek (e) {}

}}

Při použití těchto příkladů AJAX se tedy při načítání stránky v prohlížeči dostáváme (v prvku scTestLine):

Odpověď = [cOwner, cSession, cContents, cStatus, kódování prvků, proměnné hodnoty]

O předloženém kódu, jQuery a WordPress

Stránka v prohlížeči a text skriptu jsou zapsány v kódování UTF-8, proto se funkce iconv () používá k převodu ruských písmen. V opačném případě je kostra prezentovaného kódu velmi jednoduchá a může se snadno opakovat pro jakýkoli konkrétní účel.

Pouze zpracování odezvy serveru ve funkci WaitReplySC () a skutečný kód skriptu, který tvoří tuto odpověď, mohou být změněny. Volání funkce InitXML (pro konkrétní scURL a její odpovídající data) jsou umístěny v obslužných jednotkách událostí na prvcích stránky a určují sémantické zatížení těchto prvků.

Prezentované příklady AJAX jsou zaměřeny na "ruční" použití technologie.

V různých popisovaných systémech správy sítě (SMS) jsou příležitosti prezentovány různými způsoby, obvykle ve stylu jedné nebo druhé specifičnosti. Například funkce jQuery AJAX jsou implementovány voláním funkcí jQuery.ajax () nebo vyšší úrovně: jQuery.get () a jQuery.post (). Parametr je předán url a nastavení (sada párů klíč-hodnota). jQuery.ajax () vrací objekt XMLHttpRequest.

Pro sledování výsledku nabízí jQuery funkční metody: XHR.done () - úspěšné dokončení dotazu. XHR.fail () - zpracování chyb.

Metoda jqXHR.done () je alternativou k obsluze pro úspěšné dokončení požadavku AJAX. Nahrazuje zastaralou metodu jqXHR.success ().

Podobně, použití technologie AJAX na WordPress. Zde je vše již zavedeno do samotného systému správy stránek, stačí použít navrhované návrhy. Dokumentaci se nabízí podrobný popis.

Použití AJAX v zásadě závisí na vybrané sadě nástrojů, ačkoli ruční verze může být aplikována paralelně nebo vedle zvoleného systému řízení webu konkrétní verze jQuery. Ta je užitečná pro samostatné zpracování, protože téměř všechny moderní SMS používají, ale každý ve svém vlastním způsobem.

Klasický příklad aplikace

Jednoduchá a příkladná aplikace AJAX je nákupní košík v internetovém obchodě. Stránky obchodu jsou vždy plné zboží, i když ve skutečnosti nemusí být. Překládka obvykle trvá značnou dobu, ale když návštěvník vybere produkt, se může vždy jen vzdát na něm nebo změnit vyvolenou, že na místě je vždy žádoucí zobrazovat rychle.

Obvykle se jedná o koš a známky u vybraného zboží. Bez použití AJAX je dynamická změna těchto prvků problematická.

AJAX skripty, které implementují mechanismy přidávání / odebírání zboží do koše, se v mnoha SMS stávají de facto.

Pro normální přenos dat přes AJAX lze formulář provádět obvyklým způsobem (pro zadání jména a hesla):

Zde je popisovač:

funkce scfWelcomeGo () {

var cName = document.fWelcome.cName.value-
var cPass = document.fWelcome.cPass.value-

InitXML (`../ Mphp / scSrvPhpWord.php? CTask = CheckWelcome`
+ `cName =` + cName
+ `cPass =` ​​+ cPass) -

}}

pošle na server ověření zadaného jména a hesla návštěvníka. Skript kontroluje přítomnost informací přijatých v tabulce uživatelů a odešle zpět odpověď, na základě které příslušný skript na stránce zobrazí hlášení (provádí akci) pro registrovaného návštěvníka nebo informuje o tom, že takový uživatel neexistuje a je nutné dokončit registrační proceduru.