Sådan programmeres i Ajax (med billeder)

Indholdsfortegnelse:

Sådan programmeres i Ajax (med billeder)
Sådan programmeres i Ajax (med billeder)

Video: Sådan programmeres i Ajax (med billeder)

Video: Sådan programmeres i Ajax (med billeder)
Video: Understanding and Troubleshooting Windows Search and Indexing 2024, April
Anonim

AJAX eller Ajax er asynkron JavaScript og XML. Det bruges til at udveksle data med en server og opdatere en del af en webside uden at genindlæse hele websiden på klientsiden. Visningen og adfærden på den eksisterende webside bliver ikke forstyrret overhovedet, mens data udveksles og opdateres. Ajax betragtes også som en gruppe teknologier, der har HTML, CSS, DOM og JavaScript, der bruges til at markere, style og give brugeren mulighed for at interagere med oplysningerne på websiden. I denne artikel viser det dig, hvordan du skriver et simpelt program i Ajax trin for trin ved hjælp af Notesblok ++. En vis grundlæggende viden om HTML, DOM, JavaScript og en lokal webserver eller fjernwebserver er påkrævet. WampServer bruges i denne artikel til en test.

Trin

Metode 1 af 2: Kodning

3929304 1
3929304 1

Trin 1. Forbered et billede til at skrive et Ajax -program

Gem billedet i den samme mappe, hvor du vil gemme dine html- og tekstfiler, der viser Ajax -programmet. I denne artikel er biblioteket "ProgramInAjax" konfigureret inde i "wamp" -mappen under "www" -mappen, hvor du installerede WampServer.

3929304 2
3929304 2

Trin 2. Åbn enhver teksteditor

Notesblok ++ bruges som teksteditor i denne artikel.

3929304 3
3929304 3

Trin 3. Opret en ny fil i teksteditoren

Indtast følgende:


Åh åh! Hvor blev den gule blomst af?

Du kan skrive, hvad du vil inde i html -taggen.

3929304 4
3929304 4

Trin 4. Gem filen som et tekstdokument med navnet "ajax-data.txt

” Faktisk kan du navngive filen, hvad du vil, men sørg for at indtaste det samme filnavn til kodningen i denne linje:

xmlhttp.open ("GET", "ajax-data.txt", sand);

HTML -taggen bruges dog til overskriften, så den ser større og mere usynlig ud.

3929304 5
3929304 5

Trin 5. Opret en ny fil til en webside

Denne fil er til en HTML -fil for at se Ajax -programmet i en webbrowser.

3929304 6
3929304 6

Trin 6. Kopier følgende kode:

  Mit første Ajax -program af mig Sæt Ajax -koden herunder.  


Klik på knappen herunder for at få blomsten til at forsvinde

3929304 7
3929304 7

Trin 7. Gem filen

Klik på knappen Gem på menulinjen. En "Gem som" boks er åben. Indtast et navn til dit dokument. I denne artikel er filens navn "indeks".

3929304 8
3929304 8

Trin 8. Klik på rullemenuen for at vælge filtypen

Klik på rullemenuen i feltet "Gem som type" for at vælge filtypen.

3929304 9
3929304 9

Trin 9. Vælg “Hyper Text Markup Language file

” Sørg for, at den har “html” inde i parentesen. Klik på Gem, når du har valgt "html."

3929304 10
3929304 10

Trin 10. Test HTML -filen i en webbrowser

Åbn websiden i en webbrowser. Gå til "Kør" på den øverste menulinje. Klik på det, og vælg "Start i Chrome" eller en hvilken som helst browser, der installeres i dit system. Google Chrome bruges til test i denne artikel. Du har muligvis nogle andre browsere installeret i Notesblok ++. Du kan vælge din yndlingsbrowser. En anden mulighed, du kan klikke på WampServer -ikonet på proceslinjerne nederst på skærmen og vælge "Localhost." Du skal se dit bibliotek der og klikke på indeksfilen.

Trin 11. Klik på knappen under billedet for at teste scriptet

3929304 12
3929304 12

Trin 12. Din sidste webside

Din webside skal opdateres med de oplysninger, du indtastede i tekstfilen i begyndelsen. Blomsten og overskriften skal udskiftes med den nye overskrift kaldet “Oh oh! Hvor blev den gule blomst af?”

Metode 2 af 2: Forklaring af kode

3929304 13
3929304 13

Trin 1. Kroppssektionen

Brødteksten i HTML har sektionen "div" og en knap. Dette afsnit vil blive brugt til at vise de oplysninger, der returneres fra serveren. Knappen kalder en funktion med navnet "loadXMLDoc ()", hvis der klikkes på den.

   Mit første Ajax -program af mig   Et billede går her for at teste Ajax -programmet.

Klik på knappen herunder for at få blomsten til at forsvinde

En knap går her

3929304 14
3929304 14

Trin 2. Hovedsektionen

Hovedsektionen i HTML -filen har et script -tag, der indeholder funktionen "loadXMLDoc ()".

 Mit første Ajax -program af mig Indsæt Ajax -koden herunder. 

Trin 3. Mere forklaring

Det vigtigste ved Ajax er XMLHttpRequest -objektet. Det bruges til at udveksle data med serveren, og alle moderne browsere understøtter objektet.

  • Syntaksen til at oprette et XMLHttpRequest () -objekt er variabel = ny XMLHttpRequest (); men på samme tid er syntaksen til at oprette gamle versioner af Internet Explorer (IE5 og IE6), der bruger et ActiveX -objekt, variabel = ny ActiveXObject ("Microsoft. XMLHTTP");.
  • For at håndtere alle de moderne browsere skal den kontrollere, om browserne understøtter XMLHttpRequest -objektet. Hvis det gør det, opretter det et XMLHttpRequest -objekt. Hvis man ikke gør det, vil det oprette et ActiveX -objekt til det.
  • Derefter sender den en anmodning til serveren. Metoden til XMLHttpRequest -objektet kaldet "open ()" og "send ()" vil blive brugt. xmlhttp.open ("GET", "ajax_info.txt", sand); xmlhttp.send ();.

Tips

  • En anden mulighed for at få vist et eksempel på resultatet, du kan åbne din yndlingsbrowser og skrive "localhost/ProgramInAjax" i webadresselinjen for at få vist websiden. Du burde kunne se websiden, hvis du navngiver din HTML -fil til "index.html."
  • Gem din html -fil oftere under dit arbejde. Hvis du trykker på Ctrl og S på samme tid for vinduesbrugere, spares mere tid.
  • Sørg for at tilføje din gemte HTML -fil på det samme sted, hvor dit billede og datatekstfil er.
  • Når du navngiver en fil, er det mellem store og små bogstaver, når du tilføjer disse navne til koden. For eksempel er "myImage" forskelligt fra "MyImage" eller "myimage".

Anbefalede: