Ajax sijoittuu melko korkealle siellä suurimpien syiden vuoksi käyttää jQueryä. JQuery ei vain korjaa selainten välisiä ongelmia, vaan tekee syntaksista erittäin helppokäyttöisen ja ymmärrettävän.
Tässä videossa me lyömme selvittämään, mikä Ajax on ollenkaan. Tarkastelemme lomake-elementtiä, joka lähetettäessä tekee GET- tai POST-pyynnön (metodi-määritteen määrittämänä) määrittämääsi URL-osoitteeseen (määritettynä toimintomääritteellä). Se on vain HTML, ei taustakoodia tai JavaScriptiä tapahdu lainkaan. Mutta tämä lähetys aiheuttaa sivun muutoksen, latautuu kirjaimellisesti uudelle URL-osoitteelle aivan kuten linkkiä napsauttamalla.
Ajax antaa meille mahdollisuuden tehdä kyseinen GET- tai POST-pyyntö taustalla lataamatta sivua uudelleen. Ytimessä se on Ajaxin koko asia. Ja se on erittäin voimakas. Se on suurelta osin vastuussa siitä, miksi modernit verkkosivustot toimivat ja tuntevat tapansa.
Ajax "seisoi" asynkronista JavaScriptiä ja XML: ää, mutta se jätetään nykyään suurelta osin huomiotta, koska se ei tarkoita paljoa. Tästä syystä myös isojen kirjainten poistaminen. Saatat myös joskus nähdä ”XHR”, joka on lyhenne sanoista XMLHttpRequest, joka on Ajaxin natiivi ydintekniikka.
Ero GET: n ja POST: n välillä on lähinnä: GET on tiedon hankkiminen, eikä sen pitäisi olla vastuussa tietojen muuttamisesta ja POST on nimenomaan tietojen muuttamisesta. Voit lukea lisää tästä StackOverflow-säikeestä.
GET-pyynnön tekeminen jQueryssä on hämmästyttävän helppoa:
$.get( "URL", function(data) ( // do something with data )); ));
URL-osoite on paikka, josta haluat saada tietoja. Toinen parametri on takaisinkutsutoiminto, joka suoritetaan, kun Ajax-pyyntö onnistui. Tärkein parametri on ensimmäinen, data, jolla on pyynnöstä saamansa tiedot.
Ajax-pyynnöt voivat joskus epäonnistua. Yksi syy epäonnistumiseen voi olla itse selain ja sen suojauskäytännöt. Selaimet ovat itse sääntöjä siitä, mistä sisältöä voi pyytää. Pyynnöt voidaan aina tehdä samalle verkkotunnukselle, josta pyyntö tulee. Mutta jos kyseessä on eri verkkotunnus, sen on sallittava se erikseen.
Voit lukea kaiken tästä osoitteesta enable-cors.org. CORS eli ”Cross-Origin Resource Sharing”. Katsomme esimerkkiä, jossa CORS ei ole käytössä ja Ajax-pyyntö epäonnistuu. Yksi vakio ja helppo tapa korjata tämä olettaen, että palvelin on Apache, on asettaa otsikko, joka sallii CORS: n .htaccess-tiedoston kautta:
Header set Access-Control-Allow-Origin "*"
Videossa siirrämme Ajax-pyynnön vain CodePeniin, joka käsittelee Ajaxin oletusarvoisesti hyvin.
Helppo juustoa:
Katso Chris Coyierin (@chriscoyier) kynä fBInl CodePenistä