Katastrofien menestys php. Tervehdys, rakas ystävä! Esimerkkejä JSONP:n käytöstä

Avain/arvo-parien joukko, joka mukauttaa pyyntöä AJAX. Kaikki parametrit ovat valinnaisia... On sallittua, mutta ei suositeltavaa, asettaa oletusarvo mille tahansa parametrille käyttämällä $ .ajaxSetup () -menetelmää.
Menetelmä $ .ajax () tukee seuraavia vaihtoehtoja:

hyväksyy(oletus: riippuu tietotyyppi).

Tyyppi: PlainObject.
Avain/arvo-parien joukko, joille lähetetään Hyväksyä pyynnön otsikko. Tämä otsikko kertoo palvelimelle, millaisen vastauksen pyyntö hyväksyy vastauksena. Huomaa, että kohdassa määritetyn parametrin arvo tietotyyppi(tietotyyppi, jota odotamme palvelimelta) vastaa parametrissa määritettyä tyyppiä. Lisäksi palvelimelta tulevan vastauksen oikea käsittely edellyttää, että se on parametrissa muuntimet määritä funktio, joka palauttaa muunnetun vastausarvon. Esimerkiksi: $ .ajax (( hyväksyy: (oma tyyppi: " sovellus / x-some-custom-type" } , // määritä kuinka vastaus käsitellään muuntimet: ("teksti mycustomtype": funktio ( tulos) { // palauttaa muunnetun vastearvon palauta uusi tulos; )), // Odotettu tietotyyppi ("mycustomtype") tietotyyppi: "omatyyppi"));

asynk(oletus: tosi).

Tyyppi: Boolen.
Oletuksena kaikki pyynnöt lähetetään asynkronisesti. Jos haluat järjestää synkroniset pyynnöt, aseta tämä parametri arvoon false. Huomaa, että verkkotunnusten väliset pyynnöt ja elementti, parametri tietotyyppi millä on merkitystä "jsonp" eivät tue synkronisia pyyntöjä. Huomaa, että käyttämällä synkronisia pyyntöjä voit tilapäisesti estää selaimen poistamalla kaikki toimet käytöstä pyynnön ollessa aktiivinen.

ennen lähetystä

jqXHR

asetukset

ennen lähetystä

jQuery 1.5

ennen lähetystä

kätkö(oletus: true, for tietotyyppi "käsikirjoitus" ja "jsonp" väärä).

Tyyppi: Boolen.
Jos arvo on epätosi, selain ei tallenna pyydettyjä sivuja välimuistiin. Huomaa, että false toimii oikein vain PÄÄ ja SAADA pyynnöt.

saattaa loppuun.

Tyyppi: Funktio (jqXHR jqXHR, merkkijono tekstin tila).
Funktio, jota kutsutaan, kun pyyntö päättyy (toiminto suoritetaan AJAX-tapahtumien jälkeen "menestys" tai "virhe"). Kaksi parametria välitetään funktiolle: jqXHR(jQuery 1.4.x -objektissa XMLHTTPRequest) ja pyynnön tilaa vastaava rivi ( "menestys", "ei modifioitu", "ei sisältöä", "virhe", "Aikalisä", "keskeyttää", tai "parsererror"). jQuery 1.5:stä lähtien parametri saattaa loppuun voi ottaa joukon toimintoja, joita kutsutaan vuorotellen.

sisällys.

Tyyppi: PlainObject.
Objekti, joka koostuu merkkijono / regex-pareista, jotka määrittävät kuinka jQuery jäsentää (jäsentää) vastauksen sisältötyypistä riippuen. Lisätty jQuery 1.5:een.

sisältötyyppi(oletus: "sovellus / x-www-form-urlencoded; merkistö = UTF-8").

Tyyppi: Boolean tai String.
Määrittää pyynnössä määritetyn sisällön tyypin, kun tietoja lähetetään palvelimelle. jQuery 1.6:sta lähtien on sallittua määrittää arvo false, jolloin jQuery ei välitä otsikon kenttää Sisältötyyppi ollenkaan.

yhteydessä.

Tyyppi: PlainObject.
Kun AJAX-takaisinkutsut suoritetaan, niiden suorituskonteksti on ikkunaobjekti. Parametri yhteydessä voit määrittää funktion suorituskontekstin siten, että $ (this) viittaa tiettyyn DOM-elementtiin tai objektiin. Esimerkiksi: $ .ajax (( url: "testi.html", yhteydessä: $ (. myClass"), // funktion suorittamisen uusi konteksti menestys: toiminto () ( // jos pyyntö onnistuu, kutsu funktio$ (tämä) .html ("Kaikki on OK"); // lisää tekstisisältöä elementtiin class.myClassilla } } );

muuntimet

Oletusarvot:
("* teksti": window.String, // minkä tahansa tyypin tekstiksi"text html": true, // teksti html:ssä "text json": jQuery.parseJSON, // teksti JSON-muodossa "text xml": jQuery.parseXML // teksti XML-muodossa) Tyyppi: PlainObject.
Objekti, joka sisältää muunnettavan tietotyypin ja kuinka se muunnetaan. Kunkin muuntajan arvo on funktio, joka palauttaa muunnetun vastearvon. Lisätty jQuery 1.5:een.

crossDomain(oletus: epätosi saman verkkotunnuksen sisällä oleville pyynnöille, tosi verkkotunnusten välisille pyynnöille).

Tyyppi: Boolen.
Jos haluat tehdä verkkotunnusten välisen pyynnön ollessasi samassa verkkotunnuksessa (esimerkiksi jsonp-pyynnön), aseta tämän parametrin arvoksi tosi. Tämä mahdollistaa esimerkiksi pyynnön uudelleenohjauksen palvelimeltasi toiseen verkkotunnukseen. Lisätty jQuery 1.5:een.

Tyyppi: PlainObject tai String tai Array.
Palvelimelle lähetettävät tiedot. Jos ne eivät ole merkkijono, ne muunnetaan kyselymerkkijonoksi. varten SAADA kyselymerkkijono liitetään URL-osoitteeseen. Automaattisen käsittelyn estämiseksi voit käyttää parametria käsittelytiedot arvolla false. Jos dataa siirretään osana objektia, sen tulee koostua avain/arvo-pareista. Jos arvo on taulukko, jQuery sarjoittaa useita arvoja samalla avaimella (riippuen parametrin arvosta perinteinen jonka avulla voimme käyttää perinteistä serialisointityyppiä, joka perustuu $ .param -menetelmään).

dataFilter.

Tyyppi: Funktio (String tiedot, merkkijono tyyppi) => Mitä tahansa.
Toiminto kutsutaan AJAX-pyynnön onnistuneen suorittamisen jälkeen, ja sen avulla voit käsitellä palvelimen vastauksesta saatuja "raaka" tietoja. Tiedot on palautettava välittömästi käsittelyn jälkeen. Funktiolla on kaksi argumenttia: tiedot- palvelimelta merkkijonona vastaanotettu data ja tyyppi- tämän tiedon tyyppi (parametrin arvo tietotyyppi).

tietotyyppi(oletus: xml, json, käsikirjoitus, tai html).

Tyyppi: merkkijono.
Määrittää datatyypin, jonka odotat saavasi palvelimelta. Jos tietotyyppiä ei ole määritetty, jQuery yrittää määrittää sen vastauksen MIME-tyypin perusteella ( XML tyyppi MIME johtaa XML:ään jQuery 1.4:stä alkaen json antaa esineen JavaScript, käsikirjoitus suorittaa komentosarjan ja kaikki muu palautetaan merkkijonona).

Perustyypit (tulos välitetään ensimmäisenä argumenttina takaisinsoittofunktiolle menestys):

"xml"- palautuu XML asiakirja, joka voidaan renderöidä jQuerylla.

"html"- palautuu HTML pelkkänä tekstinä, tunnisteet

En kuvaile tätä esimerkkiä tässä yksityiskohtaisesti, koska käsittelimme sen yksityiskohtaisesti edellisessä artikkelissa (vain post () -menetelmällä). Huomautan vain, että tässä käytimme tyypin lisäksi muutamia muita parametreja. Aiemmin kuvattua url-parametria käytetään määrittämään POST-pyynnön tarkoitus. Lähetettävät tiedot määritetään dataparametrilla, joka asetetaan edellisessä artikkelissa kuvatulla serialize () -menetelmällä. Palvelimelta vastaanotettujen tietojen tyyppi määritetään dataType-parametrissa.

Työskentely Ajax Eventsin kanssa

Useiden parametrien avulla voit määrittää toimintoja, jotka käsittelevät tapahtumia, jotka voidaan laukaista koko Ajax-pyynnön elinkaaren ajan. Tällä tavalla määrität takaisinsoittotoiminnot, jotka ovat niin tärkeitä Ajax-pyynnöissä. Näit jo yhden niistä, kun tarkastelit onnistumisparametria edellisessä esimerkissä. Luettelo tapahtumiin liittyvistä parametreista ja niiden lyhyet kuvaukset näkyvät alla olevassa taulukossa:

Onnistuneiden pyyntöjen käsittely

Yllä olevissa esimerkeissä onnistumisparametria käytettäessä funktiokutsussa jätettiin pois kaksi argumenttia - pyynnön tulosta kuvaava sanoma ja jqXHR-objekti. Alla on esimerkki funktion käytöstä, joka ottaa nämä argumentit:

$ (funktio () ($ .ajax ((url: "mydata.json", menestys: funktio (data, tila, jqxhr) (console.log ("Tila:" + tila); console.log ("jqXHR status:" + jqxhr.status + "" + jqxhr.statusText); console.log (jqxhr.getAllResponseHeaders ()); var template = $ ("# kukkaTmpl"); template.tmpl (data.slice (0, 3)). appendTo ("# rivi1"); template.tmpl (data.slice (3)). appendTo ("# rivi2"); ))); ));

Statusargumentti on merkkijono, joka kuvaa pyynnön tulosta. Takaisinsoittotoiminto, jonka määritämme menestysparametrilla, suoritetaan vain onnistuneille pyynnöille, ja siksi tämän argumentin arvo on yleensä onnistuminen. Poikkeuksena on, kun käytät alla kuvattua ifModified-parametria.

Kaikkien Ajax-tapahtumien takaisinsoittofunktiot noudattavat samaa kaavaa, mutta tämä argumentti on hyödyllisin useille muille tapahtumille.

Viimeinen argumentti on jqXHR-objekti. Sinun ei tarvitse selvittää pyynnön tilaa ennen kuin alat työskennellä tämän objektin kanssa, koska tiedät, että toiminto suoritetaan vain pyynnön onnistuessa. Tässä esimerkissä jqXHR-objektia käytetään saamaan tietoa pyynnön tilasta ja otsikoista, jotka palvelin on sisällyttänyt vastaukseen, ja tulostamaan nämä tiedot konsoliin.

Tässä tapauksessa tulos näyttää tältä (riippuen siitä, mitä palvelinta käytät, sinulla voi olla erilainen otsikkosarja):

Virhe käsittelyssä

Virheparametria käytetään määrittämään funktio, jota kutsutaan, kun pyyntö epäonnistuu. Alla on asiaankuuluva esimerkki:

Virhe (väri: punainen; reunus: keskitasoinen punainen; täyttö: 4 kuvapistettä; marginaali: automaattinen; leveys: 200 kuvapistettä; tekstin tasaus: keskellä)

$ (funktio () ($ .ajax ((url: "NoSuchFile.json", menestys: funktio (data)) (var template = $ ("# flowerTmpl"); template.tmpl (data.slice (0, 3)) .appendTo ("# rivi1"); template.tmpl (data.slice (3)). appendTo ("# rivi2");), virhe: funktio (jqxhr, status, errorMsg) ($ ("

") .text (" Tila: "+ tila +" Virhe: "+ errorMsg) .insertAfter (" h1 ");)));));

Täällä pyydetään Json-tiedostoa, jota ei ole palvelimella, joten pyyntöä ei varmasti voida täyttää, minkä seurauksena virheparametrilla määritetty toiminto kutsutaan. Tämän funktion argumentit ovat jqXHR-objekti ja palvelimen vastauksessa vastaanotettu virhetilasanoma ja -virhesanoma. Tämän funktion sisällä dokumenttiin lisätään div-elementti, joka näyttää status- ja errorMsg-argumenttien arvot, kuten kuvassa:

Pyyntöparametrien määrittäminen ennen niiden lähettämistä

BeforeSend-parametrilla voit määrittää toiminnon, joka kutsutaan ennen pyyntöjen lähettämistä. Tämän avulla voit määrittää pyynnön viime hetkellä lisäämällä tai korvaamalla ajax () -menetelmälle välitettyjä parametreja (mikä voi olla erityisen hyödyllistä, jos useat pyynnöt käyttävät samaa objektia, joka sisältää vaaditut parametriarvot). Alla on esimerkki tämän lähestymistavan käytöstä:

") .text (" Tila: "+ tila +" Virhe: "+ errorMsg) .insertAfter (" h1 ");), beforeSend: toiminto (jqxhr, asetukset) (settings.url =" mydata.json ";)) ;)))

Yllä olevan funktion argumentit ovat jqXHR-objekti (josta voi olla hyötyä pyyntöotsikoiden asettamisessa tai pyynnön peruuttamisessa ennen sen lähettämistä) ja ajax () -metodille välitetyt parametrit sisältävä objekti. Tässä esimerkissä Ajax-pyynnön URL-osoite asetetaan beforeSend-parametrilla.

Useiden tapahtumakäsittelijöiden määrittäminen

Aiemmissa esimerkeissä reagoimme Ajax-pyyntöihin liittyvien tapahtumien esiintymiseen kutsumalla yhtä funktiota, mutta parametreissa menestys, virhe, valmis ja beforeSend voit asettaa joukon toimintoja, joista jokainen suoritetaan, kun vastaava tapahtuma käynnistyy. Yksinkertainen esimerkki tästä on alla:

$ (function () ($ .ajax ((success:, beforeSend: function (jqxhr, settings)) (settings.url = "mydata.json";))); function processData (data, status, jqxhr) (var template = $ ("# kukkaTmpl"); template.tmpl (data.slice (0, 3)). appendTo ("# rivi1"); template.tmpl (data.slice (3)). appendTo ("# rivi2"); ) toiminto reportStatus (data, tila, jqxhr) (console.log ("Status:" + status + "Result code:" + jqxhr.status);)));

Tässä esimerkissä onnistumisparametri on kahden funktion joukko, joista toinen käyttää dataa kohteiden lisäämiseen asiakirjaan ja toinen tulostaa tiedot konsoliin.

Tapahtumien kontekstin luominen

Kontekstiparametrilla voit määrittää elementin, joka määritetään tälle muuttujalle, kun tapahtumakäsittelijää kutsutaan. Tätä voidaan käyttää viittaamaan asiakirjan kohdeelementteihin ilman, että niitä tarvitsee valita käsittelijätoiminnossa. Alla on asiaankuuluva esimerkki:

$ (funktio () ($ .ajax ((menestys: funktio (data)) (var template = $ ("# flowerTmpl"); template.tmpl (data.slice (0, 3)). appendTo ("# rivi1") ; template.tmpl (data.slice (3)). appendTo ("# rivi2");), beforeSend: funktio (jqxhr, asetukset) (settings.url = "mydata.json";), konteksti: $ ("h1" "), täydellinen: funktio (jqxhr, status) (var color = status ==" menestys "?" vihreä ":" punainen "; this.css (" reunus "," paksu kiinteä "+ väri);))); ));

Tässä kontekstiparametriksi asetetaan jQuery-objekti, joka sisältää asiakirjan h1-elementit. Täydellisen parametrin määrittämässä funktiossa kehystetään valitut elementit (tässä tapauksessa elementti, koska dokumentissa on vain yksi h1-elementti) kutsumalla jQuery-objektin css () -metodia (tämän kautta viitattu). Reunuksen väri määräytyy pyynnön tilan perusteella.

Kontekstiparametrin avulla voit asettaa minkä tahansa objektin kontekstiksi ja olet vastuussa vain kyseiselle objektille sallittujen toimintojen suorittamisesta. Jos esimerkiksi määrität HTMLElement-elementin kontekstiksi, sinun on välitettävä kyseinen objekti $ ()-funktiolle ennen kuin kutsut siinä olevia jQuery-menetelmiä.

Perusparametrien asettaminen Ajax-pyyntöille

On olemassa joukko parametreja, joita voit käyttää Ajax-pyynnön perusasetusten tekemiseen (jotkin niistä, url ja tyyppi, käsittelimme edellä). Kaikista käytettävissä olevista vaihtoehdoista ne kiinnostavat vähiten, ja niiden nimet ovat enimmäkseen itsestäänselviä. Kyseiset parametrit näkyvät alla olevassa taulukossa:

Ajax-pyynnön peruskokoonpanoparametrit

Parametri	Kuvaus
hyväksyy	Asettaa pyynnön Hyväksy-otsikon arvoksi, joka määrittää selaimen tukemat MIME-tyypit. Oletusarvoisesti tämä arvo määräytyy dataType-parametrin mukaan
kätkö	False tarkoittaa, että palvelimen ei pitäisi tallentaa pyynnön sisältöä välimuistiin. Oletusarvoisesti kaikki tietotyypit tallennetaan välimuistiin paitsi script ja jsonp
sisältötyyppi	Asettaa pyynnön sisältökierroksen otsikon arvon
tietotyyppi	Ilmaisee, minkä tyyppistä dataa palvelimelta odotetaan. Jos tätä parametria käytetään, jQuery jättää huomioimatta palvelimen antamat tiedot pyynnön tyypistä.
otsikot	Määrittää pyyntöön sisällytettävät lisäotsikot ja arvot
jsonp	Määrittää merkkijonon, jota käytetään takaisinsoittotoiminnon sijaan, kun tehdään JSONP-pyyntöjä (domain-domain-pyyntöjä). Tämä parametri edellyttää neuvottelua palvelimen kanssa
jsonpCallback	Määrittää takaisinsoittotoiminnon nimen, jota käytetään jQueryn oletuksena käyttämän automaattisesti luodun satunnaisen nimen sijaan
Salasana	Määrittää salasanan, jota käytetään pyynnössä todennusmenettelyn läpiviennissä
scriptCharset	Kertoo jQuerylle, mitä merkistöä käytetään pyydetyn JavaScript-sisällön koodauksessa
Aikalisä	Asettaa pyynnön aikakatkaisun keston (millisekunteina).
käyttäjänimi	Määrittää käyttäjänimen, jota tulee käyttää pyynnössä, kun todennusmenettely suoritetaan

Aikakatkaisujen ja otsikoiden asettaminen

Käyttäjät eivät usein edes tiedä, että Ajax-pyyntöjä suoritetaan, ja siksi sallitun aikakatkaisun keston määrittäminen on hyvä idea, koska se säästää käyttäjät tuntemattoman prosessin valmistumisen odottamisen tuskalta. Alla on esimerkki aikakatkaisun asettamisesta pyynnölle:

$ (funktio () ($ .ajax ((aikakatkaisu: 5000, otsikot: ("X-HTTP-Method-Override": "PUT"), onnistuminen: toiminto (data)) (var template = $ ("# flowerTmpl") ; template.tmpl (data.slice (0, 3)). appendTo ("# rivi1"); template.tmpl (data.slice (3)). appendTo ("# rivi2");), virhe: toiminto (jqxhr , status, errorMsg) (console.log ("Virhe:" + tila);)));));

Tässä esimerkissä aikakatkaisuparametri asettaa aikakatkaisun enimmäiskestoksi 5 sekuntia. Jos pyyntöä ei suoriteta tässä ajassa, virheparametrilla määritetty toiminto kutsutaan ja tilaparametrin määrittämä virhekoodi näytetään.

Ajastin käynnistyy heti, kun pyyntö on välitetty selaimelle, ja useimmat selaimet rajoittavat suoritettavien samanaikaisten pyyntöjen määrää. Tämä tarkoittaa, että on olemassa vaara, että pyyntöä ei edes käynnistetä aikakatkaisun umpeutuessa. Tämän välttämiseksi sinun on oltava tietoinen selaimen rajoituksista sekä muiden käynnissä olevien Ajax-pyyntöjen koosta ja odotetusta kestosta.

Lisäksi tässä alla olevassa esimerkissä otsikkoparametrilla lisätään otsikko pyyntöön. Datanäyttöobjektia käytetään otsikoiden määrittämiseen. Tässä käytetty otsikko voi olla hyödyllinen rakennettaessa verkkosovelluksia, jotka tukevat REST-arkkitehtuurityyliä, kunhan palvelin tunnistaa sen oikein.

Lisäkonfiguraatioparametrien käyttö

Seuraavissa osissa kuvataan hyödyllisimmät ja huomionarvoisimmat lisäparametrit, jotka koskevat Ajax-pyyntöjä. Yleensä niitä käytetään harvoin, mutta tapauksissa, joissa tarve ilmenee, ne ovat välttämättömiä. Näiden asetusten avulla voit hienosäätää, miten jQuery on vuorovaikutuksessa Ajaxin kanssa.

Synkronisten pyyntöjen tekeminen

Pyyntöjen suoritustapaa ohjataan käyttämällä async-parametri... Tämän parametrin oletusarvo on tosi, mikä tarkoittaa, että pyyntö suoritetaan asynkronisessa tilassa, kun taas false tarkoittaa synkronista tilaa.

Kun pyyntö suoritetaan synkronisesti, ajax () -menetelmä toimii normaalin toiminnon tavoin ja selain jatkaa muiden komentosarjakäskyjen suorittamista vasta pyynnön päätyttyä.

Tietoja jätetään huomioimatta

Käyttämällä ifModified-parametri voit varmistaa vain, että tiedot noudetaan, jos ne ovat muuttuneet edellisen pyynnön jälkeen. Tämän käyttäytymisen määrittää Last-Modified -otsikko. Tämän ansiosta on mahdollista välttää turha tiedonsiirto, joka ei anna käyttäjälle uutta tietoa verrattuna siihen, mitä hänellä jo on. Oletusarvoisesti ifModified on epätosi, mikä käskee jQueryä ohittamaan Last-Modified -otsikon ja toimittamaan tiedot joka tapauksessa.

Alla on esimerkki tämän parametrin käytöstä:

$ (funktio () ($ ("painike"). napsauta (funktio (e) ($ .ajax ("mydata.json", (ifModified: tosi, menestys: funktio (data, tila)) (if (status == " menestys ") ($ (" # rivi1, # rivi2 "). lapset (). poista (); var template = $ (" # flowerTmpl "); template.tmpl (data.slice (0, 3)). appendTo ( "# rivi1"); template.tmpl (data.slice (3)). appendTo ("# rivi2");) else if (tila == "ei modifioitu") ($ ("img"). css ("border" , "paksu kiinteä vihreä");)))); e.preventDefault ();))));

Tämä esimerkki asettaa ifModified-parametrin arvoksi tosi. Onnistumisfunktiota kutsutaan aina, mutta jos se ei ole muuttunut edellisen sisällön pyytämisen jälkeen, dataargumentti on määrittelemätön ja status-argumentti muutettu arvo.

Tässä tapauksessa suoritetut toimet määräytyvät status-argumentin arvon mukaan. Jos tämän argumentin arvo on menestys, data-argumenttia käytetään kohteiden lisäämiseen asiakirjaan. Jos status-argumenttia ei ole muokattu, käytämme css () -menetelmää kehystämään elementit, jotka ovat jo dokumentissa.

Vasteena painikkeeseen liittyvään napsautustapahtumaan kutsutaan ajax () -menetelmää. Tämä mahdollistaa saman kyselyn toistamisen yhä uudelleen ja uudelleen ifModified-parametrin vaikutuksen osoittamiseksi, kuten kuvassa:

Vaikka tämä vaihtoehto onkin hyödyllinen, suosittelen sen käyttöä varoen. Jos pyyntö lähetetään käyttäjän toimenpiteen (kuten painikkeen painamisen) seurauksena, on mahdollista, että käyttäjä napsauttaa painiketta, koska edellinen pyyntö ei toteutunut odotetulla tavalla.

Kuvittele, että pyydät tietoja, mutta onnistumisparametrissa määritetty menetelmä sisältää virheen, joka estää asiakirjan sisältöä päivittämästä oikein. Sitten seuraava toimintosi on yrittää napsauttaa painiketta uudelleen saavuttaaksesi odotetun tuloksen. Karkeasti ottaen ifModified-parametrin käyttö voi jättää käyttäjän toimet huomiotta ja pakottaa hänet ryhtymään vakavampiin toimiin ongelman korjaamiseksi.

Käsitellään vastauskoodia

StatusCode-parametri voit valita lisätoimintoja HTTP-pyyntöjen vastauskoodin mukaan. Sitä voidaan käyttää joko onnistumis- ja virheparametrien sijasta tai niiden lisäksi. Alla on esimerkki statusCode-parametrin omasta käytöstä:

$ (function () ($ .ajax ((url: "mydata.json", statusCode: (200: function (data)) (var template = $ ("# flowerTmpl");) template.tmpl (data.slice (0, 3)). AppendTo ("# rivi1"); template.tmpl (data.slice (3)). AppendTo ("# rivi2");), 404: funktio (jqxhr, status, errorMsg) ($ ("

") .text (" Tila: "+ tila +" Virhe: "+ errorMsg) .insertAfter (" h1 ");))));));

Tässä statusCode-parametri on määritetty objektiksi, joka muodostaa suhteen HTTP-pyyntöjen vastauskoodien ja vastaavien palvelimella suoritettavien toimintojen välille. Se, mitkä argumentit funktioille välitetään, riippuu siitä, heijastaako vastauskoodi onnistunutta pyyntöä vai virhettä.

Jos koodi (esimerkiksi 200) vastaa onnistunutta pyyntöä, argumentit ovat samat kuin ne, jotka välitettäisiin onnistumisparametrin määrittämälle funktiolle. Muussa tapauksessa (esimerkiksi vastauskoodilla 404, mikä tarkoittaa, että pyydettyä tiedostoa ei löytynyt) argumentit ovat samat kuin ne, jotka välitettäisiin virheparametrin määrittämälle funktiolle.

Kuten näet, tämä työkalu ei anna suoraa tietoa vastauskoodeista. Käytän sitä paljon selaimen ja palvelimen vuorovaikutusten virheenkorjauksessa, yleensä selvittääkseni, miksi jQuery ei toimi haluamallani tavalla. Käytän tällöin statusCode-parametria menestys- ja virheparametrien lisäksi ja tulostan tiedot konsoliin. Jos näitä parametreja käytetään yhdessä, suoritetaan ensin onnistumis- ja virhefunktiot ja sitten statusCode-parametrin määrittämät funktiot.

Esipuhdistusvastetiedot

Käyttämällä dataFilter-parametri voit määrittää toiminnon, jota kutsutaan esipuhdistamaan palvelimen palauttamat tiedot. Tämä työkalu on välttämätön tapauksissa, joissa palvelimen lähettämät tiedot eivät oikein sovi sinulle joko siksi, että ne on muotoiltu väärin tai koska niiden joukossa on dataa, jota et halua käsitellä.

Tämä työkalu auttaa minua paljon, kun työskentelen Microsoft ASP.NET -palvelimien kanssa, jotka liittävät ylimääräisiä tietoja JSON-tietoihin. Tällaisten tietojen poistaminen dataFilter-parametrin avulla vaatii vain vähän vaivaa. Alla on esimerkki dataFilter-parametrin käytöstä:

$ (funktio () ($ .ajax ((url: "mydata.json", menestys: funktio (data)) (var template = $ ("# flowerTmpl"); template.tmpl (data.slice (0, 3)) .appendTo ("# rivi1"); template.tmpl (data.slice (3)). appendTo ("# rivi2");), dataType: "json", dataFilter: funktio (data, dataType) (if (dataType = = "json") (var filteredData = $ .parseJSON (data); filteredData.shift (); return JSON.stringify (filteredData.reverse ());) else (palauta tiedot;))));));

Funktiolle välitetään palvelimelta saadut tiedot ja dataType-parametrin arvo. Jos dataType-parametria ei käytetä, toinen argumentti asetetaan määrittämättömäksi. Sinun tehtäväsi on palauttaa suodatetut tiedot. Tässä esimerkissä keskitymme JSON-tietoihin:

Var filteredData = $ .parseJSON (data); filteredData.shift (); palauttaa JSON.stringify (filteredData.reverse ()); ...

Jotta esimerkki olisi havainnollistavampi, suoritetaan joitain lisätoimintoja. Ensin JSON-tiedot muunnetaan JavaScript-taulukkoon käyttämällä jQuery parseJSON -menetelmää. Sitten ensimmäinen elementti poistetaan taulukosta shift () -menetelmällä ja sen muiden elementtien järjestys käännetään käänteisellä () -menetelmällä.

Toiminnon tarvitsee vain palauttaa merkkijono, joten kutsumme JSON.stringify () -menetelmää tietäen, että jQuery muuntaa tiedot JavaScript-objektiksi ennen onnistumisfunktion kutsumista. Tässä esimerkissä esitettiin mahdollisuus poistaa elementti taulukosta, mutta tilanteesta riippuen voimme suorittaa minkä tahansa muunlaisen käsittelyn.

Lopputulos näkyy kuvassa:

Tietojen muuntamisen hallinta

Tallensin viimeiseksi arvostelun yhdestä suosikkiasetuksestani. Olet ehkä huomannut, että jQuery suorittaa automaattisesti joitain käteviä muunnoksia, kun se noutaa tietyt tietotyypit. Esimerkiksi vastaanottaessaan JSON-tietoja jQuery tarjoaa onnistumisfunktion käyttämällä JavaScript-objektia alkuperäisen JSON-merkkijonon sijaan.

Tällaisten muunnosten hallitsemiseksi käytä muuntimen parametri... Tämän parametrin arvo on objekti, joka määrittää vastaavuuden tietotyyppien ja niiden käsittelyyn käytettyjen funktioiden välillä. Alla oleva esimerkki näyttää, kuinka tätä parametria käytetään HTML-tietojen automaattiseen muuntamiseen jQuery-objektiksi:

$ (function () ($ .ajax ((url: "flowers.html", // Tässä esimerkissä lataamme HTML-merkinnän, ei JSON-tietojen menestys): function (data, status, jqxhr) (var elems = data.filter ("div"). addClass ("dcell"); elems.slice (0, 3) .appendTo ("# rivi1"); elems.slice (3) .appendTo ("# rivi2");), muuntimet: ( "teksti html": funktio (data) (palauttaa $ (data);))));));

Tämä esimerkki rekisteröi funktion teksti-html-tietotyypille. Huomaa välilyönnit määritetyn MIME-tyypin komponenttien välillä (toisin kuin teksti- / html-muodossa). Toiminto ottaa palvelimelta vastaanotetun tiedon ja palauttaa muunnetut tiedot. Tässä tapauksessa datamuunnos koostuu kukka.html-tiedoston sisältämän HTML-fragmentin välittämisestä $ () -funktiolle ja tuloksen palauttamisesta. Tämä tarkoittaa, että normaalit jQuery-menetelmät koskevat objektia, joka välitetään data-argumenttina onnistumisfunktiolle.

Tiedonmuuntimien kanssa työskentely voi olla liian innostunutta. Yritän aina välttää kiusausta tehdä näillä toiminnoilla enemmän kuin minun pitäisi. Joskus minulla on esimerkiksi houkutus soveltaa mallia JSON-tietoihin ja lähettää takaisin tuloksena olevat HTML-elementit. Vaikka tämä temppu on erittäin kätevä, se tekee karhunpalveluksen, jos joku muu yrittää laajentaa koodiasi tai esimerkiksi joudut itse myöhemmin järjestämään intensiivistä tietojenkäsittelyä saadaksesi sen alkuperäisessä muodossaan.

Ajax-pyyntöjen määrittäminen ja suodatus

Nyt kun tunnet ajax () -menetelmän ja sen kanssa käytettävissä olevat parametrit, voimme tarkastella muutamia jQueryn tarjoamia lisämenetelmiä kyselyjesi mukauttamisen helpottamiseksi.

Oletusasetusten määrittäminen

AjaxSetup () -menetelmä Voit asettaa parametriarvoja, joita käytetään oletuksena kaikissa Ajax-pyynnöissä, mikä vapauttaa sinut tarpeesta määrittää parametreja jokaiselle pyynnölle. Alla on esimerkki tämän menetelmän käytöstä:

") .text (" Tila: "+ tila +" Virhe: "+ errorMsg) .insertAfter (" h1 ");), muuntimet: (" text html ": function (data) (palauttaa $ (data);)) )); $ .ajax ((url: "flowers.html", menestys: funktio (data, tila, jqxhr) (var elems = data.filter ("div"). addClass ("dcell"); elems.slice ( 0, 3) .appendTo ("# rivi1"); elems.slice (3) .appendTo ("# rivi2");)));));

AjaxSetup () -menetelmää kutsutaan jQuery $ -funktiolla samalla tavalla kuin ajax () -menetelmää kutsuttaessa. AjaxSetup () -menetelmän argumentti on objekti, joka sisältää parametriarvot, joita haluat käyttää oletuksena kaikissa Ajax-pyynnöissä. Tässä esimerkissä asetamme oletusarvot aikakatkaisu-, globaali-, virhe- ja muuntimetparametreille.

Kun ajaxSetup () -menetelmä on kutsuttu, meidän on määritettävä vain parametrien arvot, joita haluamme muuttaa tai joita ei ole oletuksena annettu. Tämä säästää huomattavasti aikaa, kun joudut tekemään monta kyselyä samoilla parametriarvoilla.

Suodatuspyynnöt

AjaxSetup () -menetelmä määrittää peruskonfiguraatioparametrien arvot, jotka koskevat kaikkia Ajax-pyyntöjä. Menetelmä tarjoaa mahdollisuuden dynaamisesti määrittää parametreja yksittäisille Ajax-pyynnöille ajaxPrefilter ()... Alla on esimerkki tämän menetelmän käytöstä:

$ (function () ($ .ajaxSetup ((timeout: 15000, yleinen: false, error: function (jqxhr, status, errorMsg)) ($ ("

") .text (" Tila: "+ tila +" Virhe: "+ errorMsg) .insertAfter (" h1 ");), muuntimet: (" text html ": function (data) (palauttaa $ (data);)) )); $ .ajaxPrefilter ("json html", funktio (asetukset, originalSettings, jqxhr) (if (originalSettings.dataType == "html") (settings.timeout = 2000;) else (jqxhr.abort ();)) ) $ .ajax ((url: "flowers.html", dataType: "html", menestys: toiminto (data, tila, jqxhr) (var elems = data.filter ("div"). addClass ("dcell"); elems.slice (0, 3) .appendTo ("# rivi1"); elems.slice (3) .appendTo ("# rivi2");)));));

Määrittämäsi toiminto suoritetaan jokaiselle uudelle Ajax-pyynnölle. Funktiolle välitetyt argumentit ovat pyyntöparametrit (mukaan lukien ajaxSetup () -metodilla asettamasi oletusarvot) sekä ajax () -metodille välitetyt alkuperäiset parametrit (ei kuitenkaan oletusarvoja) ja pyynnön jqXHR-objekti.

Teemme muutoksia ensimmäisenä argumenttina annettuun objektiin, kuten esimerkissä näkyy. Jos tässä skenaariossa dataType-parametri on ajax () -menetelmälle välitettyjen parametrien joukossa, aikakatkaisun kestoksi asetetaan kaksi sekuntia. Kaikkien muiden pyyntöjen lähettämisen estämiseksi jqXHR-objektissa kutsutaan keskeytysmenetelmää ().

Mielestäni ei kannata kertoa, mitä AJAX on, koska verkon saapuessa kaksi nollaa useimmat käyttäjät ovat jo nostaneet nenänsä sivujen uudelleenlatauksista kokonaan, ja jQueryn myötä toteutus on yksinkertaistunut huomattavasti...

Huomautus: Kaikissa esimerkeissä käytetään lyhennettyä tapaa kutsua jQuery-menetelmiä funktion avulla $ (dollarin merkki)

Aloitetaan yksinkertaisimmasta - HTML-koodin lataamisesta sivulle tarvitsemamme DOM-elementtiin. Latausmenetelmä sopii tähän tarkoitukseen. Tämä menetelmä voi ottaa seuraavat parametrit:

pyydetyn sivun url
funktio, jonka tulos syötetään (valinnainen parametri)

Tässä on esimerkki JavaScript-koodista:

// sivun latauksen lopussa
$ (asiakirja). valmis (toiminto () (
// klikkaa elementtiä id = esimerkki-1
$ ("# esimerkki-1"). napsauta (toiminto () (
// lataa HTML-koodi esimerkki.html-tiedostosta
$ (tämä). lataa ("ajax / esimerkki.html");
} )
} ) ;

Esimerkki ladatusta tiedosta (tiedoston sisältö esimerkki.html):

jQuery.ajax

Tämä on yksinkertaisin menetelmä, ja kaikki seuraavat menetelmät ovat vain kääreitä jQuery.ajax-menetelmälle. Tällä menetelmällä on vain yksi syöttöparametri - objekti, joka sisältää kaikki asetukset (muistamisen arvoiset parametrit on korostettu):

async - asynkroninen pyyntö, oletuksena tosi
välimuisti - ota käyttöön / poista käytöstä selaimen tietojen välimuisti, oletuksena tosi
contentType - oletuksena "sovellus / x-www-form-urlencoded"
tiedot- lähetetty data - merkkijono tai objekti
dataFilter - suodatin syötettäville tiedoille
tietotyyppi- takaisinsoittotoimintoon palautettu tietotyyppi (xml, html, komentosarja, json, teksti, _default)
globaali - trigger - vastaa globaalien AJAX-tapahtumien käytöstä, oletuksena tosi
ifModified - trigger - tarkistaa, onko palvelimen vastauksessa muutoksia, jotta uutta pyyntöä ei lähetetä, oletuksena epätosi
jsonp - palauta takaisinsoittotoiminnon nimi toimimaan JSONP:n kanssa (oletusarvoisesti luotu lennossa)
processData - oletusarvoisesti lähetetyt tiedot kääritään objektiin ja lähetetään muodossa "application / x-www-form-urlencoded", tarvittaessa muuten - poista käytöstä
scriptCharset - koodaus - relevantti JSONP- ja JavaScript-latauksessa
aikakatkaisu - aikakatkaisuaika millisekunteina
tyyppi- HANKI tai POSTAA
url- pyydetyn sivun URL-osoite

Paikallinen:

beforeSend - käynnistyy ennen pyynnön lähettämistä
virhe - jos tapahtui virhe
onnistuminen - jos virheitä ei ole tapahtunut
valmis - syttyy pyynnön lopussa

HTTP-valtuutuksen (O_o) järjestäminen:

käyttäjätunnus - kirjautuminen
salasana - salasana

Esimerkki javaScript "a:

$ .ajax ((
url: "/ajax/example.html", // määritä URL-osoite ja
tietotyyppi: "json", // ladattujen tietojen tyyppi
menestys: funktio (data, textStatus) ( // ripusta käsittelijämme onnistumisfunktioon
$ .each (data, funktio (i, val) ( // käsittelee vastaanotetut tiedot
/* ... */
} ) ;
}
} ) ;

jQuery.get

Lataa sivun GET-pyynnöllä tietojen siirtämiseen. Se voi ottaa seuraavat parametrit:

pyydetyn sivun url
lähetetyt tiedot (valinnainen)
takaisinsoittotoiminto, jolle syötetään tulos (valinnainen parametri)
takaisinsoittofunktioon palautettu tietotyyppi (xml, html, komentosarja, json, teksti, _default)

Lomakkeen lähettäminen

Voit lähettää lomakkeen jQueryn kautta käyttämällä mitä tahansa luetelluista tavoista, mutta lomakkeesta tietojen "keräämisen" helpottamiseksi on parempi käyttää jQuery Form -laajennusta.

Tiedostojen lähettäminen

Voit ladata tiedostoja jQueryn kautta käyttämällä Ajax File Upload -laajennusta tai One Click Upload -laajennusta

Esimerkkejä JSONP:n käytöstä

JSONP:n käyttö on huomionarvoista, koska se on yksi tavoista toteuttaa verkkotunnusten välinen tiedonlataus. Jos liioittelemme hieman, niin tämä on etä JavaScript "a, joka sisältää tarvitsemamme tiedot JSON-muodossa, sekä kutsun paikalliseen toimintoomme, jonka nimen määritämme etäpalvelinta käytettäessä (yleensä tämä on parametri soita takaisin). Seuraava kaavio (napsautettava) voi osoittaa tämän hieman selkeämmin:

Kun työskentelet jQueryn kanssa, takaisinsoittotoiminnon nimi luodaan automaattisesti jokaiselle etäpalvelimen puhelulle, tätä varten riittää, että käytät muotoa GET-pyyntö:
http://api.domain.com/?type=jsonp&query=test&callback=?
Viimeinen kysymysmerkki (?) Korvataan takaisinsoittotoiminnon nimellä. Jos et halua käyttää tätä menetelmää, sinun on erikseen määritettävä takaisinsoittofunktion nimi käyttämällä jsonp-vaihtoehtoa, kun kutsut jQuery.ajax () -menetelmää.

Tämä artikkeli näyttää koodiesimerkit, joita käytän ajax-pyyntöjen lähettämiseen palvelimelle jQueryn kautta. Heidän tehtävänsä voivat olla erilaisia, joten voit käyttää niille erilaisia toimintoja, jotka yksinkertaistavat koodin kirjoittamista.

Pyydä html-tietoja Lataa-toiminnolla

Tämä on yksinkertaisin ajax-pyyntö jQueryn kautta, joka hakee html-tietoja ja lisää ne dom-elementtiin id = "result" (elementin sisältö korvataan):

$ ("# tulos"). lataa (" ");

Edistyksellisempi käyttötapa kuormalle:

$ ("# tulos"). lataa (" ", (par1: arvo1, par2: arvo2, ...), funktio (vastaus, tila, xhr) (jos (tila ==" menestys ") (hälytys (" Valmis ");) else (hälytys (" Virhe: "+ xhr.status +" "+ xhr.statusText);)));

Tässä esimerkissä parametrit välitetään myös palvelimelle ja vastauksen saatuaan tarkistetaan, onko tapahtunut virhe (esimerkiksi palvelimelta ei saatu vastausta) ja eri toimintoja.

Ajax-pyynnöt GET- ja POST-toiminnoilla

Nämä funktiot lähettävät ajax-pyynnön get and post http -menetelmillä. Tässä on pari esimerkkiä niiden käytöstä.

$ .get (" ", // pyynnön lähetysosoite (par1: arvo1, par2: val2, ...), // joidenkin tietojen lähettäminen pyyntöfunktiolla (data) (// joitakin toimintoja palvelintiedoista vastaanotetuilla tiedoilla) );

Tietojen siirto on valinnaista, samoin kuin toimintojen suorittaminen palvelimelta vastauksen saatuaan, ts. Tässä tapauksessa rivit 3 ja 4-6 voidaan tarvittaessa poistaa ja siten lyhentää koodia edelleen.

Palvelimelta vastaanotettujen tietojen tyyppi voidaan määrittää lisäämällä dataType (katso alla) - oletusarvoisesti se määritetään automaattisesti.

Viestin käyttö on samanlaista, mutta seuraavassa esimerkissä käytän funktiokutsua saatuani vastauksen palvelimelta.

$ .post (" ", (par1: arvo1, par2: arvo2, ...), onSuccess); toiminto onSuccess (data) (// joitakin toimintoja palvelintiedoista vastaanotetuilla tiedoilla)

Itse asiassa get- ja post-funktiot ovat lyhennettyjä versioita ajax-funktiosta, jota käsittelen alla.

Haetaan json-tietoja getJSON:n avulla

getJSON on lyhennetty versio ajax-pyynnöstä, joka käyttää GET-menetelmää ja vastaanottaa tietoja json-muodossa. Menetelmä on kätevä esimerkiksi hankkia jonkinlainen taulukko datan kanssa ja sitten työskennellä sen kanssa.

$ .getJSON (" ", (par1: arvo1, par2: arvo2, ...)). menestys (funktio (data) (// tee jotain tiedoilla, esim. käymme ne läpi silmukassa ja tulostamme: for (var i = 0; i

Palvelinpuolella ohjelma muodostaa taulukon ja muuntaa sen json-merkkijonoksi esimerkiksi näin:

$ arr = array (); $ arr = array ("id" => 10, "text" => "test line 1"); $ arr = array ("id" => 20, "text" => "test line 2"); $ arr = array ("id" => 30, "text" => "test line 3"); echo json_encode ($ arr);

Samalla tavalla voit siirtää stdClass-objekteja palvelimelta muuntamalla ne json-merkkijonoksi.

Yksinkertainen ajax-pyyntö jQueryn kautta AJAX-toiminnolla

Annan nyt esimerkin yksinkertaisesta hakupyynnöstä ajax-funktiolla ja html-tietojen saamisesta.

$ .ajax ((url: " ", dataType:" html ", menestys: toiminto (data) (// joitakin toimintoja vastaanotettujen datatietojen kanssa)));

Pyyntö palvelimelle tehdään get-metodilla, koska pyynnön tyypistä vastaava parametri, tyyppi oletuksena on GET.

Monimutkaisempi esimerkki ajax-pyynnöstä jQueryn kautta

Esimerkki pyynnön tekemisestä ajax-toiminnolla, tiedonsiirrolla post-menetelmällä ja tapahtumankäsittelyllä. Alla kuvailen muita useimmin käytettyjä parametreja.

$ .ajax ((url: " ", kirjoita:" post ", data:"<отправляемые_данные>", // voi olla merkkijono, mutta voit esimerkiksi näin: $ (" input, input: checked, input: checked, select, textarea ") dataType:" json ", beforeSend: function () ($ (" # sendajax " ) .button ("lataus");), suorita: function () ($ ("# sendajax"). painike ("reset");), menestys: function (json) (// joitakin toimintoja vastaanotettujen tietojen kanssa ), virhe: toiminto (xhr, ajaxOptions, thrownError) (hälytys (thrownError + "\ r \ n" + xhr.statusText + "\ r \ n" + xhr.responseText);)));

Lähetä tiedot -painike:

Yllä olevassa esimerkissä painiketta painettaessa painikkeen tila muuttuu ensin (teksti muuttuu "Sending ..." ja se muuttuu passiiviseksi), mikä tehdään beforeSend-parametrilla. Sitten pyyntö lähetetään vaadittujen tietojen siirron kanssa. Saatuaan vastauksen palvelimelta painikkeen tila palaa edelliseen tilaan (teksti muuttuu "Lähetä", aktivoituu). Vastaus vastaanotetaan json-datana.

Kuvaan lyhyesti ajax-pyynnön lähettämisen parametreja, joista voi useimmiten olla hyötyä:

url	Ajax-pyynnön lähetysosoite
tyyppi	GET- tai POST-pyynnön lähettäminen
tiedot	Tiedot lähetetään palvelimelle. Se voi olla merkkijono, jossa on parametrit ja niiden arvot muodossa par1 = arvo1 & par2 = val2 & ..., jQuery-objekti, esimerkiksi $ ("syöttö") tai muuta dataa.
tietotyyppi	Palvelimelta vastaanotettujen tietojen tyyppi. Voi olla html, json, teksti, skripti ja xml.
kätkö	Pyynnön selaimen välimuisti (false - älä välimuistiin).
asynk	Pyynnön asynkroninen suoritus, ts. ohjelma jatkaa suorittamista odottamatta palvelimen vastausta. Jos määrität false, pyyntö suoritetaan synkronisesti, eikä sivu vastaa mihinkään ennen kuin palvelimelta on saatu vastaus.
käsittelytiedot	Lähetetyn tiedon muuntaminen url-muotoon. Jos et halua, että tietoja ei muunneta, aseta arvoksi false. Esimerkiksi kun lähetät kuvan palvelimelle tai xml-tietoihin.
sisältötyyppi	Siirrettyjen tietojen tyyppi, oletuksena "application / x-www-form-urlencoded; charset = UTF-8". Jos määrität false, tyyppiä ei välitetä otsikkoon, mikä voi olla tarpeen esimerkiksi lähetettäessä kuvaa palvelimelle.
ennen lähetystä	Toiminto, joka suoritetaan ennen ajax-pyynnön lähettämistä.
saattaa loppuun	Toiminto, joka suoritetaan sen jälkeen, kun palvelimelta on saatu vastaus (joko onnistuu tai ei).
menestys	Toiminto, joka suoritetaan, kun pyyntö onnistuu.
virhe	Toiminto, joka suoritetaan virheen sattuessa.

Alla on muutamia esimerkkejä ajax-pyyntöjen käytöstä.

Lomakkeen lähettäminen, jossa on kaikki tiedot ajax-pyyntö jQueryn kautta

Esimerkki html-lomakekoodista:

JavaScript-koodi:

$ ("# omalomake"). lähetä (funktio (e) (e.preventDefault (); $ .ajax ((tyyppi: $ (this) .attr ("method"), url: ") ", data: $ (this) .serialize (), async: false, dataType:" html ", menestys: toiminto (tulos) (hälytys (" Lomake lähetetty");)));));

Jos haluat estää sivua latautumasta uudelleen, kun napsautat "lähetä" -painiketta, peruuta ensin selaimen tavalliset toiminnot käyttämällä e.preventDefaults () .

Tietoparametrissa välitämme kaikki lomakekentät käyttämällä $ (tämä) .serialize ()- tämä toiminto muuntaa kaikki syötteet ja valinnat palvelimelle lähetettäväksi merkkijonoksi.

Myös parametria käytetään tässä async: false joten mitään muuta ei voi napsauttaa tai tehdä ennen kuin lomake on lähetetty palvelimelle.

Kuvan tai tiedoston lähettäminen ajax-pyynnöllä jQueryn kautta

Tehtävä lähettää tiedosto tai kuva palvelimelle lataamatta sivua uudelleen tapahtuu melko usein. Tässä esimerkissä analysoin 2 pelimerkkiä kerralla: tiedoston valinta painamalla -painiketta, joka voidaan kehystää haluamallasi tavalla, ja näyttää edistymisen tiedostoa siirrettäessä palvelimelle ajax-pyynnöllä.

html-koodi tulee olemaan seuraava:

#addfile (sijainti: suhteellinen; ylivuoto: piilotettu; leveys: 180px; korkeus: 34px;) #load_file (sijainti: absoluuttinen; ylhäällä: 0; vasen: 0; leveys: 180px; korkeus: 34px; fontin koko: 0px; peittävyys : 0; suodatin: alfa (opasiteetti: 0);) #load_file: hover (kursori: osoitin;)

Ajatuksena on, että painikkeen päällä näytetään vakiosyöte tiedoston valitsemiseksi, mutta se on täysin läpinäkyvä ja sillä on samat mitat kuin painikkeella. Siten käyttäjä näkee painikkeen, mutta kun hän vie hiiri sen päälle, hän itse asiassa vie hiiri syötteen päälle. Vastaavasti, kun hän napsauttaa painiketta, tiedoston valintasyöttöä painetaan. Jotta kohdistin ei vilkuisi tiedoston valinnan jälkeen, fonttikooksi on asetettu 0px.

Nyt javascript-koodi tiedoston lähettämiseksi palvelimelle, joka näyttää edistymisen:

$ (funktio () ($ ("# load_file"). on ("muuta", lataustiedosto);)); funktio loadfile () ($ ("# addfile span"). html ("0% ladattu"); tiedostot = $ ("# load_file"). tiedostot; var form = new FormData (); form.append ("lataa" , tiedostot); $ .ajax ((url: " ", type:" POST ", data: form, cache: false, processData: false, contentType: false, xhr: function () (var myXhr = $ .ajaxSettings.xhr (); if (myXhr.upload) (myXhr. upload.addEventListener ("progress", ShowProgress, false);) palauttaa myXhr;, täydellinen: funktio (data) ($ ("# addfile span"). html ("Lataa kuva"); $ ("# load_file") .val ("");), menestys: toiminto (viesti) (hälytys (viesti);), virhe: toiminto (jqXHR, textStatus, errorThrown) (hälytys (textStatus + "" + errorThrown);)));) funktio ShowProgress (e) (if (e.lengthComputable) ($ ("# addfile span"). html ("Loaded" + Math.round (100 * e.loaded / e.total) + "%");))

Kun lataat tiedostoa palvelimelle, painike näyttää kuinka monta % on jo siirretty palvelimelle. Kun lataus on valmis, painikkeen nimi palautetaan entisellään ja tiedoston syötteen arvo asetetaan tyhjäksi, jotta voit valita uuden tiedoston uudelleen.

Esimerkki palvelinpuolelta php:ssä (Eugenen pyynnöstä):

$ viesti = ""; if (tyhjä ($ _ FILES ["lataa"] ["nimi"]) || $ _FILES ["upload"] == "ei mitään") ($ message = "Et ole valinnut tiedostoa";) else if ($ _FILES [ "lataus"] ["koko"] == 0 || $ _FILES ["lataus"] ["koko"]> 9437184) ($ message = "Tiedoston koko ei täytä standardeja (enintään 9 Mt )";) else if ( ($ _FILES ["lataa"] ["tyyppi"]! = "Kuva / jpeg") && ($ _FILES ["lataa"] ["tyyppi"]! = "Kuva / pjpeg") && ($ _FILES ["lataa "] [" tyyppi "]! =" kuva / gif ") && ($ _FILES [" lataa "] [" tyyppi "]! =" kuva / png ")) ($ viesti =" Vain JPG-, GIF-kuvia ja PNG-kuvia voidaan lähettää . ";) else ($ ftype = $ _FILES ["lataa"] ["tyyppi"]; $ fname = "uusinimi_kuva.". ($ ftype == "image / gif"? "gif": ($ ftype == "image / png"? " png ":" jpg ")); if (move_uploaded_file ($ _ FILES [" upload "] [" tmp_name "], $ _SERVER [" DOCUMENT_ROOT "]." / files /".$ fname )) ($ message = "Kuvan lataus onnistui. ";) else ($ message =" Jotain meni pieleen Vastaanottaja. Yritä ladata tiedosto uudelleen. ";)) Poistu ($ viesti);

Tiedot ladatusta kuvasta sisältyvät tiedostoon $ _FILES ["lataa"], koska tiedoston lisäsi komentosarja seuraavasti: form.append ("lataa", tiedostot); Vastaavasti php-ohjelmalta vaaditaan vain, että tarkistetaan, että tiedosto vastaa odotettuja parametreja, siirretään tiedosto haluttuun kansioon (esimerkissä tiedostot-kansioon) halutulla nimellä (esimerkissä uusinimi_kuva) ja palauttaa vastauksen selaimeen, joka näytetään esimerkissäni käyttäjälle hälytys (viesti) -komennolla;

On monia tilanteita, joissa ajax-pyyntöjen käyttö on mahdollista ja jopa välttämätöntä, eikä niitä kaikkia voi tässä analysoida. Siitä huolimatta, jos sinulla on ehdotuksia, mitä muita esimerkkejä on järkevää lisätä tähän, kirjoita kommentteihin.

AJAX on joukko teknologioita, joita käytetään verkkokehityksessä interaktiivisten sovellusten luomiseen. AJAXin avulla voit siirtää tietoja palvelimelta lataamatta sivua uudelleen. Tällä tavalla voidaan saada erittäin vaikuttavia tuloksia. Ja jQuery-kirjasto tekee AJAX:n toteuttamisesta paljon helpompaa sisäänrakennetuilla menetelmillä.

Tekniikan toteuttamiseen käytetään menetelmää $ .ajax tai jQuery.ajax:

$ .ajax (ominaisuudet) tai $ .ajax (url [, ominaisuudet])

Toinen parametri lisättiin jQueryn versioon 1.5.

url- pyydetyn sivun osoite;

ominaisuuksia- pyydä ominaisuuksia.

Täydellinen luettelo parametreista on jQuery-dokumentaatiossa.

Tässä opetusohjelmassa käytämme useita yleisimmin käytettyjä parametreja.

menestys (toiminto)- tämä toiminto kutsutaan pyynnön onnistuneen suorittamisen jälkeen. Funktio vastaanottaa 1-3 parametria (käytetyn kirjaston versiosta riippuen). Mutta ensimmäinen parametri sisältää aina palvelimelta palautetut tiedot.

tiedot (objekti / merkkijono)- käyttäjätiedot, jotka välitetään pyydetylle sivulle.

tietotyyppi (merkkijono)- mahdolliset arvot: xml, json, script tai html. Kuvaus palvelimen vastauksessa odotettavissa olevien tietojen tyypistä.

tyyppi (merkkijono)- pyynnön tyyppi. Mahdolliset arvot: GET tai POST. Oletus: GET.

url (merkkijono) on pyynnön URL-osoite.

Esimerkki 1

Yksinkertainen tekstinsiirto.

$ .ajax ((url: "response.php? action = sample1", menestys: funktio (data) ($ (. tulokset"). html (data);)));

Vastauksessa on .result div -elementti.

Vastausta odotellen

Palvelin vain palauttaa merkkijonon:

Echo "Esimerkki 1 - lähetys suoritettu onnistuneesti";

Esimerkki 2

Välitämme mukautetut tiedot PHP-skriptille.

$ .ajax ((tyyppi: "POST", url: "response.php? action = sample2", data: "name = Andrew & lempinimi = Aramis", menestys: toiminto (data)) ($ (. tulokset"). html ( data);)));

Palvelin palauttaa merkkijonon, johon on lisätty välitetyt tiedot:

Echo "Esimerkki 2 - siirto suoritettu onnistuneesti. Parametrit: name =". $ _POST ["nimi"]. ", lempinimi =". $ _POST ["lempinimi"];

Esimerkki 3

JavaScript-koodin välittäminen ja suorittaminen

$ .ajax ((dataType: "script", url: "response.php? action = sample3"))

Palvelin suorittaa koodin:

Echo "$ (". Tulokset "). Html (" Esimerkki 3 - JavaScriptin suorittaminen ");";

Esimerkki 4

Käytämme XML:ää. Esimerkkiä voidaan käyttää ulkoisen XML:n, kuten RSS-syötteen, kanssa työskentelyyn.

$ .ajax ((dataType: "xml", url: "response.php? action = sample4", menestys: funktio (xmldata) ($ (". tulokset"). html (""); $ (xmldata) .find ("tuote"). kukin (funktio () ($ ("") .html ($ (tämä) .teksti ()). appendTo (. tulokset");));)));

Palvelimen pitäisi palauttaa XML-koodi:

Otsikko ("Sisältötyyppi: sovellus / xml; merkistö = UTF-8"); kaiku<< Kohta 1 Kohta 2 Kohta 3 Kohde 4 Kohde 5 XML;

Esimerkki 5

Käytämme JSON-dataa. Syöteparametreja voidaan käyttää tuloksena olevan objektin attribuutteina.

$ .ajax ((dataType: "json", url: "response.php? action = sample5", menestys: funktio (jsondata) ($ (. tulokset").) html ("Nimi =" + jsondata.name + " , Lempinimi = "+ jsondata.lempinimi);)));

Palvelimen tulee palauttaa tiedot JSON-muodossa:

$ aRes = array ("nimi" => "Andrew", "lempinimi" => "Aramis"); request_once ("Palvelut_JSON.php"); $ oJson = uusi Palvelut_JSON (); echo $ oJson-> koodaa ($ aRes);