Ajax Success: opis, funkcije, navodila za delo

Ajax Success je orodje za prenos podatkov s strežnika spletnega brskalnika brez ponovnega nalaganja celotne strani. V svojem delu uporablja objekt XMLHttpRequest, ki temelji na javascriptu za asinhronsko pošiljanje in sprejemanje informacij na strežniku v ozadju brez posredovanja uporabnika. Metoda je postala tako priljubljena, da skoraj ni druge aplikacije, ki ne uporablja Ajaxa. Primer nekaterih obsežnih spletnih aplikacij, ki jih upravlja Ajax Success, so Gmail, Google Zemljevidi, Google Dokumenti, YouTube, Facebook, Flickr in drugi.

Zmogljivosti med brskalniki

Ajax pomeni: A je sinhrono, javascript, in X ml. Kot je razvidno iz zapisa, proces uporablja javascript, oziroma skript z imenom jquery.js. jQuery je knjižnica javascript. Datoteka tehta le 96 KB, zapisana v javascriptu in deluje z imenom jquery.js, ki poenostavlja javascript programiranje z zagotavljanjem navzkrižnih brskalnikov za izbiro in obdelavo elementov DOM, obdelavo dogodkov, zahtevo Ajax Success in animacije.


jQuery je zelo priljubljen. V maju 2015 datoteko uporablja 642% vseh spletnih mest. Med knjižnicami in okviri jQuery je tržni delež jQuery 952%. Z drugimi besedami, večina sodobnih razvijalcev dela v jQuery, ne v surovi javascript. Prednosti jQuery:
  • podpora med brskalniki. To pomeni, da ista koda jQuery deluje v različnih brskalnikih: Chrome, Firefox, IE, Safari in Opera. Po drugi strani pa je za zagotavljanje podpore med brskalniki v neobdelanem javascriptu potrebno preveriti brskalnik in izdati ustrezne kode, saj različni brskalniki (zlasti IE) izvajajo funkcije na različne načine.
  • Izbira in manipulacija elementov DOM. "Poizvedba" se nanaša na izbiro elementov DOM v spletnem dokumentu za nadaljnjo manipulacijo.
  • Močna funkcija izbirnika za izbiro elementov, ki temeljijo na naslovih oznak HTML, na primer atribut HTML ID #debug, ime razreda CSS .error, če se uporablja napaka Ajax Success.
  • Ravnanje z dogodki

    jQuery omogoča enostavno rokovanje z javascript dogodki in ima posebne učinke in animacije, prilagaja programiranje za show /hide, fade-in /fade-out, slide-in /slide-out in po meri animacijo. Ajax Success zagotavlja preprost Ajax vmesnik za pošiljanje asinhronih HTTP GET /POST zahtev in obdelavo odgovorov.


    Z jQuery lahko napišete več vrstic kode, da zamenjate dvanajst kod javascript in jih zaženete na vseh brskalnikih, ne da bi morali za vsak posamezen test opraviti ločen preskus. Podpora med brskalniki je še posebej pomembna za proizvodnjo, saj uporabnik ne more preizkusiti svojih javascript kod v vseh brskalnikih. Jquery, Ajax Success uporablja več kot 60% spletnih strani na internetu. Za delo s procesom se predpostavlja, da je uporabnik seznanjen s HTML5 CSS3 in javascript, ki sta predpogoja za prehod jQuery.

    Uporaba jQuery

    JQuery ima dve različici. Druga različica ne podpira IE Postopek namestitve in konfiguracije:
  • Prenesite knjižnico jQuery s spletnega mesta.
  • Kopirajte javascript datoteko (na primer jquery-1.xx.x.min.js) v korenski imenik dokumenta, praviloma v podimeniku "js". "Min.js" je mini različica, namenjena proizvodnji, ki odstrani dodatne presledke in komentarje, da se zmanjša velikost datoteke, ki jo je treba takoj prenesti.
  • Za preskušanje in preučevanje se uporabljajo kodeRazličica «.Js».
  • Vključi v dokument HTML. V HTML4 /XHTML1.0 morate vključiti atribut type = "text /javascript" v začetno oznako.
  • Kot alternativo lahko uporabnik namesto strežnika jquery.js uporabi eno od CDN (Content Distribution Network) za servisiranje. To bo prihranilo nekaj omrežnega prometa in bo verjetno omogočilo hitrejši odziv. Poleg tega bo prenos jquery.js predpomnjen za ponovno uporabo:
  • CDN jQuery.com;
  • CDN Google;
  • Microsoft CDN.
  • Nekateri uporabniki raje postavijo javascript neposredno pred koncem telesa () namesto particije za boljšo hitrost, prav tako naložijo CSS pred javascriptom, saj se pogosto nanaša na CSS.

    Izbirniki skript in operacije

    Izbirnik Jquery, Ajax Success - najpomembnejša funkcija jQuery - ima posebno sintakso $ (). Lahko sprejme ime oznake, atribut id (s predpono #) ali ime razreda (s predpono točke). Pravzaprav podpira vse CSS selektorje. V primerjavi z funkcijami izbirnika v javascriptu je JQuery zelo preprost in za zgornji razred. Priloži upravljalnik dogodkov, ki bo deloval po izdelavi drevesa DOM. Dogodek se razlikuje od dogodka javascript, ki ne čaka na prenos zunanjih povezav, kot so slike. Te kode so nameščene v odseku, preden so ustvarjeni elementi, na katere se sklicujejo. To je običajna praksa jQuery:
    $ (document) .ready (handler) readyonloadready () Primer je izbirnik jQuery in operacije.
    Zahteva JQuery se nanaša na izbor elementov v HTML - dokument za nadaljnjo manipulacijo.
    Na primer:
  • $ (document) izberetrenutni dokument.
  • $ (p) izbere vse.
  • Elementi (izbirnik oznak).
  • $ (# hello) in $ (# message) izbere en element z atributom id = "hello" (ID-Selector).
  • $ (. Red) Izbere vse elemente, ki imajo atribut class = "red" (Class-Selector).
  • Dejansko je $ () bližnjica (vzdevek) za glavno funkcijo jQuery ().

    Elemental Content Management Methods

    Uporabnik lahko uporabi niz funkcij za "Line" in "To", saj večina funkcij vrne element, ki je v uporabi. V mnogih metodah, kot je html, jQuery uporablja isto ime metode za getter in setter, pri čemer razlikuje svoj argument. Na primer html) vrne innerHTML brez argumenta. Dokument "pripravljen" se običajno uporablja v jQuery, ki zagotavlja skrajšani vnos, zapisan kot $ (function () {}). Vrste upravljanja vsebin za izbrano postavko:
  • html () - dobite innerHTML;
  • html (vrednost) - nastavite notranjo HTML;
  • append (value) - doda innerHTML na konec;
  • prepend (value) - dodajte pred innerHTML;
  • pred (element) - dodajte element pred trenutnim elementom;
  • after (element) - doda element za trenutnim elementom;
  • addClass (vrednost), removeClass (vrednost), toggleClass (value) - dodajte, odstranite ali preklopite vrednost atributnega razreda.
  • JQuery ustvari samodejno ciklično funkcijo "Line?" In "to?", Na primer $ ('p') izbere vse elemente. $ ('p'). append () uporablja append () za vsak izbrani element v implicitni zanki.

    Uporabnik lahko uporabi tudi eksplicitno zanko skozi .each (funkcija () {}) (vrstica? Do?), Če potrebuje več izbranih elementov. Inside .each - $ (this) označuje element pri delu.

    Primer obdelave dogodka

    V tem primeruprikazuje, kako programirate upravljalnik dogodkov za dejanja uporabnika. Večina kod jQuery dejansko obravnava obdelovalce dogodkov za izbiro izbranih elementov.
    Primer ponazarja izbirnik jQuery in vgrajene funkcije.
    Postopek:
  • Z ustreznim izbirnikom jQuery izberite vir.
  • Določite dogodek, na primer klik z miško, tip ključa.
  • Napišite napovedovalec dogodkov in ga priložite viru.
  • Za JavaScript lahko pripnete vodja dogodkov, na primer klik, preklop med miško in predložite element z metodami jQuery.
  • Privzeti zagon lahko onemogočite tako, da se vrnete z .click (handler) .mouseover (handler) .submit (handler) false.
  • Znotraj funkcije $ (this) se nanaša na trenutni objekt. Čeprav $ (p) vrne elemente v matriki, lahko uporabite isto sintakso, da povežete manipulator dogodkov z EACH elementi.
    Prej je bil izvajalec javascriptov postavljen v oznake HTML. Praksa je, da jih pustite zunaj HTML oznak in jih združite v razdelek za boljšo obliko MVC.

    Zahteva in odzivna koda AJAX

    Nadaljevanje postopka:
    Če želite preskusiti podatke o funkciji uspeha Ajax, zaženite skript z spletnim strežnikom, na primer Apache: izbirnik $ (: submit) izbere vse $ (: text [name = "message"]) izberite Lahko uporabite $ .ajax () Ajaxova poizvedba:
  • ajax () vzame asociativno polje kot argument (pari ključ-vrednost);
  • tip določa način zahteve, na primer get ali post, za Ajax post Success;
  • url privzeto določa dejanski URL trenutnega dokumenta;
  • Podatki v obrazcu zagotavljajo poizvedovalni nizasociativno polje;
  • .done () pošlje nazaj, ko prejme odgovor na statusno kodo 200 (OK). Argument zahteva funkcijo odziva HTTP;
  • .fail () pošlje nazaj, ko prejme odgovor na statusno kodo NO 200 (OK);
  • Always () pošlje nazaj po dokončanju .done in .fail. Kot argument sprejme funkcijo no-arg.
  • osnove osveževanja javascripta

    jQuery je razširitev javascripta, ki je lahko razumljiva, če ima uporabnik javascript. Samo slediti nekaterim jQuery operacijam z uporabo orodij Firebug ali Web Developer. API jQuery je na voljo na spletnem mestu razvijalca. V jQuery, operacije so dane v handlerunder, ki teče po DOM drevo je ustvarjena, vendar pred nalaganjem zunanjih virov, kot so slike, enakovredno dajanje jQuery skripte neposredno pred zaključno oznako. To je bolj učinkovito kot vodnik javascripta. Poleg tega lahko uporabite več, da registrirate več obdelovalcev, ki bodo izvedeni v vrstnem redu, v katerem so bili registrirani. javascript se lahko uporabi le enkrat: $ (document) .ready (handler) onloadwindow.onload = handler.ready () window.onload = handler Vzame argument, ki je najpogosteje anonimna funkcija ali podana funkcija. Funkcija nima argumentov.
    Tako pogosto se uporablja, da obstaja kratica. $ (Document) .ready (handler) $ (handler).

    Ponavljanje po izbranih elementih

    Izbirnik jQuery lahko izbere elemente nič ali DOM. Izbrani elementi so oviti znotraj predmeta, kot so ,

    itd. Za vsako od teh elementov lahko izvedete ponovitev:
  • Implicitna iteracija z uporabo funkcije append () za vsak izbrani element v implicitni zanki.
  • Izrecna iteracija s funkcijo .each (funkcija).
  • $ (to).
  • Predvidevam, da želi uporabnik uporabiti niz operacij za vsak izbrani element, lahko uporabi iteracijo z izbranimi elementi. Sprejema argument kot argument, ki je lahko anonimen, ali razrešen ali funkcija spremenljivke. V funkciji lahko uporabite povezavo do postavke v delu: .each (funkcija) .each () $ (this). Poleg tega se $ (this) nanaša na objekt jQuery, ki je pod nadzorom, lahko pa uporablja tudi tisti, ki se nanaša na uporabljeni element DOM. To je: $ (this)=== Ta AND lahko uporablja metode JQuery, kot so .append (), .html () za $ (this), vendar ne to. Po drugi strani lahko uporabi operacijo DOM, na primer to.id.substring (05), kar pomeni prvih pet znakov atributa atributa DOM v procesu.

    Pisanje Ajaxa z uporabo jQuery

    Privzeta zahteva Ajax je asinhrona. Z drugimi besedami, .ajax () bo sproščen, skript ne bo čakal na odgovor, ampak bo prešel na naslednjo izjavo, da ne bo zaklenil ali zamrznil zaslona. Uporabnik lahko napiše Ajax Success Json z uporabo neobdelanega javascripta. Vendar pa jQuery veliko olajša nastavitev $ .Ajax ali parametrov $ .ajax URL. Te nastavitve so predmet pari ključa /vrednosti. Pogosto uporabljeni ključi: URL zahteve, ki se lahko postavi izven nastavitev zadnje oblike.
  • Tip - GET ali POST.
  • Podatki Ajax Uspeh - vpraša parametre (imena = pari)vrednosti) in izraženo kot objekt, na primer {ime: "peter", msg: "hello"} ali niz poizvedbe "name = peter & amp; msg = hello".
  • Podatkovni tip je pričakovani tip podatkov odziva, kot je besedilo, xml, json, script ali html.
  • Glave so predmet pari ključa /vrednosti glave poizvedbe.
  • Preverjanje strežnika za zahtevo Ajax Success php ima glavo "X-Request-With: XMLHttpRequest". Strežniški program lahko preveri, ali se Ajax pojavlja skozi to glavo, na primer v PHP.

    Varnostna vprašanja

    Da bi preprečili napade XSS (Cross-Site Scripting), lahko objekt XMLHttpRequest zahteva podatke od izvornega strežnika, ki streže stran. Pri prenosu scenarija morate biti previdni. Element HTML $ $ prenese podatke s strežnika in vnese vrnjeni HTML znotraj dogovorjenega elementa. To je najpreprostejša metoda Ajax za prenos podatkov s strežnika. Tukaj je primer zahtevanja funkcije Ajax Success na strežniku HTTP za navadno besedilo. V tem primeru uporabimo Ajax za asinhrono pošiljanje zahteve POST, da zahtevamo besedilno datoteko.
    To je odgovor na zahtevo Ajax:
    Ta primer se izvaja pod strežnikom HTTP (na primer Apache), ker pošlje zahtevo HTTP, ki bo uporabljena kot polnilo za besedilo odgovora. Vsebuje tudi hiperpovezavo za zagon poizvedbe Ajax (preko loadAjaxText ()). Ajax zahteva s parametri POST za strežnik PHP-HTTP, da dobi dinamičen odziv.
    Odjemalčeva HTML koda vsebuje dva "c" za vhod in izhod. Vsebuje tudi hiperpovezavo za zagon zahtevka php Ajax Success (preko javascript loadText ()).
    Rezultati scenarija so pridobljeniProces asinhrone izmenjave podatkov s spletnega strežnika s pomočjo javascripta potrjuje, da tudi brez posodobitve strani spletne aplikacije delujejo hitro in učinkovito. Aplikacije, splet uporabljajo model zahtevka ali odgovora s strežnika HTML, s čimer dobijo celotno stran. Posledica tega je, da uporabnik prejme rezultat, ko klikne gumb in čaka na odziv strežnika, ponovno pritisne in čaka na odgovor. Ajax izvaja operacije zahtev /odgovorov, od uporabnikov ne zahteva, da čakajo na odgovore strežnika.

    Sorodne publikacije