AJAX eller Ajax är asynkron JavaScript och XML. Den används för att utbyta data med en server och uppdatera en del av en webbsida utan att ladda om hela webbsidan på klientsidan. Visningen och beteendet för den befintliga webbsidan störs inte alls vid utbyte och uppdatering av data. Ajax anses också vara en grupp tekniker som har HTML, CSS, DOM och JavaScript som används för att markera, styla och låta användaren interagera med informationen på webbsidan. I den här artikeln kommer det att visa dig hur du skriver ett enkelt program i Ajax -steg för steg med Notepad ++. Vissa grundläggande kunskaper om HTML, DOM, JavaScript och en lokal webbserver eller fjärrserver krävs. WampServer används i denna artikel för ett test.
Steg
Metod 1 av 2: Kodning
Steg 1. Förbered en bild för att skriva ett Ajax -program
Spara bilden i samma mapp där du sparar dina html- och textfiler som visar Ajax -programmet. I den här artikeln är "ProgramInAjax" -katalogen inställd i mappen "wamp" under "www" -katalogen där du installerade WampServer.
Steg 2. Öppna valfri textredigerare
Anteckningar ++ används som textredigerare i den här artikeln.
Steg 3. Skapa en ny fil i textredigeraren
Skriv följande:
Åh åh! Vart tog den gula blomman vägen?
Du kan skriva vad du vill i html -taggen här.
Steg 4. Spara filen som ett textdokument med namnet”ajax-data.txt
” Egentligen kan du namnge filen vad du vill, men se till att du anger samma filnamn för kodningen på den här raden:
xmlhttp.open ("GET", "ajax-data.txt", true);
HTML -taggen används dock för rubriken så att den ser större och mer osynlig ut.
Steg 5. Skapa en ny fil för en webbsida
Denna fil är för en HTML -fil för att visa Ajax -programmet i en webbläsare.
Steg 6. Kopiera följande kod:
Mitt första Ajax -program av mig Sätt Ajax -koden nedan.Klicka på knappen nedan för att få blomman att försvinna
Steg 7. Spara filen
Klicka på knappen Spara i menyraden. En "Spara som" -ruta är öppen. Ange ett namn för ditt dokument. I den här artikeln är filens namn "index".
Steg 8. Klicka på rullgardinspilen för att välja filtillägg
I fältet "Spara som typ" klickar du på rullgardinspilen för att välja filtillägg.
Steg 9. Välj “Hyper Text Markup Language file
” Se till att den har “html” inuti parentesen. Klicka på spara när du har valt "html".
Steg 10. Testa HTML -filen i en webbläsare
Öppna webbsidan i en webbläsare. Gå till "Kör" i den övre menyraden. Klicka på den och välj "Starta i Chrome" eller någon webbläsare som installeras i ditt system. Google Chrome används för testning i den här artikeln. Du kan ha några andra webbläsare installerade i Anteckningar ++. Du kan välja din favoritwebbläsare. Ett annat alternativ, du kan klicka på WampServer -ikonen i aktivitetsfältet längst ned på skärmen och välja "Localhost." Du bör se din katalog där och klicka på indexfilen.
Steg 11. Klicka på knappen under bilden för att testa manuset
Steg 12. Din sista webbsida
Din webbsida bör uppdateras med informationen som du skrev in i textfilen i början. Blomman och rubriken bör ersättas med den nya rubriken som heter”Oh oh! Vart tog den gula blomman vägen?”
Metod 2 av 2: Kodförklaring
Steg 1. Kroppssektionen
Brödtexten i HTML har avsnittet "div" och en knapp. Detta avsnitt kommer att användas för att visa information som returneras från servern. Knappen kallar en funktion som heter "loadXMLDoc ()" om den klickas.
Mitt första Ajax -program av mig En bild går här för att testa Ajax -programmet.Klicka på knappen nedan för att få blomman att försvinna
En knapp går här
Steg 2. Huvuddelen
Huvuddelen av HTML -filen har en skripttagg som innehåller funktionen “loadXMLDoc ()”.
Mitt första Ajax -program av mig Sätt Ajax -koden nedan.
Steg 3. Mer förklaring
Det viktigaste med Ajax är XMLHttpRequest -objektet. Den används för att utbyta data med servern och alla moderna webbläsare stöder objektet.
- Syntaxen för att skapa ett XMLHttpRequest () -objekt är variabel = ny XMLHttpRequest (); men samtidigt är syntaxen för att skapa gamla versioner av Internet Explorer (IE5 och IE6) som använder ett ActiveX -objekt variabel = nytt ActiveXObject ("Microsoft. XMLHTTP");.
- För att hantera alla moderna webbläsare måste den kontrollera om webbläsarna stöder XMLHttpRequest -objektet. Om det gör det skapar det ett XMLHttpRequest -objekt. Om en inte gör det kommer det att skapa ett ActiveX -objekt för det.
- Då skickar den en begäran till servern. Metoden för XMLHttpRequest -objektet som kallas "open ()" och "send ()" kommer att användas. xmlhttp.open ("GET", "ajax_info.txt", true); xmlhttp.send ();.
Tips
- Ett annat alternativ för att förhandsgranska resultatet, du kan öppna din favoritwebbläsare och skriva "localhost/ProgramInAjax" i webbadressfältet för att visa webbsidan. Du bör kunna se webbsidan om du heter HTML -filen till "index.html."
- Spara din html -fil oftare under ditt arbete. Genom att trycka på Ctrl och S samtidigt för Windows -användare sparar du mer tid.
- Var noga med att lägga till din sparade HTML -fil på samma plats som din bild och datatextfil finns.
- När du namnger en fil är det skiftlägeskänsligt när du lägger till dessa namn i koden. Till exempel skiljer sig”myImage” från”MyImage” eller”myimage”.
