Turinys
AJAX Jį sudaro metodų ir technologijų rinkinys, leidžiantis užmegzti asinchroninį ryšį tarp to, ką klientas mato žiniatinklyje, ir informacijos, esančios tinklalapio serverio pusėje.Viena iš pagrindinių savybių, kurią galime pabrėžti, yra ta, kad ji remiasi skirtingais metodais HTTP Ką POST, GET, PUT arba DELETE kad būtų galima nusiųsti reikiamus duomenis į serverio programas.
Pradiniame vystymosi etape su AJAX skambučiai turėjo būti sukurti naudojant Javascript butas, kuris mums sugeneravo daug kodo „jQuery“ padeda mums supaprastinti dalykus, nes šios technologijos ir technologijos pritaikomos visuomenei, ir tai naudinga tiek kūrėjui, tiek naudotojui.
Kas yra AJAX?AJAX atitinka Asinchroninis „Javascript“ ir XML būtent Javascript Y XML asinchroninis, o tai taip pat reiškia, kad tai yra kažkas, kas nepriklauso nuo fiksuotos struktūros, tokios kaip scenarijus PHP kai nurodymai vykdomi nuosekliai, žinoma, išsaugomi skambučiai į klasių ir objektų metodus ir funkcijas.
Aukščiau pateiktas paaiškinimas suteikia mums galimybę įkelti informaciją arba išsiųsti ją iš naujo neįkėlus ar nepateikus „pilnos“ užklausos serveriui, mes ją pateikiame kabutėse, nes skambučiai AJAX Tai yra įprastos užklausos, tiesiog nebūtina atnaujinti viso puslapio, jei tai nėra pageidaujamas elgesys.
Šių metodų ir technologijų naudojimas turi tam tikrų pranašumų, apie kuriuos mažai kas žino, kad jie egzistuoja, daug kartų mes juos naudojame tik dėl tendencijos, tačiau, jei suprasime jų naudą, galėsime žinoti, kuriems projektams galime tai pritaikyti. daugiausiai iš to. Žemiau apžvelgsime keletą svarbiausių naudojimo pranašumų AJAX:
Pralaidumo naudojimo sumažinimasTai pasiekiame visų pirma dėl atskirų skyrių užklausų, todėl galime pasiekti, pavyzdžiui, nereikėdami iš naujo įkelti bendrų stilių ar vaizdų, jei norime atnaujinti tekstą.
Geresnė vartotojo patirtisPadidėjęs žiniatinklio programos greitis, vartotojas pastebimai pagerina naudojimą, be to, suteikia mums galimybę kaip kūrėjams padidinti sąveikos su mūsų išdėstytais elementais laipsnį.
Pašalinkite priklausomybę nuo naršyklėsNaudojant „jQuery“ nebereikia rašyti kodo, priklausančio nuo naršyklės, tai padeda mums pagerinti mūsų laiko kūrimo greitį ir produktyvumą.
Kadangi niekas nėra tobulas, naudojant AJAX Taip pat turime suprasti, kad yra tam tikrų trūkumų, dėl kurių galime susimąstyti ir pagalvoti, ar tai geriausias mūsų projekto pasirinkimas. Toliau matysime kai kuriuos iš šių punktų, kad prieš pradėdami techninę vadovo dalį turėtume išsamesnį vaizdą.
PriklausomybėJei klientas ar naudotojas naudoja labai seną naršyklę arba naudoja Javascript išjungta, mūsų programa gali nukentėti arba neveikti, todėl mes įpareigojame imtis ypatingų atvejų, kai negalime naudotis AJAX.
Parašykite papildomą kodąRemiantis mūsų programa, turime parašyti papildomą kodą, kad galėtume integruoti atsakymus, kuriuos gauname iš užklausų AJAX, pvz., pateikiami atsakymai HTML Y CSS.
Žinoma, šiuo metu labai sunku rasti nesuderinamą naršyklę Javascript Y „jQuery“Tačiau, priklausomai nuo mūsų srities, galime rasti atvejų, kurie gali labai apsunkinti gyvenimą.
Prašymas AJAX nuo „jQuery“ turi turėti pagrindinę struktūrą, kurioje turime nustatyti tam tikrus sistemai būtinus parametrus, turime nustatyti metodą HTTP užklausos maršrutą, atsakymo formatą ir galiausiai, ką daryti, jei užklausa bus sėkminga arba įvyks klaida. Pažvelkime į šį nefunkcinį kodą, kaip tai galime pamatyti:
$ .ajax ({type: "HTTP metodas", // POST, GET, PUT, DELETE url: "Užklausos kelias", // http: / / www.example.com/request dataType: "Duomenų tipas", / / html, xml, json success: funkcija dėl sėkmės, klaida: funkcija dėl klaidos}); Matome, kad kiekvienas mūsų aprašytas skyrius yra parametrai, kuriuos gauna mūsų užklausa ir kurie atliekami taikant šį metodą $ .ajax () kurį tiekia „jQuery“ tiesiogiai, ir tai yra kodo kaukė Javascript lėktuvas, atitinkantis kiekvieną kiekvienos palaikomos naršyklės variklį, kuris šiuo metu yra beveik visos naujausios reklamos, tokios kaip „Chrome“, „Firefox“, „Opera“, „Safari Internet Explorer“, ir tie, kurie buvo gauti iš mūsų minėtų variklių.
Dabar praktikoje pritaikysime tai, ką matėme ankstesniame skyriuje pateikdami užklausą AJAX iš puslapio HTML kurį ketiname sukurti šiame pavyzdyje. Turime žinoti, kad mums reikės naujausios versijos „jQuery“ galime gauti, tačiau galime naudoti tą, kurį jie saugo savo CDN, mums taip pat reikės nedidelio žiniatinklio serverio, kad galėtume nukreipti failus, kuriuos ketiname gauti asinchroniškai, tam galime naudoti WAMP į „Windows“, arba instaliacija ŠVIESA sistemose Linux, apie MAC platformas, kurias galime naudoti XAMP ar panašiai.
Į šį kodą pirmiausia įtraukiame „jQuery“, tada kūne sukursime etiketę su unikaliu ID, kur įdėsime mūsų užklausos atsakymo turinį, ir arti dokumento pabaigos pagaminsime etiketę scenarijus kur sugeneruosime kodą prašymui pateikti url mes pateiksime užklausą į aplanko, kuriame yra mūsų failai, indeksą, tai darome norėdami parodyti savo kodo veikimą, tačiau būdas tai padaryti yra paprašyti kito failo, kuris pateiks mums reikalingą atsakymą, žiūrėkite kodą:
AJAX užklausos pavyzdysApdorokite AJAX
Šiame paveikslėlyje matome, kaip viskas veikė, kur galime matyti sėkmingą atsakymą iš savo kodo.
Vienas iš dalykų, kurie „jQuery“ nori, kad mes nešvaistytume laiko ir kodo, kad dirbtume ilgą kelią, todėl jis siūlo mums skambučių nuorodas AJAX dažniausiai naudojami metodai, tokie kaip GET Y POST, todėl naudodami nuorodą išsaugome kelias kodo eilutes ir taip galime sumažinti savo programos svorį.
Dėl to oficialiuose dokumentuose „jQuery“ Turime visus esamus atvejus, tačiau ketiname pakartoti ankstesnį pavyzdį naudodami šiuo atveju spartųjį klavišą, tačiau prieš pamatydami funkcinį kodą, pažiūrėkime nefunkcinį pavyzdį:
$ .get (kelias, duomenys, „SuccessFunction“, „ResponseType“);
Kaip pastebėjome, šis skambutis yra daug mažesnis, o tai padeda mums turėti švaresnį ir lengvesnį kodą, dabar pritaikius tai ankstesniam pavyzdžiui, jis būtų toks:
AJAX užklausos pavyzdysApdorokite AJAX
Matome, kad eilučių ir simbolių skaičius buvo žymiai sumažintas, o tai pagerintų mūsų duomenų perdavimą naudojant mažesnį pralaidumą. Jei viską paleistume naršyklėje, mums būtų pateiktas toks atsakymas:
