Hvordan Ajax virker
Ved traditionel JavaScript-kodning, skal du oprette en HTML-formular og GET eller POST-data til serveren, hvis du vil hente oplysninger fra en database eller en fil på serveren eller sende brugeroplysninger til en server. Brugeren skal klikke på "Send" knappen for at sende / hente oplysningerne, vent til serveren svarer, og så vil en ny side blive indlæst med resultaterne.
Da serveren returnerer en ny side hver gang brugeren sender input, kan traditionelle webapplikationer køre langsomt og tendens til at være mindre brugervenlige. Med AJAX kommunikerer JavaScript jævnligt med serveren via JavaScript XMLHttpRequest-objektet.
Med en HTTP-anmodning kan en webside anmode om og få et svar fra en webserver uden at genindlæse siden. Brugeren forbliver på samme side, og han eller hun vil ikke bemærke de scripts anmodning sider eller sende data til en server i baggrunden.
Dette billede er en forenklet introduktion til hvordan Ajax virker:
Brugeren sender en anmodning, der udfører en handling, og handlingens svar vises i et lag, identificeres ved et id, uden at genindlæse hele siden. For eksempel et lag med dette id:
I de næste trin vil vi se, hvordan du opretter en XMLHttpRequest og modtager svar fra serveren.
1. Opret XMLhttpRequest
Forskellige browsere bruger forskellige metoder til at oprette XMLHttpRequest-objektet. Internet Explorer bruger et ActiveXObject, mens andre browsere bruger det indbyggede JavaScript-objekt, der hedder XMLHttpRequest.
For at oprette dette objekt og håndtere forskellige browsere, vil vi bruge en "prøve og fange" erklæring.
funktion ajaxFunktion ()
{
var xmlHttp;
prøve
{
// Firefox, Opera 8.0+, Safari
xmlHttp = ny XMLHttpRequest ();
}
fange (e)
{
// Internet Explorer
prøve
{
xmlHttp = nyt ActiveXObject ("Msxml2.XMLHTTP");
}
fange (e)
{
prøve
{
xmlHttp = ny ActiveXObject ("Microsoft.XMLHTTP");
}
fange (e)
{
advarsel ("Din browser understøtter ikke AJAX!");
return false;
}
}
}
2. Sende anmodning til serveren
For at sende en forespørgsel til serveren bruger vi metoden open () og metoden send ().
Open () -metoden tager tre argumenter. Det første argument definerer hvilken metode, der skal bruges, når du sender anmodningen (GET eller POST). Det andet argument angiver webadressen til server-side scriptet. Det tredje argument angiver, at anmodningen skal behandles asynkront. Metoden send () sender anmodningen til serveren.
xmlHttp.open ( ”GET”,”time.asp”, true);
xmlHttp.send (null);
3. Skrive server side script
ResponseText gemmer de data, der returneres fra serveren. Her ønsker vi at sende den aktuelle tid tilbage. Koden i "time.asp" ser sådan ud:
<%
response.expires = -1
Response.Write (tid)
%>
4. Forbrug af svaret
Nu skal vi forbruge det modtagne svar og vise det til brugeren.
xmlHttp.onreadystatechange = function ()
{
hvis (xmlHttp.readyState == 4)
{
document.myForm.time.value = xmlHttp.responseText;
}
}
xmlHttp.open ( ”GET”,”time.asp”, true);
xmlHttp.send (null);
}
5. Udfyld koden
Nu skal vi beslutte, hvornår AJAX-funktionen skal udføres. Vi vil lade funktionen køre "bag kulisserne", når brugeren skriver noget i brugernavnets tekstfelt. Den komplette kode ser sådan ud: