Hvernig Ajax virkar
Í hefðbundnum JavaScript kóðun, ef þú vilt fá upplýsingar úr gagnagrunni eða skrá á þjóninum eða senda notandaupplýsingar til miðlara þarftu að búa til HTML skjal og GET eða POST gögn til þjónninn. Notandinn verður að smella á "Senda" hnappinn til að senda / fá upplýsingar, bíða eftir að þjónninn svari, og þá mun nýr síða hlaða niður með niðurstöðum.
Vegna þess að þjónninn skilar nýjum síðum í hvert skipti sem notandinn sendir inntak, geta hefðbundnar vefforrit keyrt hægt og tilhneigingu til að vera minna notendavænt. Með AJAX, JavaScript sendir þér beint á miðlara, í gegnum JavaScript XMLHttpRequest mótmæla.
Með HTTP beiðni getur vefsíða beðið um og fengið svar frá vefþjóni án þess að endurhlaða síðuna. Notandinn verður áfram á sömu síðu og hann eða hún mun ekki taka eftir því að forskriftir beita síðum eða senda gögn á netþjóni í bakgrunni.
Þessi mynd er einfaldað kynning um hvernig Ajax virkar:
Notandinn sendir beiðni sem framkvæmir aðgerð og svörun aðgerðarinnar er sýnd í lag, auðkennið með kennimerki án þess að endurhlaða fullan síðu. Til dæmis lag með þetta auðkenni:
Í næstu skrefum munum við sjá hvernig á að búa til XMLHttpRequest og fá svar frá þjóninum.
1. Búðu til XMLhttpRequest
Mismunandi vafrar nota mismunandi aðferðir til að búa til XMLHttpRequest mótmæla. Internet Explorer notar ActiveXObject, en aðrir vafrar nota innbyggða JavaScript hlutinn sem heitir XMLHttpRequest.
Til að búa til þennan hlut og takast á við mismunandi vafra ætlum við að nota "reyna og grípa" yfirlýsingu.
virkja ajaxFunction ()
{
var xmlHttp;
reyna
{
// Firefox, Opera 8.0+, Safari
xmlHttp = nýtt XMLHttpRequest ();
}
grípa (e)
{
// Internet Explorer
reyna
{
xmlHttp = nýtt ActiveXObject ("Msxml2.XMLHTTP");
}
grípa (e)
{
reyna
{
xmlHttp = nýtt ActiveXObject ("Microsoft.XMLHTTP");
}
grípa (e)
{
viðvörun ("vafrinn þinn styður ekki AJAX!");
skila aftur
}
}
}
2. Sendi beiðni til miðlara
Til að senda beiðni á netþjóninn notum við opinn () aðferðina og sendið () aðferðina.
Open () aðferðin tekur þrjá rök. Fyrsta rifrildi skilgreinir hvaða aðferð er notuð þegar þú sendir beiðnina (GET eða POST). Annað rifrildi tilgreinir slóðina á vefþjóninum. Þriðja rökið tilgreinir að beiðnin ætti að meðhöndla ósamstilltur. Sendið () aðferðin sendir beiðnina af á netþjóninn.
xmlHttp.open ("GET", "time.asp", satt);
xmlHttp.send (null);
3. Skrifa framreiðslumaður hlið handrit
SvarText mun geyma gögnin sem eru skiluð frá þjóninum. Hér viljum við senda núverandi tíma aftur. Kóðinn í "time.asp" lítur svona út:
<%
response.expires = -1
response.write (tími)
%>
4. Neyta svarsins
Nú þurfum við að neyta svarið sem berast og birta það fyrir notandann.
xmlHttp.onreadystatechange = virka ()
{
ef (xmlHttp.readyState == 4)
{
document.myForm.time.value = xmlHttp.responseText;
}
}
xmlHttp.open ("GET", "time.asp", satt);
xmlHttp.send (null);
}
5. Ljúktu kóðanum
Nú verðum við að ákveða hvenær AJAX virka skal framkvæma. Við munum láta aðgerðina keyra "á bak við tjöldin" þegar notandinn skrifar eitthvað í notendaviðmótinu. Heill lykillinn lítur svona út: