AJAX või Ajax on asünkroonne JavaScript ja XML. Seda kasutatakse serveriga andmete vahetamiseks ja veebilehe osa värskendamiseks ilma kogu veebilehe uuesti laadimiseta kliendipoolsel küljel. Olemasoleva veebilehe kuvamist ja käitumist ei segata andmete vahetamise ja värskendamise ajal üldse. Ajaxit peetakse ka tehnoloogiate rühmaks, millel on HTML, CSS, DOM ja JavaScript, mida kasutatakse märgistamiseks, stiilimiseks ja võimaldamiseks kasutajal veebisaidil oleva teabega suhelda. Selles artiklis näidatakse teile, kuidas kirjutada lihtsat programmi Ajaxi sammude kaupa Notepad ++ abil. Vaja on mõningaid põhiteadmisi HTML -i, DOM -i, JavaScripti ja kohaliku veebiserveri või kaugveebiserveri kohta. WampServerit kasutatakse selles artiklis testimiseks.
Sammud
Meetod 1: 2: kodeerimine
Samm 1. Valmistage ette pilt Ajaxi programmi kirjutamiseks
Salvestage pilt samasse kausta, kuhu salvestate HTML -i ja Ajaxi programmi kuvavad tekstifailid. Selles artiklis on kataloog “ProgramInAjax” seadistatud kausta “wamp” kataloogi “www” alla, kuhu installisite WampServeri.
Samm 2. Avage mis tahes tekstiredaktor
Selles artiklis kasutatakse tekstiredaktorina Notepad ++.
Samm 3. Looge tekstiredaktoris uus fail
Sisestage järgmine:
Oh oh! Kuhu kadus kollane lill?
Võite html -märgendi sisse kirjutada kõik, mida soovite.
Samm 4. Salvestage fail tekstidokumendina nimega “ajax-data.txt
” Tegelikult saate failile nime anda, mida soovite, kuid veenduge, et sisestate selle rea kodeeringusse sama failinime:
xmlhttp.open ("GET", "ajax-data.txt", tõsi);
Päise jaoks kasutatakse siiski HTML -märgendit, nii et see tundub suurem ja nähtamatum.
Samm 5. Looge veebilehe jaoks uus fail
See fail on mõeldud HTML -failile Ajaxi programmi vaatamiseks veebibrauseris.
Samm 6. Kopeerige järgmine kood:
Minu esimene Ajaxi programm minu poolt Pange Ajaxi kood alla.Lille kadumiseks klõpsake alloleval nupul
Samm 7. Salvestage fail
Klõpsake menüüribal nuppu Salvesta. Avaneb kast „Salvesta kui”. Sisestage oma dokumendile nimi. Selles artiklis on faili nimi "indeks".
Samm 8. Faililaiendi valimiseks klõpsake rippmenüü noolt
Klõpsake väljal „Salvesta tüübina” faililaiendi valimiseks rippmenüü noolt.
Samm 9. Valige „Hyper Text Markup Language file
” Veenduge, et sulgudes oleks html. Pärast „html” valimist klõpsake nuppu Salvesta.
Samm 10. Testige HTML -faili veebibrauseris
Avage veebileht veebibrauseris. Minge ülemisele menüüribale "Käivita". Klõpsake seda ja valige „Käivita Chrome'is” või mõni teie süsteemi installitud brauser. Selles artiklis kasutatakse testimiseks Google Chrome'i. Teil võib olla mõni muu brauser installitud rakendusse Notepad ++. Saate valida oma lemmikbrauseri. Teine võimalus on klõpsata ekraani allosas asuval tegumiribal ikoonil WampServer ja valida „Localhost”. Peaksite nägema oma kataloogi ja klõpsama indeksfailil.
Samm 11. Skripti testimiseks klõpsake pildi all olevat nuppu
Samm 12. Teie viimane veebileht
Teie veebisaiti tuleks värskendada teabe abil, mille sisestasite tekstifaili alguses. Lill ja päis tuleks asendada uue päisega nimega “Oh oh! Kuhu kadus kollane lill?"
Meetod 2/2: koodi selgitus
Samm 1. Kehaosa
HTML -i põhiosas on jaotis „div” ja üks nupp. Seda jaotist kasutatakse serverist tagastatud teabe kuvamiseks. Nupp kutsub funktsiooni „loadXMLDoc ()”, kui sellel klõpsatakse.
Minu esimene Ajaxi programm minu poolt Pilt läheb siia Ajaxi programmi testimiseks.Lille kadumiseks klõpsake alloleval nupul
Siia läheb nupp
Samm 2. Peaosa
HTML -faili päises on skriptisilt, mis sisaldab funktsiooni „loadXMLDoc ()”.
Minu esimene Ajaxi programm minu poolt Pange Ajaxi kood alla.Samm 3. Täpsem selgitus
Ajaxi kõige olulisem asi on XMLHttpRequest objekt. Seda kasutatakse serveriga andmete vahetamiseks ja kõik kaasaegsed brauserid toetavad objekti.
- XMLHttpRequest () objekti loomise süntaks on muutuja = uus XMLHttpRequest (); kuid samal ajal on ActiveX -objekti kasutavate Internet Exploreri (IE5 ja IE6) vanade versioonide loomise süntaks muutuja = uus ActiveXObject ("Microsoft. XMLHTTP");.
- Kõigi kaasaegsete brauserite haldamiseks peab ta kontrollima, kas brauserid toetavad objekti XMLHttpRequest. Kui see juhtub, loob see XMLHttpRequest objekti. Kui seda ei tehta, loob see selle jaoks ActiveX -objekti.
- Seejärel saadab see serverile päringu. Kasutatakse XMLHttpRequest objekti meetodit nimega “open ()” ja “send ()”. xmlhttp.open ("GET", "ajax_info.txt", tõsi); xmlhttp.send ();.
Näpunäiteid
- Teine võimalus tulemuse eelvaateks võite avada oma lemmikbrauseri ja sisestada veebilehe kuvamiseks veebiaadressiribale „localhost/ProgramInAjax”. Kui nimetate oma HTML -faili nimeks „index.html”, peaksite veebisaiti nägema.
- Salvestage oma töö ajal sagedamini oma html -faili. Windowsi kasutajatele üheaegselt Ctrl ja S vajutamine säästab rohkem aega.
- Lisage kindlasti oma salvestatud HTML -fail samasse kohta, kus on teie pildi ja andmete tekstifail.
- Failile nime pannes on nende nimede koodile lisamisel tõstutundlik. Näiteks „myImage” erineb „myImage” või „myimage”.