Hvordan bygge et nettsted med Ajax
AJAX (Asynchronous Javascript og XML) ble gjort populært med Google Suggest i 2005, da Google introdusert en innovativ måte å søke på nettet: skriv et ord i Google-søkeboks og en liste med forslag er opprettet. Denne enkle, men kraftige eksempel er en av mange implementeringer av AJAX på Internett i dag. Kartene Facebook faner, Youtube, Gmail og Google er andre eksempler på hvordan AJAX kan brukes til å oppdatere deler av en nettside uten å laste hele siden.
Bruksanvisning
grunn~~POS=TRUNC AJAX
1 Åpne din foretrukne HTML eller tekst editor. Notisblokk vil være nok.
2 Skriv inn de grunnleggende elementer i et HTML-dokument:
<Html>
<Head>
</ Head>
<Body>
</ Body>
</ Html>
3 Inkluder elementer som skal endres med AJAX mellom <body> kodene. Legg til en knapp, for eksempel å kalle funksjonen "loadXMLDoc ()" når du klikker. Legg en div tag (med id selector "changeDiv", for eksempel) for å definere hvilken tekst å forandre seg med AJAX.
<Body>
<Div id = "changedDiv"> <p> Endre tekst med AJAX </ p> <div>
<-knappen Type = "button" onclick = "loadXMLDoc ()"> Klikk for å endre innhold </ knapp>
</ Body>
"LoadXMLDoc ()" Function
4 Inkludere "loadXMLDoc ()" funksjon inne i en <script> tag i <head> delen av HTML-dokumentet. Funksjonen lar deg inkludere AXAJ script.
<Head>
<Script type = "text / javascript">
funksjon loadXMLDoc ()
{
.... (AJAX script vil gå her)
}
</ Script>
</ Head>
5 Legg AJAX script til "loadXMLDoc ()" -funksjon. Legg XMLHttpRequest objektet (støttet av store, moderne nettlesere), og ActiveX objekt (nødvendig for Internet Explorer versjon 5 og 6) som tillater skript for å tillate data som skal sendes til eller lastes fra en server. For eksempel,
if (window.XMLHttpRequest)
{// For IE7 +, Firefox, Chrome, Opera, Safari
XMLHTTP = new XMLHttpRequest ();
}
ellers
{// For IE6, IE5
XMLHTTP = new ActiveXObject ( "Microsoft.XMLHTTP");
}
6 Sende en anmodning til en server ved hjelp av åpne () -metoden, tilsettes ved slutten av loadXMLDoc () -funksjonen. Den generiske formatet for den åpne metode er dette:
open (metode, url, async)
7 Erstatt den generiske "metode" i det fri (metode, url, async) metode med GET eller POST. GET bør brukes mesteparten av tiden, da den er enklere og raskere enn POST-forespørsler. Men du bør bruke POST når du oppdaterer en fil eller database på serveren, å sende store mengder data eller sende brukeren innspill til serveren (POST er sikrere og mer robust enn GET og har ingen begrensninger på størrelsen). Den åpne () metoden skal nå se slik ut:
xmlhttp.open ( "GET", url, async) eller
xmlhttp.open ( "POST", url, async)
8 Erstatt den generiske "url" i åpen (metode, url, async) metode med plasseringen av filen på serveren. Hvis du bytter ut teksten "endre teksten med AJAX" med "ajax_document.txt," du bør inkludere "ajax_document.txt" (hvilken som helst fil kan brukes, inkludert TXT, XML eller ASP eller .php å utføre handlinger på serveren før du sender tilbake en respons). Eksempelet skal nå se slik ut:
xmlhttp.open ( "GET", "ajax_document.txt", async)
9 Erstatt den generiske "async" med "true" for asynkrone forespørsler eller "false" for synkrone forespørsler. Det anbefales å bruke "true", da dette vil tillate Javascript for å kjøre selv om serveren er opptatt eller treg uten at søknaden om å stoppe. Dette illustrerer nytten av AJAX. Den åpne metoden skal nå se slik ut:
xmlhttp.open ( "GET", "ajax_document.txt", "true")
10 Angi funksjonen som skal utføres når responsen er klar (gjelder bare når du bruker asnyc = sant). Dette bør legges over xmlhttp.open () metode:
xmlhttp.onreadystatechange = function ()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById ( "exampleDiv") innerhtml = xmlhttp.responseText.;
}
}
Funksjonen vil utføre når Klar-status endres fra 0 til 4 (0 betyr forespørselen er ikke initialisert, 1, er serveren forbindelsen opprettet, 2, har anmodning er mottatt, 3, behandling av forespørselen, og 4, be om ferdig og responsen er klar) . Status vil være 200 mindre siden ikke er funnet (når status = 404).
11 Inkluder send () metode for å sende forespørselen ut til serveren. Inkluder denne under open () metoden.
xmlhttp.send ()
Hele koden skal nå 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>