AJAX arba Ajax yra asinchroninis „JavaScript“ir XML. Jis naudojamas keistis duomenimis su serveriu ir atnaujinti tinklalapio dalį neperkraunant viso tinklalapio kliento pusėje. Keičiantis ir atnaujinant duomenis visiškai nesikišama į esamo tinklalapio rodymą ir elgesį. „Ajax“taip pat laikoma technologijų, turinčių HTML, CSS, DOM ir „JavaScript“, grupei, kuri žymima, stilizuojama ir leidžia vartotojui sąveikauti su tinklalapyje esančia informacija. Šiame straipsnyje jis parodys, kaip parašyti paprastą programą „Ajax“veiksmais, naudojant veiksmus naudojant „Notepad ++“. Būtinos tam tikros pagrindinės žinios apie HTML, DOM, „JavaScript“ir vietinį žiniatinklio serverį arba nuotolinį žiniatinklio serverį. Šiame straipsnyje „WampServer“naudojamas bandymui.
Žingsniai
1 iš 2 metodas: kodavimas
Žingsnis 1. Paruoškite „Ajax“programos rašymo paveikslėlį
Išsaugokite paveikslėlį tame pačiame aplanke, kuriame išsaugosite savo html ir tekstinius failus, rodančius „Ajax“programą. Šiame straipsnyje katalogas „ProgramInAjax“yra nustatytas aplanke „wamp“, esančiame „www“kataloge, kuriame įdiegėte „WampServer“.
Žingsnis 2. Atidarykite bet kurį teksto rengyklę
„Notepad ++“šiame straipsnyje naudojama kaip teksto redaktorius.
Žingsnis 3. Sukurkite naują failą teksto rengyklėje
Įveskite:
Oi! Kur dingo geltona gėlė?
Čia galite įvesti viską, ką norite, html žymoje.
Žingsnis 4. Išsaugokite failą kaip tekstinį dokumentą pavadinimu „ajax-data.txt
” Tiesą sakant, galite pavadinti failą bet kokiu norimu pavadinimu, tačiau būtinai įveskite tą patį failo pavadinimą į kodavimą šioje eilutėje:
xmlhttp.open („GET“, „ajax-data.txt“, tiesa);
Tačiau antraštėje naudojama HTML žyma, kad ji atrodytų didesnė ir nematoma.
Žingsnis 5. Sukurkite naują tinklalapio failą
Šis failas skirtas HTML failui peržiūrėti Ajax programą žiniatinklio naršyklėje.
6 veiksmas. Nukopijuokite šį kodą:
Mano pirmoji „Ajax“programa Įdėkite „Ajax“kodą žemiau.Spustelėkite žemiau esantį mygtuką, kad gėlė išnyktų
Žingsnis 7. Išsaugokite failą
Meniu juostoje spustelėkite išsaugojimo mygtuką. Atidaromas langelis „Išsaugoti kaip“. Įveskite dokumento pavadinimą. Šiame straipsnyje failo pavadinimas yra „indeksas“.
Žingsnis 8. Spustelėkite išskleidžiamąją rodyklę, kad pasirinktumėte failo plėtinį
Lauke „Išsaugoti kaip tipą“spustelėkite išskleidžiamąją rodyklę, kad pasirinktumėte failo plėtinį.
Žingsnis 9. Pasirinkite „Hyper Text Markup Language file
” Įsitikinkite, kad skliausteliuose yra „html“. Pasirinkę „html“, spustelėkite išsaugoti.
Žingsnis 10. Išbandykite HTML failą žiniatinklio naršyklėje
Atidarykite tinklalapį žiniatinklio naršyklėje. Eikite į „Vykdyti“viršutinėje meniu juostoje. Spustelėkite jį ir pasirinkite „Paleisti„ Chrome ““arba bet kurią naršyklę, įdiegtą jūsų sistemoje. Šiame straipsnyje bandymams naudojama „Google Chrome“. „Notepad ++“gali būti įdiegtos kitos naršyklės. Galite pasirinkti mėgstamą naršyklę. Kitas variantas, galite spustelėti „WampServer“piktogramą užduočių juostose ekrano apačioje ir pasirinkti „Localhost“. Turėtumėte pamatyti savo katalogą ir spustelėti indekso failą.
Žingsnis 11. Norėdami patikrinti scenarijų, spustelėkite mygtuką po paveikslėliu
Žingsnis 12. Jūsų paskutinis tinklalapis
Tinklalapis turėtų būti atnaujintas informacija, kurią pradžioje įvedėte į tekstinį failą. Gėlė ir antraštė turėtų būti pakeisti nauja antrašte, pavadinta „Oi! Kur dingo geltona gėlė?"
2 metodas iš 2: kodo paaiškinimas
Žingsnis 1. Kūno skyrius
HTML tekste yra skyrius „div“ir vienas mygtukas. Šis skyrius bus naudojamas iš serverio grąžinamai informacijai rodyti. Spustelėjus mygtuką, iškviečiama funkcija „loadXMLDoc ()“.
Mano pirmoji „Ajax“programa Čia pateikiamas vaizdas, skirtas išbandyti „Ajax“programą.Spustelėkite žemiau esantį mygtuką, kad gėlė išnyktų
Čia eina mygtukas
Žingsnis 2. Galvos skyrius
Pagrindiniame HTML failo skyriuje yra scenarijaus žyma, kurioje yra funkcija „loadXMLDoc ()“.
Mano pirmoji „Ajax“programa Įdėkite „Ajax“kodą žemiau.
3 žingsnis. Daugiau paaiškinimų
Svarbiausias „Ajax“dalykas yra XMLHttpRequest objektas. Jis naudojamas keistis duomenimis su serveriu, o visos šiuolaikinės naršyklės palaiko objektą.
- Sintaksė sukurti XMLHttpRequest () objektą yra kintama = naujas XMLHttpRequest (); tačiau tuo pat metu sintaksė, skirta sukurti senas „Internet Explorer“versijas (IE5 ir IE6), kuri naudoja „ActiveX“objektą, yra kintama = nauja „ActiveXObject“(„Microsoft. XMLHTTP“);.
- Kad galėtų valdyti visas šiuolaikines naršykles, ji turi patikrinti, ar naršyklės palaiko XMLHttpRequest objektą. Jei taip, jis sukuria XMLHttpRequest objektą. Jei to nepadarysite, jis sukurs jam „ActiveX“objektą.
- Tada jis nusiųs užklausą serveriui. Bus naudojamas XMLHttpRequest objekto, vadinamo „open ()“ir „send ()“, metodas. xmlhttp.open („GET“, „ajax_info.txt“, tiesa); xmlhttp.send ();.
Patarimai
- Kita galimybė peržiūrėti rezultatą, galite atidaryti mėgstamą naršyklę ir įvesti „localhost/ProgramInAjax“žiniatinklio adreso juostoje, kad būtų rodomas tinklalapis. Turėtumėte matyti tinklalapį, jei HTML failą pavadinsite „index.html“.
- Darbo metu dažniau išsaugokite savo HTML failą. „Window“vartotojams vienu metu paspaudus „Ctrl“ir „S“sutaupysite daugiau laiko.
- Būtinai pridėkite išsaugotą HTML failą toje pačioje vietoje, kur yra jūsų vaizdo ir duomenų teksto failas.
- Pavadinus failą, į kodą įtraukiant šiuos pavadinimus skiriamos didžiosios ir mažosios raidės. Pavyzdžiui, „myImage“skiriasi nuo „MyImage“arba „myimage“.