Miten Ajax toimii
Perinteisessä JavaScript-koodauksessa, jos haluat saada tietoja tietokannasta tai tiedostosta palvelimelta tai lähettää käyttäjätietoja palvelimelle, sinun on tehtävä HTML-lomake ja GET- tai POST-tiedot palvelimelle. Käyttäjän on napsautettava "Lähetä" -painiketta lähettää / saada tietoja, odota palvelinta vastaamaan ja sitten uusi sivu latautuu tuloksiin.
Koska palvelin palauttaa uuden sivun joka kerta, kun käyttäjä lähettää syötteen, perinteiset verkkosovellukset voivat toimia hitaasti ja ovat yleensä vähemmän käyttäjäystävällisiä. AJAX: n avulla JavaScript kommunikoi suoraan palvelimen kanssa JavaScript XMLHttpRequest -objektin kautta.
HTTP-pyynnön avulla www-sivu voi pyytää ja saada vastauksen web-palvelimelta lataamatta sivua uudelleen. Käyttäjä pysyy samalla sivulla, eikä hän huomaa, että komentosarjat pyytävät sivuja tai lähettävät tietoja taustalla olevalle palvelimelle.
Tämä kuva on yksinkertaistettu esitys siitä, miten Ajax toimii:
Käyttäjä lähettää pyynnön, joka suorittaa toiminnon ja toiminnan vastaus näkyy kerroksena, identifioidaan tunnuksella, eikä lataa koko sivua uudelleen. Esimerkiksi kerros, jolla on tämä tunnus:
Seuraavissa vaiheissa näemme, kuinka XMLHttpRequest luodaan ja vastaanotetaan vastaus palvelimelta.
1. Luo XMLhttpRequest
Eri selaimet käyttävät erilaisia menetelmiä XMLHttpRequest-objektin luomiseen. Internet Explorer käyttää ActiveXObject-ohjelmaa, kun taas muut selaimet käyttävät sisäänrakennettua JavaScript-objektia nimeltä XMLHttpRequest.
Jos haluat luoda tämän objektin ja käsitellä erilaisia selaimia, aiomme käyttää "try and catch" -lausetta.
toiminto ajaxFunction ()
{
var xmlHttp;
yrittää
{
// Firefox, Opera 8.0+, Safari
xmlHttp = uusi XMLHttpRequest ();
}
saalis (e)
{
// Internet Explorer
yrittää
{
xmlHttp = uusi ActiveXObject ("Msxml2.XMLHTTP");
}
saalis (e)
{
yrittää
{
xmlHttp = uusi ActiveXObject ("Microsoft.XMLHTTP");
}
saalis (e)
{
hälytys ("Selaimesi ei tue AJAX!");
palaa vääräksi;
}
}
}
2. Lähetetään pyyntö palvelimelle
Lähettääksesi pyynnön palvelimelle käytämme avoimen () menetelmän ja lähetä () -menetelmää.
Open () -menetelmällä on kolme argumenttia. Ensimmäinen argumentti määrittää, mitä menetelmää käytetään lähetettäessä pyyntöä (GET tai POST). Toinen argumentti määrittää palvelinpuolen komentosarjan URL-osoitteen. Kolmas argumentti täsmentää, että pyyntöä olisi käsiteltävä asynkronisesti. Send () -menetelmä lähettää pyynnön palvelimelle.
xmlHttp.open ( ”GET”,”time.asp” true);
xmlHttp.send (null);
3. Palvelinpuolen komentosarjan kirjoittaminen
ResponseText tallentaa palvelimelta palautetut tiedot. Täällä halutaan lähettää takaisin nykyinen aika. Koodi "time.asp" näyttää tältä:
<%
response.expires = -1
Response.Write (aika)
%>
4. Vastatakseen
Nyt meidän on käytettävä vastausta ja näytettävä se käyttäjälle.
xmlHttp.onreadystatechange = funktio ()
{
jos (xmlHttp.readyState == 4)
{
document.myForm.time.value = xmlHttp.responseText;
}
}
xmlHttp.open ( ”GET”,”time.asp” true);
xmlHttp.send (null);
}
5. Täytä koodi
Nyt meidän on päätettävä, milloin AJAX-toiminto on suoritettava. Annamme toiminnon toimimaan "kulissien takana", kun käyttäjä kirjoittaa jotain käyttäjätunnustekenttään. Täydellinen koodi näyttää tältä: