AJAX ili Ajax su asinkroni JavaScript i XML. Koristi se za razmjenu podataka s poslužiteljem i ažuriranje dijela web stranice bez ponovnog učitavanja cijele web stranice na strani klijenta. Prikaz i ponašanje postojeće web stranice uopće se ne ometaju tijekom razmjene i ažuriranja podataka. Ajax se također smatra skupinom tehnologija koja ima HTML, CSS, DOM i JavaScript koje se koriste za označavanje, oblikovanje i omogućavanje korisniku interakcije s podacima na web stranici. U ovom će vam članku pokazati kako napisati jednostavan program u Ajax -ovim koracima korak po korak pomoću Notepada ++. Potrebno je osnovno znanje o HTML -u, DOM -u, JavaScript -u te lokalnom web -poslužitelju ili udaljenom web -poslužitelju. WampServer se u ovom članku koristi za test.
Koraci
Metoda 1 od 2: Kodiranje
Korak 1. Pripremite sliku za pisanje Ajax programa
Spremite sliku u istu mapu u koju ćete spremiti svoje html i tekstualne datoteke koje prikazuju program Ajax. U ovom članku, direktorij “ProgramInAjax” postavljen je unutar mape “wamp” ispod direktorija “www” u koji ste instalirali WampServer.
Korak 2. Otvorite bilo koji uređivač teksta
Notepad ++ koristi se kao uređivač teksta u ovom članku.
Korak 3. Izradite novu datoteku u uređivaču teksta
Upišite sljedeće:
Oh oh! Gdje je nestao žuti cvijet?
Možete unijeti što god želite unutar html oznake ovdje.
Korak 4. Spremite datoteku kao tekstualni dokument s imenom “ajax-data.txt
” Zapravo, datoteci možete dati ime kako god želite, ali svakako unesite isti naziv datoteke za kodiranje u ovom retku:
xmlhttp.open ("GET", "ajax-data.txt", istina);
Međutim, HTML oznaka se koristi za zaglavlje tako da izgleda veće i nevidljivije.
Korak 5. Izradite novu datoteku za web stranicu
Ova datoteka služi za HTML datoteku za pregled Ajax programa u web pregledniku.
Korak 6. Kopirajte sljedeći kôd:
Moj prvi Ajax program od mene Ispod stavite Ajax kod.Pritisnite donji gumb da cvijet nestane
Korak 7. Spremite datoteku
Pritisnite gumb za spremanje na traci izbornika. Otvoren je okvir "Spremi kao". Unesite naziv svog dokumenta. U ovom članku naziv datoteke je "indeks".
Korak 8. Pritisnite strelicu padajućeg izbornika za odabir nastavka datoteke
U polju "Spremi kao vrstu" kliknite strelicu padajućeg izbornika za odabir nastavka datoteke.
Korak 9. Odaberite “Jezična datoteka za označavanje hiperteksta
” Uvjerite se da unutar zagrada ima "html". Kliknite Spremi nakon što odaberete "html".
Korak 10. Testirajte HTML datoteku u web pregledniku
Otvorite web stranicu u web pregledniku. Idite na “Run” na gornjoj traci izbornika. Pritisnite ga i odaberite "Pokreni u Chromeu" ili bilo koji preglednik koji je instaliran u vašem sustavu. Za testiranje u ovom članku koristi se Google Chrome. Možda imate neke druge preglednike instalirane u programu Notepad ++. Možete odabrati svoj omiljeni preglednik. Druga mogućnost, možete kliknuti ikonu WampServer na programskim trakama pri dnu zaslona i odabrati "Localhost". Tamo biste trebali vidjeti svoj direktorij i kliknuti datoteku indeksa.
Korak 11. Pritisnite gumb ispod slike da biste testirali skriptu
Korak 12. Vaša posljednja web stranica
Vaša web stranica trebala bi biti osvježena podacima koje ste unijeli u tekstualnu datoteku na početku. Cvijet i zaglavlje treba zamijeniti novim zaglavljem pod nazivom „Oh oh! Gdje je nestao žuti cvijet?"
Metoda 2 od 2: Objašnjenje koda
Korak 1. Dio tijela
Tijelo HTML -a ima odjeljak "div" i jedan gumb. Ovaj odjeljak će se koristiti za prikaz informacija vraćenih s poslužitelja. Gumb poziva funkciju pod nazivom "loadXMLDoc ()", ako se na nju klikne.
Moj prvi Ajax program od mene Ovdje ide slika za testiranje Ajax programa.Pritisnite donji gumb da cvijet nestane
Ovdje ide gumb
Korak 2. Odjeljak glave
Zaglavlje HTML datoteke ima oznaku skripte koja sadrži funkciju "loadXMLDoc ()".
Moj prvi Ajax program od mene Ispod stavite Ajax kod.
Korak 3. Više objašnjenja
Najvažnija stvar Ajaxa je objekt XMLHttpRequest. Koristi se za razmjenu podataka sa poslužiteljem, a svi moderni preglednici podržavaju objekt.
- Sintaksa za stvaranje objekta XMLHttpRequest () je varijabla = novi XMLHttpRequest (); ali istovremeno je sintaksa za stvaranje starih verzija Internet Explorera (IE5 i IE6) koja koristi ActiveX objekt varijabla = novi ActiveXObject ("Microsoft. XMLHTTP");.
- Kako bi mogli rukovati svim modernim preglednicima, potrebno je provjeriti podržavaju li preglednici objekt XMLHttpRequest. Ako to učini, stvara objekt XMLHttpRequest. Ako to ne učinite, stvorit će za njega ActiveX objekt.
- Zatim će poslati zahtjev poslužitelju. Koristit će se metoda objekta XMLHttpRequest pod nazivom “open ()” i “send ()”. xmlhttp.open ("GET", "ajax_info.txt", istina); xmlhttp.send ();.
Savjeti
- Druga mogućnost za pregled rezultata, možete otvoriti svoj omiljeni preglednik i upisati "localhost/ProgramInAjax" u traku web adrese za prikaz web stranice. Web stranicu biste trebali moći vidjeti ako svojoj HTML datoteci date ime "index.html".
- Tijekom rada češće spremajte html datoteku. Istovremeni pritisak Ctrl i S za korisnike Windowsa uštedjet će više vremena.
- Svakako dodajte spremljenu HTML datoteku na isto mjesto gdje se nalaze vaša slikovna datoteka i tekstualna datoteka.
- Kada imenujete datoteku, razlikuju se velika i mala slova kada ta imena dodate u kôd. Na primjer, "myImage" se razlikuje od "MyImage" ili "myimage".
