Hur Ajax fungerar
I traditionell JavaScript-kodning, om du vill få information från en databas eller en fil på servern eller skicka användarinformation till en server måste du göra en HTML-blankett och GET eller POST-data till servern. Användaren måste klicka på "Skicka" -knappen för att skicka / hämta informationen, vänta på att servern ska svara, och sedan laddas en ny sida med resultaten.
Eftersom servern returnerar en ny sida varje gång användaren skickar in, kan traditionella webbapplikationer springa långsamt och tenderar att vara mindre användarvänliga. Med AJAX kommunicerar din JavaScript direkt med servern genom JavaScript XMLHttpRequest-objektet.
Med en HTTP-begäran kan en webbsida göra en förfrågan till och få ett svar från en webbserver utan att ladda om sidan. Användaren kommer att stanna på samma sida, och han eller hon kommer inte märka att skript begär sidor, eller skicka data till en server i bakgrunden.
Den här bilden är en förenklad introduktion om hur Ajax fungerar:
Användaren skickar en begäran som utför en åtgärd och åtgärdens svar visas i ett lager, identifieras med ett ID, utan att ladda om hela sidan. Till exempel ett lager med detta ID:
I nästa steg ser vi hur man skapar en XMLHttpRequest och mottar svar från servern.
1. Skapa XMLhttpRequest
Olika webbläsare använder olika metoder för att skapa XMLHttpRequest-objektet. Internet Explorer använder ett ActiveXObject, medan andra webbläsare använder det inbyggda JavaScript-objektet som heter XMLHttpRequest.
För att skapa detta objekt och hantera olika webbläsare, kommer vi att använda ett "försök och fånga" uttalande.
funktion ajaxFunktion ()
{
var xmlHttp;
Prova
{
// Firefox, Opera 8.0+, Safari
xmlHttp = ny XMLHttpRequest ();
}
fånga (e)
{
// Internet Explorer
Prova
{
xmlHttp = nytt ActiveXObject ("Msxml2.XMLHTTP");
}
fånga (e)
{
Prova
{
xmlHttp = nytt ActiveXObject ("Microsoft.XMLHTTP");
}
fånga (e)
{
varning ("Din webbläsare stöder inte AJAX!");
returnera false;
}
}
}
2. Sändningsförfrågan till servern
För att skicka en begäran till servern använder vi metoden open () och metoden (send).
Metoden Open () tar tre argument. Det första argumentet definierar vilken metod som ska användas när du skickar begäran (GET eller POST). Det andra argumentet anger webbadressen för serverns manus. Det tredje argumentet anger att förfrågan ska hanteras asynkront. Metoden send () skickar begäran till servern.
xmlHttp.open ( ”GET”,”time.asp”, true);
xmlHttp.send (null);
3. Skriva serverns sidodeskript
ResponseText lagrar data som returneras från servern. Här vill vi skicka tillbaka den aktuella tiden. Koden i "time.asp" ser så här ut:
<%
response.expires = -1
Response.Write (tid)
%>
4. förbrukar svaret
Nu måste vi konsumera mottaget svar och visa det för användaren.
xmlHttp.onreadystatechange = function ()
{
if (xmlHttp.readyState == 4)
{
document.myForm.time.value = xmlHttp.responseText;
}
}
xmlHttp.open ( ”GET”,”time.asp”, true);
xmlHttp.send (null);
}
5. Fyll i koden
Nu måste vi bestämma när AJAX-funktionen ska utföras. Vi låter funktionen köra "bakom kulisserna" när användaren skriver något i användarnamnets textfält. Den fullständiga koden ser ut så här: