Kuidas programmeerida Ajaxis (koos piltidega)

Sisukord:

Kuidas programmeerida Ajaxis (koos piltidega)
Kuidas programmeerida Ajaxis (koos piltidega)

Video: Kuidas programmeerida Ajaxis (koos piltidega)

Video: Kuidas programmeerida Ajaxis (koos piltidega)
Video: Что посоветуешь для изучения АССЕМБЛЕР? ASSEMBLER. DOS/Windows #ityoutubersru #itubeteam 2024, Aprill
Anonim

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

3929304 1
3929304 1

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.

3929304 2
3929304 2

Samm 2. Avage mis tahes tekstiredaktor

Selles artiklis kasutatakse tekstiredaktorina Notepad ++.

3929304 3
3929304 3

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.

3929304 4
3929304 4

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.

3929304 5
3929304 5

Samm 5. Looge veebilehe jaoks uus fail

See fail on mõeldud HTML -failile Ajaxi programmi vaatamiseks veebibrauseris.

3929304 6
3929304 6

Samm 6. Kopeerige järgmine kood:

  Minu esimene Ajaxi programm minu poolt Pange Ajaxi kood alla.  


Lille kadumiseks klõpsake alloleval nupul

3929304 7
3929304 7

Samm 7. Salvestage fail

Klõpsake menüüribal nuppu Salvesta. Avaneb kast „Salvesta kui”. Sisestage oma dokumendile nimi. Selles artiklis on faili nimi "indeks".

3929304 8
3929304 8

Samm 8. Faililaiendi valimiseks klõpsake rippmenüü noolt

Klõpsake väljal „Salvesta tüübina” faililaiendi valimiseks rippmenüü noolt.

3929304 9
3929304 9

Samm 9. Valige „Hyper Text Markup Language file

” Veenduge, et sulgudes oleks html. Pärast „html” valimist klõpsake nuppu Salvesta.

3929304 10
3929304 10

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

3929304 12
3929304 12

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

3929304 13
3929304 13

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

3929304 14
3929304 14

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

Soovitan: