Hvordan lage en Ajax Hjemmeside
Ajax kan brukes til å hente informasjon fra en server uten å laste en hel webside. Ajax (eller AJAX) kan være svært nyttig hvis du bare ønsker å laste inn en liten mengde informasjon, men beholde de fleste av siden det samme. Ajax, eller Asynkron Javascript og XML, oppnår dette ved å utveksle små mengder data med serveren bak scenen, i henhold til W3Schools. XMLHttpRequest-objektet brukes til å utveksle data asynkront med en server, mens Javascript brukes for å vise informasjonen.
Bruksanvisning
Starter
1 Åpne en tekst eller HTML editor. Hvis du ikke har en HTML-editor, vil en enkel tekst editor som Notisblokk eller TextEdit være tilstrekkelig.
2 Inkluder viktige elementer i et HTML-dokument: "html", "hode" og "body" tags. HTML-dokumenter består av koder, eller søkeord omgitt av vinkelparenteser. For eksempel ser en åpning "html" tag som dette: <html>. Lukke tags inkluderer en skråstrek før søkeordet. Det følgende er strukturen for en grunnleggende web-side med noen ekstra elementer (<p> skaper avsnitt, <a> skaper lenker og <img> inkluderer bilder):
<Html>
<Head>
<Title> Min webside </ title>
</ Head>
<Body>
<H1> My First Heading </ h1>
<P> Skriv tekst i dette avsnittet for å lage et avsnitt. </ P>
<a href="This"> http://www.example.com "> Dette er en link til et eksempel side på nettet. </a>
<Img width = "250" height = "200" alt = "min hund" />
</ Body>
</ Html>
3 Inkluder elementene du ønsker å endre med Ajax. Dette, og alle strukturelle elementer av en webside, vil gå mellom "body" koder.
For eksempel legge til en knapp for å endre deler av teksten på siden din. Definer tekst som skal endres ved å inkludere en "div" tag rundt teksten med en id velgeren (i dette tilfellet id = "changeText").
<Body>
<Div id = "changedDiv"> <p> Denne teksten vil bli endret med AJAX </ p> <div>
<-knappen Type = "button" onclick = "loadXMLDoc ()"> Klikk for å endre innhold </ knapp>
</ Body>
AJAX Script og Open () Metode
4 Skriv den funksjonen som vil holde din AJAX script i "hodet" i HTML-dokumentet. Inkluder denne funksjonen, må "loadXMLDoc ()" -funksjonen, i en Javascript "script" tag. For eksempel:
<Head>
<Script type = "text / javascript">
funksjon loadXMLDoc ()
{
.... (AJAX script vil gå her)
}
</ Script>
</ Head>
5 Legg AJAX script til funksjonen. Inkluder XMLHttpRequest objektet og ActiveX objekt. Disse vil gi data som skal sendes til eller lastes fra en server. Ta med følgende mellom klammeparentes av "loadXMLDoc ()" funksjon:
if (window.XMLHttpRequest)
{// For IE7 +, Firefox, Chrome, Opera, Safari
XMLHTTP = new XMLHttpRequest ();
}
ellers
{// For IE6, IE5
XMLHTTP = new ActiveXObject ( "Microsoft.XMLHTTP");
}
6 Tilsett generisk "open ()" metoden til enden av funksjonen. Dette vil sende en forespørsel til serveren. Følgende er generisk format:
open (metode, url, async)
7 Erstatt ordet "metode" i "åpen (metode, url, async)" med "GET" eller "POST". Bruk "GET" med mindre du oppdaterer en fil eller database på serveren, å sende store mengder data eller sende brukeren innspill til serveren, i så fall bør du bruke "POST". "GET" er raskere enn "POST", men "POST" er mer robust. Din "åpen (metode, url, async)" skal nå se slik ut:
xmlhttp.open ( "GET", url, async) eller
xmlhttp.open ( "POST", url, async)
8 Erstatt ordet "url" i generisk "åpen (metode, url, async)" med filen på din server du ønsker å laste når knappen klikkes. For eksempel erstatte tekst i vårt eksempel med et tekstdokument kalt "helloWorld.txt:"
xmlhttp.open ( "GET", "helloWorld.txt", async)
9 Erstatt ordet "async" med "true" for å tillate asynkrone forespørsler. Dette gjør at Javascript for å kjøre selv når serveren er opptatt eller treg uten å stoppe programmet. Her er den endelige open () metode:
xmlhttp.open ( "GET", "helloWorld.txt", "true")
Klar stat og Send () Metode
10 Legg til følgende kode over "xmlhttp.open (" GET "," helloWorld.txt "," true ")" for å spesifisere en funksjon for å utføre når du er klar:
xmlhttp.onreadystatechange = function ()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById ( "exampleDiv") innerhtml = xmlhttp.responseText.;
}
}
Når Klar-status endres fra 0-4, vil funksjonen utføre (0: forespørsel er ikke klargjort, 1: serveren tilkoblingen er opprettet, 2: forespørsel er mottatt; 3: å behandle anmodningen, 4: be ferdig og responsen er klar) . Status er 200 når siden er funnet (status == 404 betyr at siden ikke ble funnet).
11 Inkludere "send ()" metoden under "xmlhttp.open (" GET "," helloWorld.txt "," true ")" for å sende forespørselen ut til serveren. Dette er "send ()" metoden:
xmlhttp.send ()
12 Gå gjennom hele koden, som skal se slik ut:
<Html>
<Head>
<Script type = "text / javascript">
funksjon loadXMLDoc ()
{
if (window.XMLHttpRequest)
{// For IE7 +, Firefox, Chrome, Opera, Safari
XMLHTTP = new XMLHttpRequest ();
}
ellers
{// For IE6, IE5
XMLHTTP = new ActiveXObject ( "Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function ()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById ( "changedDiv") innerhtml = xmlhttp.responseText.;
}
}
xmlhttp.open ( "GET", "ajax_info.txt", true);
xmlhttp.send ();
}
</ Script>
</ Head>
<Body>
<Div id = "changedDiv"> <h2> Endre denne teksten med AJAX </ h2> </ div>
<-knappen Type = "button" onclick = "loadXMLDoc ()"> Klikk for å endre innhold </ knapp>
</ Body>
</ Html>