AJAX alebo Ajax je asynchrónny JavaScript a XML. Používa sa na výmenu údajov so serverom a aktualizáciu časti webovej stránky bez opätovného načítania celej webovej stránky na strane klienta. Pri výmene a aktualizácii údajov nie je vôbec narušené zobrazenie a správanie existujúcej webovej stránky. Ajax je tiež považovaný za skupinu technológií, ktoré majú HTML, CSS, DOM a JavaScript, ktoré sa používajú na označenie, štýl a umožňujú používateľovi interagovať s informáciami na webovej stránke. V tomto článku vám ukáže, ako napísať jednoduchý program v krokoch Ajaxu krok za krokom pomocou programu Poznámkový blok ++. Vyžadujú sa určité základné znalosti HTML, DOM, JavaScript a lokálneho webového servera alebo vzdialeného webového servera. WampServer sa v tomto článku používa na testovanie.
Kroky
Metóda 1 z 2: Kódovanie
Krok 1. Pripravte si obrázok na napísanie programu Ajax
Uložte obrázok do rovnakého priečinka, kam uložíte svoje html a textové súbory s programom Ajax. V tomto článku je adresár „ProgramInAjax“nastavený v priečinku „wamp“v adresári „www“, do ktorého ste nainštalovali WampServer.
Krok 2. Otvorte ľubovoľný textový editor
V tomto článku sa ako textový editor používa program Poznámkový blok ++.
Krok 3. Vytvorte nový súbor v textovom editore
Napíšte nasledujúce:
Oh oh! Kam zmizol žltý kvet?
Do tagu html môžete písať, čo chcete.
Krok 4. Uložte súbor ako textový dokument s názvom „ajax-data.txt
” V skutočnosti môžete súbor pomenovať ľubovoľne, ale uistite sa, že do kódovania v tomto riadku zadáte rovnaký názov súboru:
xmlhttp.open ("GET", "ajax-data.txt", true);
HTML tagy sa však používajú v hlavičke, aby vyzeral väčší a neviditeľnejší.
Krok 5. Vytvorte nový súbor pre webovú stránku
Tento súbor má súbor HTML zobrazovať program Ajax vo webovom prehliadači.
Krok 6. Skopírujte nasledujúci kód:
Môj prvý program Ajax odo mňa Nižšie zadajte kód Ajaxu.Kliknutím na tlačidlo nižšie kvetina zmizne
Krok 7. Uložte súbor
Kliknite na tlačidlo uložiť na paneli s ponukami. Je otvorené pole „Uložiť ako“. Zadajte názov dokumentu. V tomto článku je názov súboru „index“.
Krok 8. Kliknutím na rozbaľovaciu šípku vyberte príponu súboru
V poli „Uložiť ako typ“kliknite na rozbaľovaciu šípku a vyberte príponu súboru.
Krok 9. Vyberte „Súbor jazyka Hyper Text Markup Language
” Zaistite, aby mal v zátvorke „html“. Po výbere „html“kliknite na tlačidlo Uložiť.
Krok 10. Otestujte súbor HTML vo webovom prehliadači
Otvorte webovú stránku vo webovom prehliadači. V hornom paneli s ponukou prejdite na položku „Spustiť“. Kliknite na ňu a vyberte možnosť „Spustiť v prehliadači Chrome“alebo ktorýkoľvek prehliadač, ktorý je nainštalovaný vo vašom systéme. V tomto článku sa na testovanie používa prehliadač Google Chrome. V programe Notepad ++ môžete mať nainštalované aj ďalšie prehliadače. Môžete si vybrať svoj obľúbený prehliadač. Ďalšou možnosťou je kliknúť na ikonu WampServer na paneloch úloh v spodnej časti obrazovky a vybrať položku „Localhost“. Mali by ste tam vidieť svoj adresár a kliknúť na indexový súbor.
Krok 11. Skript otestujte kliknutím na tlačidlo pod obrázkom
Krok 12. Vaša konečná webová stránka
Vaša webová stránka by mala byť aktualizovaná informáciami, ktoré ste zadali do textového súboru na začiatku. Kvet a záhlavie by mali byť nahradené novou hlavičkou s názvom „Ach, oh! Kam zmizol žltý kvet? “
Metóda 2 z 2: Vysvetlenie kódu
Krok 1. Časť tela
Telo HTML má sekciu „div“a jedno tlačidlo. Táto sekcia bude použitá na zobrazenie informácií vrátených zo servera. Ak na tlačidlo kliknete, vyvolá funkciu s názvom „loadXMLDoc ()“.
Môj prvý program Ajax odo mňa Tu ide obrázok, ktorý testuje program Ajax.Kliknutím na tlačidlo nižšie kvetina zmizne
Tu ide tlačidlo
Krok 2. Sekcia hlavy
Hlavná časť súboru HTML má značku skriptu, ktorá obsahuje funkciu „loadXMLDoc ()“.
Môj prvý program Ajax odo mňa Nižšie zadajte kód Ajaxu.
Krok 3. Ďalšie vysvetlenie
Najdôležitejšou vecou Ajaxu je objekt XMLHttpRequest. Slúži na výmenu údajov so serverom a objekt podporujú všetky moderné prehliadače.
- Syntax na vytvorenie objektu XMLHttpRequest () je premenná = new XMLHttpRequest (); ale zároveň je syntax na vytváranie starých verzií programu Internet Explorer (IE5 a IE6), ktorá používa objekt ActiveX, premenná = nový ActiveXObject ("Microsoft. XMLHTTP");.
- Aby zvládol všetky moderné prehliadače, musí skontrolovať, či prehliadače podporujú objekt XMLHttpRequest. Ak áno, vytvorí sa objekt XMLHttpRequest. Ak to neurobí, vytvorí pre neho objekt ActiveX.
- Potom odošle požiadavku na server. Použije sa metóda objektu XMLHttpRequest s názvom „open ()“a „send ()“. xmlhttp.open ("GET", "ajax_info.txt", true); xmlhttp.send ();.
Tipy
- Ďalšou možnosťou na zobrazenie náhľadu výsledku je otvorenie obľúbeného prehliadača a zadanie výrazu „localhost/ProgramInAjax“do panela s webovou adresou na zobrazenie webovej stránky. Webovú stránku by ste mali vidieť, ak pomenujete svoj súbor HTML na „index.html“.
- Súbor html si počas práce ukladajte častejšie. Súčasné stlačenie Ctrl a S pre užívateľov Window ušetrí viac času.
- Uložený súbor HTML nezabudnite pridať na rovnaké miesto, kde sa nachádza textový súbor s obrázkom a údajmi.
- Keď pomenujete súbor, pri pridávaní týchto názvov do kódu sa rozlišujú malé a veľké písmená. Napríklad „myImage“sa líši od „MyImage“alebo „myimage“.
