Hoe te programmeren in Ajax (met afbeeldingen)

Inhoudsopgave:

Hoe te programmeren in Ajax (met afbeeldingen)
Hoe te programmeren in Ajax (met afbeeldingen)

Video: Hoe te programmeren in Ajax (met afbeeldingen)

Video: Hoe te programmeren in Ajax (met afbeeldingen)
Video: 15 tips en trucs voor Windows 10 (SchoonePC Nieuwsbrief 99) 2024, Maart
Anonim

AJAX of Ajax is asynchroon JavaScript en XML. Het wordt gebruikt voor het uitwisselen van gegevens met een server en het bijwerken van een deel van een webpagina zonder de hele webpagina aan de clientzijde opnieuw te laden. De weergave en het gedrag van de bestaande webpagina wordt helemaal niet gestoord tijdens het uitwisselen en bijwerken van de gegevens. Ajax wordt ook beschouwd als een groep technologieën met HTML, CSS, DOM en JavaScript die worden gebruikt om de gebruiker te markeren, op te maken en in staat te stellen te communiceren met de informatie op de webpagina. In dit artikel wordt stap voor stap uitgelegd hoe u een eenvoudig programma in Ajax schrijft met Notepad++. Enige basiskennis van HTML, DOM, JavaScript en een lokale webserver of externe webserver is vereist. WampServer wordt in dit artikel gebruikt voor een test.

Stappen

Methode 1 van 2: Coderen

3929304 1
3929304 1

Stap 1. Maak een foto voor het schrijven van een Ajax-programma

Sla de afbeelding op in dezelfde map waar u uw html- en tekstbestanden met het Ajax-programma opslaat. In dit artikel wordt de map "ProgramInAjax" ingesteld in de map "wamp" onder de map "www" waar u WampServer hebt geïnstalleerd.

3929304 2
3929304 2

Stap 2. Open een teksteditor

Notepad++ wordt gebruikt als teksteditor in dit artikel.

3929304 3
3929304 3

Stap 3. Maak een nieuw bestand aan in de teksteditor

Typ het volgende:


Oh Oh! Waar is de gele bloem gebleven?

Je mag hier typen wat je wilt in de html-tag.

3929304 4
3929304 4

Stap 4. Sla het bestand op als een tekstdocument met de naam “ajax-data.txt

” Eigenlijk kun je het bestand een naam geven die je maar wilt, maar zorg ervoor dat je dezelfde bestandsnaam invoert in de codering in deze regel:

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

De HTML-tag wordt echter gebruikt voor de koptekst, zodat deze groter en onzichtbaarder lijkt.

3929304 5
3929304 5

Stap 5. Maak een nieuw bestand voor een webpagina

Dit bestand is voor een HTML-bestand om het Ajax-programma in een webbrowser te bekijken.

3929304 6
3929304 6

Stap 6. Kopieer de volgende code:

  Mijn eerste Ajax-programma door mij Zet de Ajax-code hieronder.  


Klik op onderstaande knop om de bloem te laten verdwijnen

3929304 7
3929304 7

Stap 7. Sla het bestand op

Klik op de knop Opslaan in de menubalk. Een vak "Opslaan als" is geopend. Voer een naam in voor uw document. In dit artikel is de naam van het bestand "index".

3929304 8
3929304 8

Stap 8. Klik op de vervolgkeuzepijl om de bestandsextensie te kiezen

Klik in het veld "Opslaan als type" op de vervolgkeuzepijl om de bestandsextensie te kiezen.

3929304 9
3929304 9

Stap 9. Selecteer "Hyper Text Markup Language-bestand

” Zorg ervoor dat er "html" tussen haakjes staat. Klik op opslaan na het selecteren van de "html".

3929304 10
3929304 10

Stap 10. Test het HTML-bestand in een webbrowser

Open de webpagina in een webbrowser. Ga naar "Uitvoeren" in de bovenste menubalk. Klik erop en selecteer "Launch in Chrome" of een browser die op uw systeem wordt geïnstalleerd. Google Chrome wordt gebruikt voor het testen in dit artikel. Mogelijk hebt u enkele andere browsers geïnstalleerd in Notepad++. U kunt uw favoriete browser selecteren. Een andere optie, u kunt op het WampServer-pictogram in de taakbalken onder aan het scherm klikken en "Localhost" selecteren. Je zou je directory daar moeten zien en op het indexbestand moeten klikken.

Stap 11. Klik op de knop onder de afbeelding om het script te testen

3929304 12
3929304 12

Stap 12. Je uiteindelijke webpagina

Uw webpagina moet worden vernieuwd met de informatie die u aan het begin in het tekstbestand hebt ingevoerd. De bloem en de kop moeten worden vervangen door de nieuwe kop met de naam Oh oh! Waar is de gele bloem gebleven?”

Methode 2 van 2: Code Uitleg

3929304 13
3929304 13

Stap 1. Het lichaamsgedeelte

De hoofdtekst van HTML heeft de sectie "div" en één knop. Dit gedeelte wordt gebruikt om de informatie weer te geven die door de server wordt geretourneerd. De knop roept een functie aan met de naam “loadXMLDoc(),” als erop wordt geklikt.

   Mijn eerste Ajax-programma door mij   Een afbeelding gaat hier om het Ajax-programma te testen.

Klik op onderstaande knop om de bloem te laten verdwijnen

Hier komt een knop

3929304 14
3929304 14

Stap 2. Het hoofdgedeelte

De head-sectie van het HTML-bestand heeft een scripttag die de functie "loadXMLDoc()" bevat.

 Mijn eerste Ajax-programma door mij Zet de Ajax-code hieronder. 

Stap 3. Meer uitleg

Het belangrijkste van Ajax is het object XMLHttpRequest. Het wordt gebruikt om gegevens uit te wisselen met de server en alle moderne browsers ondersteunen het object.

  • De syntaxis voor het maken van een XMLHttpRequest()-object is variable=new XMLHttpRequest(); maar tegelijkertijd is de syntaxis om oude versies van Internet Explorer (IE5 en IE6) te maken die een ActiveX-object gebruiken, variable=new ActiveXObject("Microsoft. XMLHTTP");.
  • Om alle moderne browsers aan te kunnen, moet het controleren of de browsers het XMLHttpRequest-object ondersteunen. Als dit het geval is, wordt een XMLHttpRequest-object gemaakt. Als dat niet het geval is, wordt er een ActiveX-object voor gemaakt.
  • Vervolgens stuurt het een verzoek naar de server. De methode van het XMLHttpRequest-object genaamd "open()" en "send()" zal worden gebruikt. xmlhttp.open("GET", "ajax_info.txt", true); xmlhttp.send();.

Tips

  • Een andere optie om een voorbeeld van het resultaat te bekijken, is dat u uw favoriete browser kunt openen en "localhost/ProgramInAjax" in de webadresbalk kunt typen om de webpagina weer te geven. U zou de webpagina moeten kunnen zien als u uw HTML-bestand de naam "index.html" geeft.
  • Sla je html-bestand vaker op tijdens je werk. Door voor Windows-gebruikers tegelijkertijd op Ctrl en S te drukken, wordt meer tijd bespaard.
  • Zorg ervoor dat u uw opgeslagen HTML-bestand toevoegt op dezelfde locatie als uw afbeelding en gegevenstekstbestand.
  • Wanneer u een bestand een naam geeft, is het hoofdlettergevoelig wanneer u die namen in de code toevoegt. 'MijnAfbeelding' is bijvoorbeeld anders dan 'MijnAfbeelding' of 'MijnAfbeelding'.

Aanbevolen: