AJAX eller Ajax er asynkron JavaScript og XML. Den brukes til å utveksle data med en server og oppdatere en del av en webside uten å laste inn hele websiden på klientsiden. Visningen og oppførselen til den eksisterende websiden blir ikke forstyrret i det hele tatt mens du utveksler og oppdaterer dataene. Ajax regnes også som en gruppe teknologier som har HTML, CSS, DOM og JavaScript som brukes til å merke, style og la brukeren samhandle med informasjonen på nettsiden. I denne artikkelen vil den vise deg hvordan du skriver et enkelt program i Ajax trinnvis ved hjelp av Notisblokk ++. Noen grunnleggende kunnskaper om HTML, DOM, JavaScript og en lokal webserver eller ekstern webserver er påkrevd. WampServer brukes i denne artikkelen til en test.
Trinn
Metode 1 av 2: Koding
Trinn 1. Forbered et bilde for å skrive et Ajax -program
Lagre bildet i den samme mappen der du vil lagre html- og tekstfilene som viser Ajax -programmet. I denne artikkelen er "ProgramInAjax" -katalogen satt opp i "wamp" -mappen under "www" -katalogen der du installerte WampServer.
Trinn 2. Åpne en hvilken som helst tekstredigerer
Notisblokk ++ brukes som tekstredigerer i denne artikkelen.
Trinn 3. Lag en ny fil i tekstredigereren
Skriv inn følgende:
Åh åh! Hvor ble den gule blomsten av?
Du kan skrive hva du vil inne i html -taggen.
Trinn 4. Lagre filen som et tekstdokument med navnet "ajax-data.txt
” Faktisk kan du navngi filen hva du vil, men sørg for å skrive inn det samme filnavnet for kodingen på denne linjen:
xmlhttp.open ("GET", "ajax-data.txt", true);
Imidlertid brukes HTML -taggen for overskriften slik at den ser større og mer usynlig ut.
Trinn 5. Lag en ny fil for en webside
Denne filen er for en HTML -fil for å vise Ajax -programmet i en nettleser.
Trinn 6. Kopier følgende kode:
Mitt første Ajax -program av meg Sett Ajax -koden nedenfor.Klikk på knappen nedenfor for å få blomsten til å forsvinne
Trinn 7. Lagre filen
Klikk på lagre -knappen på menylinjen. En "Lagre som" -boks er åpen. Skriv inn et navn på dokumentet. I denne artikkelen er navnet på filen "indeks".
Trinn 8. Klikk på rullegardinpilen for å velge filtypen
I feltet "Lagre som type" klikker du på rullegardinpilen for å velge filtypen.
Trinn 9. Velg “Hyper Text Markup Language file
” Sørg for at den har “html” inne i parentesen. Klikk på lagre etter å ha valgt "html."
Trinn 10. Test HTML -filen i en nettleser
Åpne nettsiden i en nettleser. Gå til "Kjør" på den øverste menylinjen. Klikk på den og velg "Start i Chrome" eller en hvilken som helst nettleser som er installert i systemet ditt. Google Chrome brukes til testing i denne artikkelen. Du kan ha noen andre nettlesere installert i Notisblokk ++. Du kan velge din favorittleser. Et annet alternativ, du kan klikke på WampServer -ikonet i oppgavelinjene nederst på skjermen og velge "Localhost." Du bør se katalogen din der og klikke på indeksfilen.
Trinn 11. Klikk på knappen under bildet for å teste skriptet
Trinn 12. Din siste webside
Websiden din bør oppdateres med informasjonen du skrev inn i tekstfilen i begynnelsen. Blomsten og overskriften bør byttes ut med den nye overskriften "Oh oh! Hvor ble det av den gule blomsten?"
Metode 2 av 2: Kode Forklaring
Trinn 1. Kroppsseksjonen
Brødteksten i HTML har delen "div" og en knapp. Denne delen vil bli brukt til å vise informasjonen som returneres fra serveren. Knappen kaller en funksjon som heter "loadXMLDoc ()", hvis den klikkes.
Mitt første Ajax -program av meg Et bilde går her for å teste Ajax -programmet.Klikk på knappen nedenfor for å få blomsten til å forsvinne
En knapp går her
Trinn 2. Hodeseksjonen
Hodeseksjonen i HTML -filen har en script -tag som inneholder “loadXMLDoc ()” -funksjonen.
Mitt første Ajax -program av meg Sett Ajax -koden nedenfor.
Trinn 3. Mer forklaring
Det viktigste med Ajax er XMLHttpRequest -objektet. Den brukes til å utveksle data med serveren, og alle moderne nettlesere støtter objektet.
- Syntaksen for å lage et XMLHttpRequest () -objekt er variabel = ny XMLHttpRequest (); men samtidig er syntaksen for å lage gamle versjoner av Internet Explorer (IE5 og IE6) som bruker et ActiveX -objekt variabel = nytt ActiveXObject ("Microsoft. XMLHTTP");.
- For å håndtere alle de moderne nettleserne må den sjekke om nettleserne støtter XMLHttpRequest -objektet. Hvis det gjør det, oppretter det et XMLHttpRequest -objekt. Hvis en ikke gjør det, vil det opprette et ActiveX -objekt for det.
- Deretter sender den en forespørsel til serveren. Metoden for XMLHttpRequest -objektet kalt "open ()" og "send ()" vil bli brukt. xmlhttp.open ("GET", "ajax_info.txt", true); xmlhttp.send ();.
Tips
- Et annet alternativ for å forhåndsvise resultatet, du kan åpne favorittleseren din og skrive "localhost/ProgramInAjax" i webadresselinjen for å vise nettsiden. Du bør kunne se nettsiden hvis du navngir HTML -filen til "index.html."
- Lagre html -filen oftere under arbeidet. Ved å trykke Ctrl og S samtidig for Windows -brukere vil du spare mer tid.
- Sørg for å legge til den lagrede HTML -filen på samme sted som bildet og datatekstfilen er.
- Når du navngir en fil, er det saksfølsomt når du legger disse navnene til koden. For eksempel er "myImage" forskjellig fra "MyImage" eller "myimage".
