Kaip programuoti „Ajax“(su nuotraukomis)

Turinys:

Kaip programuoti „Ajax“(su nuotraukomis)
Kaip programuoti „Ajax“(su nuotraukomis)

Video: Kaip programuoti „Ajax“(su nuotraukomis)

Video: Kaip programuoti „Ajax“(su nuotraukomis)
Video: NASM Installation Windows 10 | Run Assembly Program | ADD two numbers | How to Install NASM Cs401 2024, Kovas
Anonim

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

3929304 1
3929304 1

Ž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“.

3929304 2
3929304 2

Žingsnis 2. Atidarykite bet kurį teksto rengyklę

„Notepad ++“šiame straipsnyje naudojama kaip teksto redaktorius.

3929304 3
3929304 3

Žingsnis 3. Sukurkite naują failą teksto rengyklėje

Įveskite:


Oi! Kur dingo geltona gėlė?

Čia galite įvesti viską, ką norite, html žymoje.

3929304 4
3929304 4

Ž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.

3929304 5
3929304 5

Žingsnis 5. Sukurkite naują tinklalapio failą

Šis failas skirtas HTML failui peržiūrėti Ajax programą žiniatinklio naršyklėje.

3929304 6
3929304 6

6 veiksmas. Nukopijuokite šį kodą:

  Mano pirmoji „Ajax“programa Įdėkite „Ajax“kodą žemiau.  


Spustelėkite žemiau esantį mygtuką, kad gėlė išnyktų

3929304 7
3929304 7

Ž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“.

3929304 8
3929304 8

Ž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į.

3929304 9
3929304 9

Žingsnis 9. Pasirinkite „Hyper Text Markup Language file

” Įsitikinkite, kad skliausteliuose yra „html“. Pasirinkę „html“, spustelėkite išsaugoti.

3929304 10
3929304 10

Ž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

3929304 12
3929304 12

Ž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

3929304 13
3929304 13

Ž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

3929304 14
3929304 14

Ž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“.

Rekomenduojamas: