Hvordan Ajax fungerer
Ved tradisjonell JavaScript-koding, hvis du vil få informasjon fra en database eller en fil på serveren, eller sende brukerinformasjon til en server, må du lage en HTML-skjema og GET eller POST-data til serveren. Brukeren må klikke på "Send" -knappen for å sende / hente informasjonen, vent til serveren svarer, og så vil en ny side lastes med resultatene.
Fordi serveren returnerer en ny side hver gang brukeren sender inn, kan tradisjonelle webprogrammer kjøres sakte og pleier å være mindre brukervennlig. Med AJAX kommuniserer JavaScript direkte med serveren, gjennom JavaScript XMLHttpRequest-objektet.
Med en HTTP-forespørsel kan en nettside gjøre en forespørsel til, og få svar fra en webserver uten å laste siden på nytt. Brukeren forblir på samme side, og han eller hun vil ikke legge merke til at scripts forespørselssidene, eller send data til en server i bakgrunnen.
Dette bildet er en forenklet introduksjon om hvordan Ajax fungerer:
Brukeren sender en forespørsel som utfører en handling, og handlingenes respons er vist i et lag, identifiseres med en ID, uten å lade hele siden på nytt. For eksempel et lag med dette id:
I de neste trinnene vil vi se hvordan du oppretter en XMLHttpRequest og mottar svar fra serveren.
1. Lag XMLhttpRequest
Ulike nettlesere bruker forskjellige metoder for å opprette XMLHttpRequest-objektet. Internet Explorer bruker et ActiveXObject, mens andre nettlesere bruker det innebygde JavaScript-objektet XMLHttpRequest.
For å lage dette objektet, og håndtere forskjellige nettlesere, skal vi bruke en "prøve og fange" setning.
funksjon ajaxFunction ()
{
var xmlHttp;
prøve
{
// Firefox, Opera 8.0+, Safari
xmlHttp = ny XMLHttpRequest ();
}
fange (e)
{
// Internet Explorer
prøve
{
xmlHttp = nytt ActiveXObject ("Msxml2.XMLHTTP");
}
fange (e)
{
prøve
{
xmlHttp = nytt ActiveXObject ("Microsoft.XMLHTTP");
}
fange (e)
{
varsling ("Din nettleser støtter ikke AJAX!");
returner falsk;
}
}
}
2. Sende forespørsel til serveren
For å sende en forespørsel til serveren bruker vi åpen () metoden og send () -metoden.
Åpne () -metoden tar tre argumenter. Det første argumentet definerer hvilken metode som skal brukes når du sender forespørselen (GET eller POST). Det andre argumentet angir nettadressen til server-side scriptet. Det tredje argumentet angir at forespørselen skal håndteres asynkront. Send () -metoden sender forespørselen til serveren.
xmlHttp.open ( “GET”,”time.asp”, true);
xmlHttp.send (null);
3. Skrive server side script
ResponseText lagrer dataene som returneres fra serveren. Her ønsker vi å sende tilbake gjeldende tid. Koden i "time.asp" ser slik ut:
<%
response.expires = -1
Response.Write (tid)
%>
4. Forbruker svaret
Nå må vi forbruke svaret mottatt og vise det til brukeren.
xmlHttp.onreadystatechange = funksjon ()
{
if (xmlHttp.readyState == 4)
{
document.myForm.time.value = xmlHttp.responseText;
}
}
xmlHttp.open ( “GET”,”time.asp”, true);
xmlHttp.send (null);
}
5. Fullfør koden
Nå må vi bestemme når AJAX-funksjonen skal utføres. Vi lar funksjonen kjøre "bak kulissene" når brukeren skriver noe i brukernavnetes tekstfelt. Den komplette koden ser slik ut: