Jquery ajax on asynkroninen. Yksinkertainen esimerkki PHP:n ja AJAXin käytöstä. Lomaketietojen ja POST-pyyntöjen sarjoittaminen

Kuvaus: Suorittaa asynkronisen HTTP (Ajax) -pyynnön.

Lisätty versioon: 1.5
Lisätty versioon: 1.0

$.ajax()-funktio on kaikkien jQuerylla lähetettyjen Ajax-pyyntöjen taustalla. Usein tätä funktiota ei tarvitse kutsua, koska on olemassa useita korkeamman tason vaihtoehtoja, kuten $.get() ja .load(), joita on helpompi käyttää. Jos tarvitaan vähemmän yleisiä valintoja, voit määrittää pyynnön joustavammin $.ajax()-toiminnolla.

Yksinkertaisimmassa muodossaan $.ajax()-funktio voidaan kutsua ilman argumentteja:

Tärkeää: Oletusasetukset voidaan määrittää käyttämällä $.ajaxSetup()-funktiota.

Tämä esimerkki, jossa ei käytetä parametreja, lataa nykyisen sivun sisällön, mutta ei tee mitään tulokselle. Voit käyttää tulosta ottamalla käyttöön yhden takaisinsoittotoiminnoista.

jqXHR-objekti

$.ajax():n palauttama jQuery XMLHttpRequest (jqXHR) -objekti on ollut alkuperäisen XMLHttpRequest-objektin pääjoukko jQuery 1.5:stä lähtien. Se sisältää esimerkiksi responseText- ja responseXML-ominaisuudet sekä getResponseHeader()-metodin. Kun pyynnössä käytetty siirto on jotain muuta kuin XMLHttpRequest (esimerkiksi JSONP-pyynnön komentosarjatunniste), jqXHR-objekti emuloi alkuperäistä XHR-toimintoa mahdollisuuksien mukaan.

jQuery 1.5.1:stä lähtien jqXHR-objekti sisältää myös overrideMimeType()-menetelmän (tämä oli saatavilla jQuery 1.4.x:ssä, mutta se poistettiin tilapäisesti jQuery 1.5:ssä). .overrideMimeType()-metodia voidaan käyttää beforeSend()-käsittelijässä esimerkiksi muuttamaan sisältötyypin otsikkokenttää:

url: "http://fiddle.jshell.net/favicon.png" ,

beforeSend: funktio (xhr) (

xhr.overrideMimeType("teksti/plain; charset=x-user-defined" );

Valmis(funktio (data) (

if (console && console.log) (

console.log("Näyte tiedoista:" , data.slice(0 , 100 ));

$.ajax()-metodin palauttama jqXHR-objekti jQuery 1.5:ssä toteuttaa Promise-rajapinnan ja antaa sille kaikki Promise-ominaisuudet, -menetelmät ja -käyttäytyminen. Nämä menetelmät ottavat yhden tai useamman argumentin, jotka kutsutaan, kun $.ajax():lla aloitettu pyyntö on valmis. Tämän avulla voit määrittää useita käsittelijöitä yhdelle pyynnölle ja jopa määrittää käsittelijöitä pyynnön suorittamisen jälkeen. (Jos pyyntö on jo suoritettu, käsittelijöille soitetaan välittömästi). Käytettävissä olevat Promise-menetelmät jqXHR-objektissa:

jqXHR.done(funktio(data, tekstiTila, jqXHR) ());
jqXHR.fail(funktio(jqXHR, tekstiTila, errorThrown) ());
jqXHR.always(function(data|jqXHR, textStatus, jqXHR|errorThrown) ( )); (lisätty jQuery 1.6:een)
Vaihtoehto täydellisen käsittelijän luomiselle, .always()-menetelmä korvaa vanhentuneen .complete()-menetelmän.
jqXHR.then(funktio(data, tekstiTila, jqXHR) (), funktio(jqXHR, tekstiTila, errorThrown) ());

Huomaa: Käsittelijät jqXHR.success() , jqXHR.error() ja jqXHR.complete() poistetaan jQuery 3.0:ssa. Voit käyttää jqXHR.done() , jqXHR.fail() ja jqXHR.always() vastaavasti.

Taaksepäin yhteensopivuuden takaamiseksi XMLHttpRequest-koodin kanssa jqXHR-objekti tarjoaa seuraavat ominaisuudet ja menetelmät:

readyState
Tila
statusTeksti
vastausXML ja/tai vastausteksti, kun pyyntö palautti vastaavasti xml:n ja/tai tekstin
setRequestHeader(nimi, arvo) standardista poikkeavat otsikot korvaavat vanhan arvon uudella sen sijaan, että ketjuttaisivat vanhat ja uudet arvot
getAllResponseHeaders()
getResponseHeader()
statusCode()
keskeyttää()

Ei ole olemassa onreadystatechange-mekanismia, koska done, fail, always ja statusCode kattavat kaikki mahdolliset vaatimukset.

Takaisinsoittotoimintojen järjestys

Parametrit beforeSend, error, dataFilter, menestys ja valmiit ottavat kaikki takaisinsoittofunktioarvot, jotka kutsutaan sopivina aikoina.

jQuery 1.5:stä alkaen epäonnistuneet ja valmiit -toiminnot ja jQuery 1.6:sta lähtien aina ensin kutsutaan hallitusta jonosta, jolloin kullekin jonoelementille on mahdollista käyttää useampi kuin yksi käsittelijä. Katso viivästetyt menetelmät, jotka toteuttavat $.ajax()-menetelmäkäsittelijöiden sisäiset ominaisuudet.

$.ajax()-menetelmän tarjoamat takaisinsoittotoiminnot ovat seuraavat:

beforeSendiä kutsutaan aina; ottaa parametreiksi jqXHR-objektin ja asetusobjektin.

virhe kutsutaan, jos pyyntö epäonnistuu. Hyväksyy jqXHR-objektin, virhetilamerkkijonon ja poikkeusobjektin tarvittaessa. Jotkut sisäänrakennetut virheet tarjoavat merkkijonon poikkeusobjektina: "keskeytä", "aikakatkaisu", "Ei kuljetusta".

dataFilter kutsutaan heti, kun vastaustiedot on vastaanotettu onnistuneesti. Ottaa palautetut tiedot ja dataType-parametrin arvon parametreiksi ja sen on palautettava (mahdollisesti muokattu data) välittääkseen onnistuneen käsittelijän käyttöön.

menestystä kutsutaan, jos pyyntö onnistuu. Hyväksyy vastaustiedot, onnistumiskoodin sisältävän merkkijonon ja jqXHR-objektin.

Lupausten käsittelijät - .done() , .fail() , .always() ja .then() - suoritetaan siinä järjestyksessä, jossa ne on rekisteröity.

Valmis kutsutaan, kun pyyntö on valmis, riippumatta pyynnön onnistumisesta tai epäonnistumisesta. Hyväksyy jqXHR-objektin, muotoillun merkkijonon, jonka tila on onnistunut tai virheellinen.

Tietotyypit

Erilaisia tyyppejä Vastaukset $.ajax()-kutsuun joutuvat erilaisiin esikäsittelyihin ennen onnistumiskäsittelijän ohittamista. Tyyppi alustava valmistelu riippuu vastauksessa määritetystä Content-Type-otsikkokentästä, mutta se voidaan määrittää eksplisiittisesti dataType-vaihtoehdolla. Jos dataType on määritetty, Content-Type-otsikkokenttä jätetään huomioimatta.

mahdollista seuraavat tyypit tiedot: teksti, html, xml, json, jsonp ja komentosarja.

Jos teksti tai html on määritetty, esikäsittelyä ei tapahdu. Tiedot yksinkertaisesti välitetään onnistumiskäsittelijälle ja niihin pääsee käsiksi jqXHR-objektin responseText-ominaisuuden kautta.

Jos xml on määritetty, vastaus jäsennetään käyttämällä jQuery.parseXML:ää, ennen kuin se välitetään XMLDocumentin onnistumiskäsittelijälle. XML-dokumenttiin pääsee käsiksi jqXHR-objektin responseXML-ominaisuuden kautta.

Jos json on määritetty, vastaus jäsennetään jQuery.parseJSON-komennolla ennen kuin se välitetään onnistumiskäsittelijän objektiin. Tuloksena oleva JSON-objekti on käytettävissä jqXHR-objektin responseJSON-ominaisuuden kautta.

Jos komentosarja on määritetty, $.ajax() suorittaa palvelimelta vastaanotetun JavaScript-koodin ennen tämän koodin välittämistä merkkijonona onnistumiskäsittelijälle.

Jos jsonp on määritetty, $.ajax() lisää automaattisesti (oletus) callback=? -parametrin pyynnön URL-merkkijonoon. . $.ajax()-metodille välitetyn asetusobjektin jsonp- ja jsonpCallback-parametreja voidaan käyttää takaisinkutsun URL-parametrin nimen ja JSONP-nimen määrittämiseen. Palvelimen on palautettava oikea Javascript, joka välitetään JSONP-käsittelijälle. $.ajax() suorittaa palautetun JavaScript-koodin kutsuen JSONP-funktiota sen nimellä, ennen kuin välittää JSON-objektin onnistumiskäsittelijälle.

Tietojen lähettäminen palvelimelle

Oletusarvoisesti Ajax-pyynnöt lähetetään GET:n avulla HTTP-menetelmä. Jos tarvitaan POST-menetelmä, menetelmä tulee määrittää asetuksissa tyyppiparametrilla. Tämä parametri vaikuttaa siihen, kuinka dataparametrin tiedot lähetetään palvelimelle. Lähettää tietoja pyynnöt lähetetään aina palvelimelle UTF-8-koodauksessa W3C XMLHTTPRequest -standardin mukaisesti.

Tietoparametri voi sisältää minkä tahansa muotoisen merkkijonon, kuten sarjoitetun muodon avain1=arvo1&avain2=arvo2 tai Javascript-objektin (avain1: "arvo1", avain2: "arvo2") . Jos käytetään viimeinen vaihtoehto, tiedot muunnetaan merkkijonoksi jQuery.param()-menetelmällä ennen sen lähettämistä. Tämä käsittely voidaan poistaa käytöstä määrittämällä processData-parametri arvoksi false. Käsittely ei ehkä ole toivottavaa, jos haluat lähettää XML-dokumentin palvelimelle, jolloin muuta contentType-parametri application/x-www-form-urlencoded-parametrista sopivampaan MIME-tyyppiin.

Lisäasetukset

Globaali parametri estää .ajaxSend() , .ajaxError() ja vastaavilla menetelmillä rekisteröityjen käsittelijöiden suorittamisen. Tämä voi olla hyödyllistä esimerkiksi piilottaaksesi .ajaxSend():llä toteutetun latausilmaisimen, jos pyyntöjä suoritetaan usein ja nopeasti. Verkkotunnusten välisissä ja JSONP-pyynnöissä globaali parametri asetetaan automaattisesti arvoon false .

Jos palvelin suorittaa HTTP-todennuksen ennen vastauksen antamista, käyttäjänimi ja salasana on lähetettävä käyttämällä käyttäjätunnus- ja salasanavaihtoehtoja.

Ajax-pyynnöt ovat aikarajoitettuja, jotta virheet voidaan havaita ja käsitellä parhaan käyttökokemuksen tarjoamiseksi. Pyyntöjen aikakatkaisut asetetaan yleensä joko oletusarvoisesti tai globaalisti käyttämällä $.ajaxSetup()-toimintoa sen sijaan, että määritettäisiin aikakatkaisuparametri pyyntökohtaisesti.

Oletuksena pyynnöt tehdään aina, mutta selain voi antaa vastauksen välimuististaan. Voit estää välimuistissa olevien tulosten käytön asettamalla välimuistiparametrin arvoon false . Jos haluat käynnistää kyselyn, joka raportoi, kuinka resurssi on muuttunut edellisen pyynnön jälkeen, aseta ifModified-parametrin arvoksi true .

scriptCharset-parametri sallii koodauksen, jota käytetään nimenomaisesti pyynnöissä, joissa käytetään tunnistetta (eli tyyppiä dataskripti tai jsonp). Tämä pätee, jos etäkomentosarja ja nykyinen sivu käyttävät eri koodauksia.

Sanan Ajax ensimmäinen kirjain tarkoittaa "asynkronista", mikä tarkoittaa, että toiminto tapahtuu rinnakkain ja sen suoritusjärjestystä ei taata. $.ajax()-metodin async-parametrin oletusarvo on true , mikä osoittaa, että koodin suoritusta voidaan jatkaa pyynnön tekemisen jälkeen. Tämän vaihtoehdon asettaminen arvoon false (ja siksi tulostesi asynkronisemman tekeminen) ei ole suositeltavaa, koska se voi saada selaimen lakkaamaan vastaamasta.

$.ajax()-metodi palauttaa XMLHttpRequest-objektin, jonka se luo. Yleensä jQuery käsittelee tämän objektin luomisen sisäisesti, mutta voit määrittää xhr-parametrilla funktion, joka ohittaa oletuskäyttäytymisen. Palautettu objekti voidaan yleensä hylätä, mutta sen on tarjottava käyttöliittymä matala taso manipuloida ja hallita pyyntöä. Erityisesti .abort():n kutsuminen tälle objektille on pysäytettävä ennen kuin se on valmis.

Ajax laajennus

jQuery 1.5:stä alkaen jQueryn Ajax-toteutus sisältää esisuodattimia, siirtoja ja muuntajia, joiden avulla voit mukauttaa Ajax-pyyntöjä erittäin joustavasti tarpeiden mukaan.

Muunnoksia käyttämällä

$.ajax()-muuntimet tukevat muuntamista tietotyypistä toiseen. Jos kuitenkin haluat muuttaa mukautetun tietotyypin muotoon kuuluisa tyyppi data (esim. json), sinun on lisättävä vastaavuuden sisältötyypin ja todellisen tietotyypin välille määritys contents-parametrilla:

Joka ei salli kyselyitä muille toimialueille, aliverkkotunnuksille, porteille tai protokollille.

Tämän käytännön rajoitukset eivät koske komentosarja- ja JSONP-pyyntöjä.

Tekee pyynnön palvelimelle lataamatta sivua uudelleen. Tämä on matalan tason menetelmä, jolla on iso määrä asetukset. Se on kaikkien muiden ajax-menetelmien toiminnan taustalla. Siinä on kaksi käyttövaihtoehtoa:

url - pyyntöosoite.
asetukset - tässä parametrissa voit määrittää asetukset tästä pyynnöstä. Määritetty käyttämällä objektia muodossa (nimi:arvo, nimi:arvo...) . Mitään asetuksista ei vaadita. Voit määrittää oletusasetukset käyttämällä $.ajaxSetup()-menetelmää.

Asetusten luettelo

↓ nimi :tyyppi (oletusarvo)

Kun pyyntö tehdään, otsikot osoittavat sallitut sisältötyypit, joita palvelimelta odotetaan. Näiden tyyppien arvot otetaan hyväksymisparametrista.

Oletuksena kaikki pyynnöt ilman sivun uudelleenlatausta tapahtuvat asynkronisesti (eli pyynnön lähettämisen jälkeen palvelimelle sivu ei lakkaa toimimasta odottaessaan vastausta). Jos sinun on suoritettava pyyntö synkronisesti, aseta parametriksi false . Verkkotunnusten välisiä ja "jsonp"-pyyntöjä ei voida suorittaa synkronisessa tilassa.

Huomaa, että pyyntöjen suorittaminen synkronisessa tilassa saattaa johtaa sivun estoon, kunnes pyyntö on täysin suoritettu.

Tämä kenttä sisältää funktion, joka kutsutaan välittömästi ennen ajax-pyynnön lähettämistä palvelimelle. Tämä toiminto voi olla hyödyllinen jqXHR-objektin muokkaamisessa (kirjaston aiemmissa versioissa (1.5 asti), XMLHttpRequest on käytössä jqXHR:n sijaan). Voit esimerkiksi muuttaa/määrittää tarvittavia otsikoita jne. jqXHR-objekti välitetään funktiolle ensimmäisenä argumenttina. Toinen argumentti on pyyntöasetukset.

Tässä kentässä voit määrittää lisäpyyntöotsikot. Nämä muutokset syötetään ennen kuin kutsutaan beforeSend, jossa voidaan tehdä lopulliset otsikkomuokkaukset.

Kun tämä asetus on tosi , pyyntö suoritetaan tilassa "onnistui" vain, jos palvelimen vastaus eroaa edellisestä vastauksesta. jQuery tarkistaa tämän tosiasian katsomalla Last-Modified -otsikkoa. Koska jQuery-1.4, Last-Modified:n lisäksi tarkistetaan myös "etag" (molemmat ovat palvelimen toimittamia ja ovat välttämättömiä ilmoittamaan selaimelle, että palvelimelta pyydettyjä tietoja ei ole muutettu edellisestä pyynnöstä) .

Voit asettaa sivun lähdetilan paikalliseksi (ikään kuin se olisi tiedostoprotokollan yli), vaikka jQuery tunnistaisi sen muuten. Kirjasto päättää, että sivu toimii paikallisesti, jos seuraavia protokollia: tiedosto, *-laajennus ja widget.

On suositeltavaa asettaa parametrin arvo on paikallinen maailmanlaajuisesti - käyttämällä $.ajaxSetup()-funktiota, ei yksittäisten ajax-pyyntöjen asetuksissa.

Määrittää parametrin nimen, joka lisätään URL-osoitteeseen jsonp-pyynnön aikana (oletusarvoisesti käytetään "takaisinsoittoa" - "http://siteName.ru?callback=...").

jQuery-1.5:stä lähtien tämän parametrin asettaminen arvoon false estää lisäparametrin lisäämisen URL-osoitteeseen. Tässä tapauksessa sinun on määritettävä erikseen jsonpCallback-ominaisuuden arvo. Esimerkiksi: (jsonp:false, jsonpCallback:"callbackName") .

Määrittää funktion nimen, jota kutsutaan, kun palvelin vastaa jsonp-pyyntöön. Oletuksena jQuery luo mukautetun nimen tälle toiminnolle, mikä on parempi vaihtoehto, joka yksinkertaistaa kirjaston työtä. Yksi syistä määrittää oma jsonp-pyyntöjen käsittelytoiminto on parantaa GET-pyyntöjen välimuistia.

JQuery-1.5:stä lähtien voit määrittää funktion tähän parametriin, jotta voit käsitellä palvelimen vastauksen itse. Tässä tapauksessa määritetyn funktion on palautettava palvelimelta saadut tiedot (määritetyssä funktiossa se on käytettävissä ensimmäisessä parametrissa).

Oletuksena kaikki palvelimelle lähetettävät tiedot muunnetaan valmiiksi merkkijonoksi (url-muoto: fName1=value1&fName2=value2&...) vastaa "application/x-www-form-urlencoded". Jos sinun on lähetettävä tietoja, joita ei voida käsitellä tällaisella tavalla (esimerkiksi DOM-dokumentti), sinun tulee poistaa ProcesData-vaihtoehto käytöstä.

Tätä parametria käytetään GET-tyyppisille verkkotunnusten välisille ajax-pyynnöille. DataType voi olla joko "jsonp" tai "script". Määrittää koodauksen, jolla verkkotunnusten välinen pyyntö suoritetaan. Tämä on tarpeen, jos vieraalla toimialueella oleva palvelin käyttää koodausta, joka eroaa sen alkuperäisen toimialueen palvelimen koodauksesta.

(Tämä asetus otettiin käyttöön jQuery-1.5:ssä) joukko pareja, joissa pyynnön suorituskoodit liitetään kutsuttaviin toimintoihin. Esimerkiksi koodille 404 (sivuja ei ole olemassa), voit näyttää viestin näytöllä:

$.ajax (( statusCode: ( 404 : function ()) ( hälytys ( "Sivua ei löydy" ) ; ) ) ) ;

Toiminnot, jotka vastaavat pyyntöjen onnistumiskoodeihin, saavat samat argumentit kuin onnistuneen pyynnön käsittelijän toiminnot (määritetty onnistumisparametrissa), ja funktiot, jotka vastaavat virhekoodeihin, ovat samat kuin virhefunktioiden funktiot.

Toiminto, jota kutsutaan, jos pyyntö palvelimelle on suoritettu onnistuneesti. Se välittää kolme parametria: palvelimen lähettämät tiedot, jotka on jo esikäsitelty (joka on erilainen eri tietotyypeillä). Toinen parametri on merkkijono, jolla on suoritustila. Kolmas parametri sisältää jqXHR-objektin (kirjaston aiemmissa versioissa (1.5 asti), XMLHttpRequest on käytössä jqXHR:n sijaan). jQuery-1.5:stä lähtien tämä parametri voi hyväksyä joukon toimintoja yhden funktion sijaan.

Palvelimen vastauksen odotusaika. Aseta millisekunteina. Jos tämä aika ylittyy, pyyntö suoritetaan loppuun virheellä ja tapahtuu virhetapahtuma (katso yllä oleva kuvaus), jonka tila on "aikakatkaisu".

Aika lasketaan hetkestä, kun $.ajax-funktiota kutsutaan. Saattaa käydä niin, että useita muita pyyntöjä on käynnissä tällä hetkellä ja selain viivästyttää nykyisen pyynnön suorittamista. Tässä tapauksessa Aikalisä saattaa valmistua, vaikka itse asiassa pyyntöä ei ole edes aloitettu.

jQuery-1.4:ssä ja aiemmissa XMLHttpRequest-objektin aikakatkaisussa se menee virhetilaan ja sen kenttien käyttö voi aiheuttaa poikkeuksen. Firefox 3.0+:ssa komentosarja- ja JSONP-pyyntöjä ei keskeytetä, jos niiden aikakatkaisu. Ne valmistuvat myös tämän ajan kuluttua.

Toiminto, joka tarjoaa XMLHttpRequest-objektin. Oletuksena IE-selaimissa tämä objekti on ActiveXObject, ja muissa tapauksissa se on XMLHttpRequest. Tällä valinnalla voit toteuttaa oman version tästä objektista.

(Tämä asetus otettiin käyttöön jQuery-1.5.1:ssä) Joukko (nimi:arvo) pareja XMLHttpRequest-objektin vastaavien kenttien arvojen muuttamiseksi/lisäämiseksi. Voit esimerkiksi määrittää sen withCredentials-ominaisuuden arvoksi tosi, kun suoritat verkkotunnusten välisen pyynnön:

$.ajax (( url: a_cross_domain_url, xhrFields: ( withCredentials: true ) ) ;

jQuery-1.5:ssä natiivi XMLHttpRequest ei tue withCredentials-ominaisuutta, ja se ohitetaan verkkotunnusten välisessä pyynnössä. Kaikkiaan seuraavat versiot kirjastoissa, tämä on korjattu.

Tapahtumanjärjestäjät

BeforeSend-, error-, dataFilter-, menestys- ja valmiit asetukset (niiden kuvaus on edellisessä osiossa) mahdollistavat tapahtumakäsittelijöiden asettamisen, jotka esiintyvät tietyissä kohdissa kunkin ajax-pyynnön suorittamisessa.

ennen lähetystä tapahtuu juuri ennen pyynnön lähettämistä palvelimelle. virhe tapahtuu, kun pyyntö epäonnistuu. dataFilter tapahtuu, kun tiedot saapuvat palvelimelta. Mahdollistaa palvelimen lähettämän "raaka" tiedon käsittelyn. menestys tapahtuu, kun pyyntö on suoritettu onnistuneesti. saattaa loppuun tapahtuu aina, kun pyyntö on suoritettu.

Yksinkertainen käyttöesimerkki. Näytämme viestin, kun pyyntö on suoritettu onnistuneesti:

$.ajax (( url: "ajax/test.html" , menestys: toiminto () ( hälytys ("Lataus suoritettiin." ) ; ) ) ;

Alkaen jQuery-1.5:stä, $.ajax()-metodi palauttaa jqXHR-objektin, joka muun muassa toteuttaa viivästetyn rajapinnan, jonka avulla voit määrittää muita suorituskäsittelijöitä. Deferred-objektin standardien .done(), .fail() ja .then() menetelmien lisäksi, joilla voit asentaa käsittelijöitä, jqXHR toteuttaa .success(), .error() ja .complete() . Tämä tehdään niiden menetelmien tavallisten nimien noudattamiseksi, joilla ajax-pyyntöjen suorittamiseen tarvittavat käsittelijät asennetaan. Kuitenkin jQuery-1.8:sta alkaen nämä kolme menetelmää vanhentuvat.

Jotkut pyyntötyypit, kuten jsonp- tai verkkotunnusten väliset GET-pyynnöt, eivät tue XMLHttpRequest-objektien käyttöä. Tässä tapauksessa käsittelijöille välitetyt XMLHttpRequest ja textStatus sisältävät arvon undefined .

Käsittelijöiden sisällä tämä muuttuja sisältää parametrin arvon yhteydessä. Jos sitä ei ole asetettu, tämä sisältää asetusobjektin.

dataType-parametri

$.ajax()-funktio oppii tiedon tyypistä, jonka palvelin lähettää itse palvelimelta (MIME:n kautta). Lisäksi on mahdollisuus henkilökohtaisesti ilmoittaa (selventää), kuinka nämä tiedot tulisi tulkita. Tämä tehdään dataType-parametrilla. Tämän parametrin mahdolliset arvot:

"xml"- tuloksena oleva xml-dokumentti on saatavilla tekstimuoto. Voit työskennellä hänen kanssaan standardi tarkoittaa jQuery (sama kuin html-dokumentissa). "html"— tuloksena oleva html on saatavilla tekstimuodossa. Jos se sisältää skriptejä tunnisteissa, ne suoritetaan automaattisesti vain, kun html-teksti sijoitetaan DOM:iin. "käsikirjoitus"— vastaanotetut tiedot suoritetaan javascriptinä. Muuttujat, jotka sisältävät tyypillisesti palvelimen vastauksen, sisältävät jqXHR-objektin. "json", "jsonp"— vastaanotetut tiedot esimuunnetaan javascript-objektiksi. Jos jäsentäminen epäonnistuu (mikä voi tapahtua, jos json sisältää virheitä), tiedoston jäsennysvirhepoikkeus heitetään. Jos käyttämäsi palvelin on eri toimialueella, jsonp:tä tulee käyttää jsonin sijaan. Voit oppia jsonista ja jsonp:sta Wikipediasta. "teksti"— vastaanotetut tiedot ovat saatavilla pelkkänä tekstinä ilman esikäsittelyä.

Huomautus 1: Kun pyyntö lähetetään kolmannen osapuolen toimialueelle (joka on mahdollista vain datatyypin ollessa jsonp tai komentosarja), virheenkäsittelijät ja globaalit tapahtumat eivät käynnisty.

Muistio 2: DataType-kohdassa määritetty tietotyyppi ei saa olla ristiriidassa palvelimen toimittamien MIME-tietojen kanssa. Esimerkiksi palvelimen on esitettävä xml-tiedot muodossa text/xml tai application/xml . Jos tämä epäonnistuu, jquery yrittää muuntaa vastaanotetut tiedot määritettyyn tyyppiin (lisää tästä Muuntimet-osiossa).

Tietojen lähettäminen palvelimelle

Oletuksena pyyntö palvelimelle tehdään HTTP GET -menetelmällä. Jos sinun on tehtävä pyyntö POST-menetelmällä, sinun on määritettävä sopiva arvo tyyppiasetuksissa. POST-menetelmällä lähetetyt tiedot muunnetaan UTF-8:ksi, jos ne ovat eri koodauksessa W3C XMLHTTPRequest -standardin edellyttämällä tavalla.

Tietoparametri voidaan määrittää joko merkkijonona muodossa avain1=arvo1&avain2=arvo2 (tiedonsiirtomuoto URL-osoitteessa) tai objektina, jossa on joukko (nimi:arvo) -pareja - (avain1: "arvo1", avain2: "arvo2"). Jälkimmäisessä tapauksessa ennen lähettämistä jQuery tiedot muuntuu annettu esine merkkijonoon käyttämällä $.param() . Tämä muunnos voidaan kuitenkin peruuttaa asettamalla processData-asetukseksi false . Merkkijonoksi muuntaminen ei ole toivottavaa esimerkiksi silloin, kun palvelimelle lähetetään xml-objekti. Tässä tapauksessa on suositeltavaa vaihtaa contentType-asetus Application/x-www-form-urlencoded sopivampaan miimityyppiin.

Kommentti: Useimmat selaimet eivät salli Ajax-pyyntöjä resursseista, joilla on muita toimialueita, aliverkkotunnuksia ja protokollia kuin nykyinen. Tämä rajoitus ei kuitenkaan koske jsonp- ja komentosarjapyyntöjä.

Tietojen vastaanottaminen palvelimelta

Palvelimelta vastaanotettu data voidaan toimittaa merkkijonona tai objektina dataType-parametrin arvosta riippuen (katso dataType yllä). Nämä tiedot ovat aina saatavilla ajax-pyynnön suorituskäsittelijän ensimmäisessä parametrissa:

$.ajax (( url: "some.php" , menestys: funktio (data) ( alert ( "Tulostiedot: " + data ) ; ) ) );

Teksti- ja xml-tyypeille palvelimen lähettämät tiedot ovat saatavilla myös jqXHR:ssä, nimittäin sen vastausteksti- tai vastausXML-kentissä.

Lisäasetukset

Yleisparametrin avulla voit poistaa yksittäisten pyyntöjen tapahtumakäsittelijöiden (.ajaxSend(), .ajaxError() suorittamisen käytöstä. Tästä voi olla hyötyä, jos esimerkiksi animaation lataus aloitetaan/pysäytetään näissä käsittelijöissä. Sitten, jos jotkut pyynnöt suoritetaan hyvin usein ja nopeasti, niille on hyödyllistä poistaa käsittelijöiden suorittaminen käytöstä. Toimialueiden välisissä komentosarja- ja jsonp-pyynnöissä yleinen parametri poistetaan käytöstä automaattisesti.

Jos pyynnön tekemiseen palvelimelle tarvitaan todennustietoja (sisäänkirjautuminen/salasana), voit määrittää ne ajax-pyynnön käyttäjätunnuksen ja salasanan asetuksissa.

Tietty aika on varattu pyynnön suorittamiseen palvelimelle. Jos palvelin ei lähetä vastausta tänä aikana, pyyntö päättyy virheeseen (tila "timeout"). Palvelimen vastauksen odotusaikaa voidaan muuttaa asettamalla aikakatkaisuasetuksissa vaadittu arvo (millisekunteina).

Saattaa käydä niin, että isäntäkoodaus on erilainen kuin ajax-pyynnössä pyydetyn javascript-tiedoston koodaus. Tällaisissa tapauksissa on tarpeen määrittää jälkimmäisen koodaus scriptCharset-asetuksissa.

Useimmissa tapauksissa Ajax-pyyntö tapahtuu asynkronisesti, mutta joissakin tapauksissa voi olla tarpeen suorittaa pyyntö peräkkäin (kun komentosarjan jatkosuoritus on mahdotonta ilman vastausta palvelimelta). Voit tehdä pyynnöstä synkronisen, jos poistat asynkronointiasetuksen käytöstä. On kuitenkin syytä muistaa, että tässä tapauksessa sivu jumiutuu odottaessaan vastausta palvelimelta.

Esimerkkejä käytöstä

Suurin osa yksinkertainen vaihtoehto käytetään kutsua $.ajax() ilman parametrien määrittämistä:

$.ajax(); // GET-pyyntö lähetetään palvelimelle nykyisen sivun URL-osoitteeseen määrittelemättä mitään parametreja.

Jos sinun on ladattava ja suoritettava js-tiedosto, voit tehdä sen seuraavasti:

$.ajax (( tyyppi: "GET" , url: "test.js" , dataType: "script" ) ) ;

Tehdään palvelimelle POST-pyyntö, jossa määritellään kaksi parametria ja ilmoitetaan käyttäjälle onnistuneesti suoritetusta pyynnöstä:

$.ajax (( type: "POST" , url: "some.php" , data: "name=John&location=Boston" , menestys: function (msg) ( hälytys ( "Data saapui: " + msg ) ; ) ) ) ;

Päivitetään halutun html-sivun sisältö:

$.ajax (( url: "test.html" , välimuisti: false , menestys: funktio (html) ( $("#results" ) .append (html) ; ) ) );

Tehdään synkroninen pyyntö palvelimelle. Kun pyyntöä suoritetaan, sivu ei vastaa käyttäjän toimiin:

// kirjoittaa palvelimelta lähetetyt tiedot html-muuttujaan var html = $.ajax (( url: "some.php" , async: false ) ) .responseText ;

Parametrina lähetämme palvelimelle xml-objektin. Jotta voit lähettää sen oikein, sinun on peruutettava alustava parametrien muunnos (processData:false). Pyynnön onnistuneen suorittamisen käsittelijänä määritämme mukautettu toiminto handleResponse:

var xmlDocument = [luo xml-dokumentti] ; $.ajax (( url: "page.php" , processData: false , data: xmlDocument, menestys: handleResponse ) ) ;

Edistynyt lähestymistapa

Alkaen jQuery-1.5:stä, on kolme uutta suuntaa, joiden avulla voit käyttää $.ajax():ta entistä syvempään. Ensimmäinen niistä (esisuodattimet) mahdollistaa lisäkäsittelyjen suorittamisen välittömästi ennen pyynnön lähettämistä. Toisessa lähestymistavassa (muuntimet) voit kertoa jQuerylle, kuinka palvelimelta vastaanotettu data muunnetaan, jos se ei vastaa odotettua muotoa. Kolmas lähestymistapa (Transports) on alin taso, jonka avulla voit järjestää pyynnön itsenäisesti.

Esisuodattimet

Tämä lähestymistapa koostuu käsittelijän asettamisesta, joka kutsutaan ennen jokaista ajax-pyyntöä. Tämä käsittelijä edeltää muiden ajax-käsittelijöiden suorittamista. Se asennetaan käyttämällä $.ajaxPrefilter()-funktiota:

$.ajaxPrefilter (funktio (optiot, originalOptions, jqXHR) ( ) );

Missä
vaihtoehtoja— nykyisen pyynnön asetukset,
alkuperäiset vaihtoehdot- oletusasetukset,
jqXHR— tämän pyynnön jqXHR-objekti.

Se on kätevä käsitellä esisuodattimissa mukautetut asetukset(eli uudet asetukset ovat tuntemattomia pyynnössä määritetylle kirjastolle). Voit esimerkiksi syöttää oman asetuksesi abortOnRetry , joka, kun se on käytössä, nollaa odottavat pyynnöt, jos seuraava pyyntö vastaanotetaan samaan URL-osoitteeseen:

var currentRequests = ( ); $.ajaxPrefilter (funktio (optiot, originalOptions, jqXHR) ( if (options.abortOnRetry) ( if (currentRequests[ options.url ]) ( currentRequests[ options.url ] .abort () ; ) currentRequests[ options.url ] = jqXHR ; ) ) ;

On kätevää käsitellä olemassa olevia asetuksia ajaxPrefilterissä. Voit esimerkiksi muuttaa tätä verkkotunnusten välinen pyyntö uudelleenohjattavaksi verkkotunnuksesi palvelimen kautta:

$.ajaxPrefilter (funktio (optiot) ( if (options.crossDomain) ( options.url = "http://mydomain.net/proxy/" + encodeURIComponent( options.url ) ; options.crossDomain = false ; ) ) ;

Lisäksi voit määrittää dataType-arvot, joilla esisuodatin toimii. Joten voit esimerkiksi määrittää json- ja komentosarjatyypit:

$.ajaxPrefilter ( "json script" , funktio (optiot, originalOptions, jqXHR) ( // Muuta valintoja, tarkista originalOptions ja jqXHR-objekti) );

Lopuksi voit muuttaa dataType-arvon palauttamaan halutun arvon:

$.ajaxPrefilter (funktio (optiot) ( // muuta dataType skriptiksi, jos url täyttää tietyt ehdot if (isActuallyScript(options.url) ) ( paluu "script" ; ) );

Tämä lähestymistapa takaa paitsi sen, että pyyntö muuttaa tyyppinsä komentosarjaksi, myös sen, että myös muut esisuodattimen käsittelijät, jotka määrittävät tämän tyypin ensimmäisessä parametrissa, suoritetaan.

Muuntimet

Tämä periaate koostuu käsittelijän asentamisesta, joka toimii, jos asetuksissa määritetty dataType ei vastaa palvelimen lähettämää tietotyyppiä.

Muuntimet on ajax-asetus, joten se voidaan asettaa maailmanlaajuisesti:

// tällä tavalla voit asettaa käsittelijän, joka toimii, jos // dataType-kohdassa määrittämäsi mydatatype-tyypin sijaan vastaanotetaan tekstityyppistä dataa $.ajaxSetup (( converters: ( "text mydatatype" : function ( textValue ) () if (valid( textValue ) ) ( // prosessoi lähetettyä tekstiä return mydatatypeValue; ) else ( // jos palvelimen lähettämät tiedot eivät vastaa odotuksia, // voit heittää poikkeuksen.heita poikkeusObject; ) ) ) ) ;

Muuntimet auttavat sinua, kun otat käyttöön oman (mukautetun) datatyypin. On tärkeää huomata, että tällaisen datatyypin nimessä tulee käyttää vain pieniä kirjaimia! Yllä mainittu tietotyyppiä "mydatatype" koskeva pyyntö voisi näyttää tältä:

$.ajax (url, (tietotyyppi: "omatietotyyppi" ) );

Opimme jQueryn suorista menetelmistä työskennellä Ajaxin kanssa (kuten get(), post() ja load()). Tässä artikkelissa kuvataan alhainen taso ohjelmiston käyttöliittymä jQuery Ajax API.

Termi matala taso saattaa näyttää viittaavan siihen, että käytät kyselymoottorin piilotettuja ominaisuuksia, mutta se ei ole täysin totta. Tässä kuvatut menetelmät ovat vähemmän käteviä kuin aiemmin käsitellyt, mutta pienellä lisäponnistelulla voit määrittää kyselyn täsmälleen tarpeitasi vastaavaksi, mikä ei aina ole mahdollista suorilla tai apumenetelmillä.

Yksinkertaiset Ajax-pyynnöt

Kyselyjen luominen matalan tason API:lla ei ole paljon vaikeampaa kuin suorien tai apumenetelmien käyttäminen. Erona on, että tämän lähestymistavan avulla voit hallita monia muita pyynnön näkökohtia ja saada paljon enemmän tietoa käynnissä olevasta pyynnöstä. lisää tietoa. Matalan tason API:n keskeinen osa on ajax()-menetelmä, josta on yksinkertainen esimerkki alla (käyttämällä edellisessä artikkelissa kuvattua lähdetiedostoa ja mydata.json-tiedostoa):

$(function() ( $.ajax("mydata.json", ( menestys: function(data)) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo ("#rivi1");

Ajax()-metodin argumentit ovat pyydetty URL-osoite ja tietojen näyttöobjekti, jonka ominaisuudet määrittävät joukon avainarvopareja, joista jokainen määrittelee pyyntöparametrin. Tässä ajax()-menetelmälle välitetty objekti sisältää vain yhden parametrin, success, joka määrittää funktion, jota kutsutaan, jos pyyntö onnistuu.

Tässä esimerkissä pyydämme mydata.json-tiedostoa palvelimelta ja käytämme sitä yhdessä tietomallin kanssa elementtien luomiseen ja niiden lisäämiseen asiakirjaan, kuten teimme edellisessä artikkelissa suorilla menetelmillä. Oletusarvoisesti ajax()-menetelmä luo HTTP HANKI pyyntö, eli Tämä esimerkki vastaa get()- ja getJSON()-menetelmien käyttöä.

jqXHR-objekti

Ajax()-menetelmä palauttaa jqXHR-objektin, jonka avulla voidaan saada tietoja pyynnöstä ja jonka kanssa voidaan olla vuorovaikutuksessa. jqXHR-objekti on XMLHttpRequest-objektin ympärillä oleva kääre, joka muodostaa selaimen Ajax-tuen perustan.

Useimmissa Ajax-operaatioissa jqXHR-objekti voidaan yksinkertaisesti jättää huomiotta, mitä suosittelen. Tätä objektia käytetään tapauksissa, joissa on tarpeen saada täydellisempää tietoa palvelimen vastauksesta kuin mitä voidaan saada muilla tavoilla. Sitä voidaan käyttää myös Ajax-pyynnön parametrien määrittämiseen, mutta tämä on helpompi tehdä ajax()-menetelmän asetuksilla. jqXHR-objektin ominaisuudet ja menetelmät on kuvattu alla olevassa taulukossa:

jqXHR-objektin ominaisuudet ja menetelmät Ominaisuuden/menetelmän kuvaus

readyState	Palauttaa kyselyn edistymisosoittimen koko sen keston ajan elinkaari, ottaen arvot 0:sta (pyyntöä ei lähetetty) 4:ään (pyyntö suoritettu)
Tila	Palauttaa palvelimen lähettämän HTTP-tilakoodin
statusTeksti	Palauttaa tilakoodin tekstikuvauksen
vastausXML	Palauttaa vastauksen XML-muodossa (jos se on XML-dokumentti)
vastausteksti	Palauttaa vastauksen merkkijonona
setRequest(nimi, arvo)	Palauttaa pyynnön otsikon (tätä voidaan tehdä helpommaksi otsikkoparametrilla)
getAllResponseHeaders()	Palauttaa merkkijonona kaikki vastauksen sisältämät otsikot
getResponseHeaders(nimi)	Palauttaa määritetyn vastauksen otsikon arvon
keskeyttää()	Keskeyttää pyynnön

jqXHR-objekti esiintyy useissa paikoissa koodissa. Sitä käytetään ensin ajax()-metodin palauttaman tuloksen tallentamiseen alla olevan esimerkin mukaisesti:

$(function() ( var jqxhr = $.ajax("mydata.json", ( menestys: function(data)) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3) ).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2") )); var timerID = setInterval(function() ( console.log("Tila: " + jqxhr.status + " " + jqxhr.statusText); if (jqxhr.readyState == 4) ( console.log("Pyyntö suoritettu: " + jqxhr.responseText); clearInterval(timeID); ) ), 100 )) ;

Tässä esimerkissä tallennamme ajax()-menetelmän palauttaman tuloksen ja käytämme sitten setInterval()-menetelmää pyyntötietojen tulostamiseen 100 ms:n välein. Ajax()-metodin palauttaman tuloksen käyttäminen ei muuta sitä tosiasiaa, että pyyntö suoritetaan asynkronisesti, joten jqXHR-objektin kanssa työskennellessä on noudatettava varotoimia. Pyynnön tilan tarkistamiseksi käytämme readyState-ominaisuutta (arvo 4 vastaa pyynnön valmistumista) ja näytämme palvelimen vastauksen konsolille.

Tässä skenaariossa konsolin tulos näyttää tältä (se voi näyttää hieman erilaiselta selaimessasi):

Käytän jqXHR-objektia vain harvoissa tapauksissa, enkä tee sitä ollenkaan, jos se on ajax()-metodin palauttama tulos. jQuery käynnistää automaattisesti Ajax-pyynnön kutsuessaan ajax()-menetelmää, joten en pidä pyyntöparametrien mukauttamismahdollisuutta kovin hyödyllisenä. Jos haluan työskennellä jqXHR-objektin kanssa (yleensä saadakseni lisätietoja palvelimen vastauksesta), teen tämän yleensä tapahtumakäsittelijän parametrien kautta, joista puhumme seuraavaksi. He antavat minulle tietoja pyynnön tilasta, mikä poistaa tarpeen selvittää sitä.

Pyynnön URL-osoitteen asettaminen

Yksi tärkeimmistä käytettävissä olevista vaihtoehdoista on url-parametri, jonka avulla voit määrittää pyynnölle URL-osoitteen. Voit käyttää tätä vaihtoehtoa URL-osoitteen välittämiselle argumenttina ajax()-menetelmälle alla olevan esimerkin mukaisesti:

$(function() ( $.ajax(( url: "mydata.json", menestys: function(data)) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)) .appendTo("#rivi1" ));

Luodaan POST-pyyntö

Määritä suoritettavan kyselyn tyyppi käyttämällä tyypin parametri. Oletuksena GET-pyynnöt tehdään, kuten edellisessä esimerkissä. Alla on esimerkki ajax()-menetelmän käyttämisestä POST-pyynnön luomiseen ja lomaketietojen lähettämiseen palvelimelle:

$(function() ( $.ajax(( url: "mydata.json", menestys: function(data)) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)) .appendTo("#row1"); e) ( $.ajax(( url: "phphandler.php", tyyppi: "post", data: $("form").serialize(), menestys: processServerResponse, dataType: "json" )); e.preventDefault () )); toiminto processServerResponse(data) ( // Piilota aluksi kaikki tuotteet var inputElems = $("div.dcell").hide(); for (var prop in data) ( // Näytä vain ne tuotteet , järjestys joista on suurempi kuin 0 // (palvelimen vastaus sisältää vain sellaisia tuotteita) var filtered = inputElems.has("input") .appendTo("#row1").show( ) // Peruselementtien piilottaminen muodossa $( "#buttonDiv, #totalDiv").remove( // Näytä uudet elementit mallista totalTmpl $("#totalTmpl").tmpl(data).appendTo("body" )); Tilaukset yhteensä: $(yhteensä) Tilaus .png"/> $(nimi):

En kuvaile tätä esimerkkiä tässä yksityiskohtaisesti, koska... tutkimme sitä yksityiskohtaisesti edellisessä artikkelissa (vain käyttämällä postimenetelmä()). Huomaan vain, että täällä käytimme tyypin lisäksi useita muita parametreja. POST-pyynnön kohteen määrittämiseen käytetään aiemmin kuvattua url-parametria. Lähetettävät tiedot määritetään dataparametrilla, jonka arvo 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 käynnistää koko Ajax-pyynnön elinkaaren ajan. Näin määrität takaisinsoittotoiminnot, joilla on niin tärkeä rooli Ajax-pyynnöissä. Olet jo tutustunut yhteen niistä, kun tarkastelet 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ä funktiokutsusta jätettiin pois kaksi argumenttia - pyynnön tulosta kuvaava viesti ja jqXHR-objekti. Alla on esimerkki funktion käytöstä, joka ottaa nämä argumentit:

$(function() ( $.ajax(( url: "mydata.json", menestys: function(data, tila, jqxhr) ( console.log("Tila: " + tila); console.log("jqXHR status: " + jqxhr.status + " " + jqxhr.statusText); console.log(jqxhr.getAllResponseHeaders()); var template = $("#kukkaTmpl"); appendTo("#row2"); ) )); ));

Statusargumentti on merkkijono, joka kuvaa pyynnön tulosta. Onnistumisparametrilla määrittämämme takaisinsoittotoiminto suoritetaan vain onnistuneille pyynnöille, joten tämän argumentin arvo on yleensä onnistuminen. Poikkeuksena on, kun käytät ifModified-parametria, joka kuvataan seuraavassa.

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ämä esimerkki käyttää jqXHR-objektia saadakseen tietoja pyynnön tilasta ja otsikoista, jotka palvelin on sisällyttänyt vastaukseen, ja tulostaa nämä tiedot konsoliin.

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

Käsittelyvirhe

Virheparametria käytetään määrittämään funktio, joka tulee kutsua, kun pyyntö epäonnistuu. Alla on vastaava esimerkki:

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

$(function() ( $.ajax(( url: "NoSuchFile.json", menestys: function(data)) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)) .appendTo("#row1"); : " + tila + " Virhe: " + errorMsg).insertAfter("h1" ));

Täällä pyydetään NoSuchFile.json-tiedostoa, jota ei ole palvelimella, ja siksi pyyntöä ei ilmeisesti voida suorittaa loppuun, minkä seurauksena virheparametrilla määritetty toiminto kutsutaan. Tämän funktion argumentit ovat jqXHR-objekti, virhetilasanoma ja palvelimen vastauksessa vastaanotettu 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ä:

$(function() ( $.ajax(( menestys: function(data)) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1") ; template.tmpl(data.slice(3)).appendTo("#row2" error: function(jqxhr, status, errorMsg) ( $("") .text("Tila: " + tila + " Virhe: " + errorMsg) .insertAfter("h1"); ), beforeSend: function(jqxhr, settings) ( settings.url = "mydata.json"; ) )); ));

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

Useiden tapahtumakäsittelijöiden asettaminen

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

$(function() ( $.ajax(( menestys: , beforeSend: function(jqxhr, settings)) ( settings.url = "mydata.json"; ) )); function processData(data, status, jqxhr) ( var template = $("#kukkaTmpl"); appendTo("#row2"); ) function reportStatus(data, status, jqxhr) ( console.log("Tila: " + tila + " Tuloskoodi: " + jqxhr.status); ) ));

Tässä esimerkissä onnistumisparametriksi asetetaan taulukko, joka koostuu kahdesta funktiosta, joista toinen käyttää dataa elementtien lisäämiseen dokumenttiin ja toinen tulostaa tiedot konsoliin.

Kontekstin asettaminen tapahtumille

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

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

Tässä kontekstiparametriksi asetetaan jQuery-objekti, joka sisältää asiakirjan h1-elementit. Täydellisen parametrin määrittelemä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.

Kontekstiparametria voidaan käyttää minkä tahansa objektin asettamiseen kontekstiksi, ja olet vastuussa vain kelvollisten toimintojen suorittamisesta kyseiselle objektille. Jos esimerkiksi asetat kontekstiksi HTMLElementin, sinun on välitettävä kyseinen objekti $()-funktiolle ennen kuin kutsut siinä olevia jQuery-menetelmiä.

asetukset perusparametrit Ajax pyytää

On joukko parametreja, joilla voit suorittaa Ajax-pyynnön perusasetukset (keskustelimme joistakin niistä, url ja tyyppi, edellä). Kaikista saatavilla olevista vaihtoehdoista nämä ovat vähiten kiinnostavia ja niiden nimet puhuvat enimmäkseen puolestaan. Kyseiset parametrit näkyvät alla olevassa taulukossa:

Ajax-pyynnön peruskonfiguraatioparametrit Parametrin kuvaus

hyväksyy	Asettaa pyynnön Hyväksy-otsikon, joka määrittää selaimen tukemat MIME-tyypit. Oletusarvoisesti tämä arvo määräytyy dataType-parametrin mukaan
kätkö	Arvo false osoittaa, että palvelimen ei pitäisi tallentaa pyynnön sisältöä välimuistiin. Oletusarvoisesti kaikki tietotyypit paitsi script ja jsonp tallennetaan välimuistiin
sisältötyyppi	Asettaa pyynnön sisältökierroksen otsikon arvon
tietotyyppi	Määrittää, minkä tyyppisiä tietoja palvelimelta odotetaan. Jos tätä vaihtoehtoa käytetään, jQuery jättää huomioimatta palvelimen pyyntötyyppiä koskevat tiedot
otsikot	Määrittää lisäotsikot ja arvot, jotka tulee sisällyttää pyyntöön
jsonp	Määrittää merkkijonon, jota käytetään takaisinsoittotoiminnon sijasta, kun tehdään JSONP-pyyntöjä (verkkotunnusten välisiä pyyntöjä). Tämä parametri edellyttää sopimuksen palvelimen kanssa
jsonpCallback	Määrittää takaisinsoittotoiminnon nimen, jota tulee käyttää jQueryn oletusarvoisesti käyttämän automaattisesti luodun satunnaisen nimen sijaan
Salasana	Määrittää salasanan, jota tulee käyttää pyynnössä todennusmenettelyn läpiviennissä
scriptCharset	Kertoo jQuerylle, mitä merkistöä tulee käyttää pyydettyä JavaScript-sisältöä koodattaessa
Aikalisä	Asettaa pyynnön aikakatkaisun keston (millisekunteina).
käyttäjänimi	Määrittää käyttäjänimen, jota tulee käyttää todennuspyynnössä

Aikakatkaisujen ja otsikoiden asettaminen

Käyttäjät eivät usein edes ymmärrä, että Ajax-pyyntöjä suoritetaan, ja siksi hyväksyttävän aikakatkaisun keston määrittäminen ei ole huono idea, koska tämä säästää käyttäjät tylsältä odottamiselta jonkin tuntemattoman prosessin valmistumiseen. Alla on esimerkki aikakatkaisun asettamisesta pyynnölle:

$(function() ( $.ajax(( aikakatkaisu: 5000, otsikot: ( "X-HTTP-Method-Override": "PUT" ), menestys: function(data) ( var template = $("#flowerTmpl") ; template.tmpl(data.slice(0, 3)).appendTo("#row1").appendTo("#row2" , status, errorMsg) ( konsoli). .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 lähetetty selaimeen, ja useimmat selaimet asettavat rajoituksia samanaikaisesti suoritettavien pyyntöjen lukumäärälle. Tämä tarkoittaa, että on olemassa vaara, että aikakatkaisun umpeutuessa pyyntöä ei edes suoriteta. 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. Tietojen näyttöobjektia käytetään otsikoiden määrittämiseen. Tässä käytetty otsikko voi olla hyödyllinen luotaessa verkkosovelluksia, jotka tukevat REST-arkkitehtuurityyliä, kunhan palvelin tunnistaa sen oikein.

Lisävarusteiden käyttö konfigurointiparametreja

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

Synkronisten pyyntöjen luominen

Kyselyn suoritustilaa ohjataan käyttämällä async-parametri. Tämän parametrin oletusarvo true tarkoittaa, että pyyntö suoritetaan asynkronisessa tilassa, kun taas arvo false on synkronisessa tilassa.

Kun pyyntö suoritetaan synkronisesti, ajax()-metodi toimii normaalin funktion tavoin ja selain jatkaa muiden komentosarjaohjeiden suorittamista vasta pyynnön suorittamisen jälkeen.

Jätetään tiedot, jotka pysyvät muuttumattomina

Käyttämällä ifModified-parametri On mahdollista varmistaa, että tiedot vastaanotetaan vain, jos ne ovat muuttuneet edellisen pyynnön jälkeen. Tämä käyttäytyminen määräytyy Last-Modified -otsikon perusteella. Näin vältytään turhalta tiedonsiirrolta, joka ei tarjoa käyttäjälle mitään uutta tietoa verrattuna siihen, mitä hänellä jo on. Oletusarvon mukaan ifModified on epätosi, mikä käskee jQuerya ohittamaan Last-Modified -otsikon ja toimittamaan tiedot joka tapauksessa.

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

$(function() ( $("button").click(function(e) ( $.ajax("mydata.json", ( ifModified: true, success: function(data, status)) ( if (status == " menestys") ( $("#rivi1, #rivi2").children().remove(); var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo( "#row1"); "#row1"); "paksu kiinteä vihreä");

Tämä esimerkki asettaa ifModified-parametrin arvoksi tosi. Menestystoiminto kutsutaan aina, mutta jos siitä hetkestä lähtien, kun sisältöä pyydettiin viime kerta, se ei ole muuttunut, data-argumentti on määrittelemätön ja status-argumentti on muokkaamaton 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 elementtien lisäämiseen dokumenttiin. Jos status-argumenttia ei ole muokattu, käytämme css()-menetelmää kehystämään elementtejä, jotka ovat jo dokumentissa.

Vastauksena klikkaa tapahtumaa painikkeeseen liittyvää ajax()-menetelmää kutsutaan. Tämä mahdollistaa saman kyselyn toistamisen useita kertoja ifModified-parametrin vaikutuksen osoittamiseksi, kuten kuvassa näkyy:

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

Kuvittele, että pyydät tietoja, mutta menestysparametrissa määritetty menetelmä sisältää virheen, joka estää asiakirjan sisältöä päivittämästä oikein. Sitten sinun seuraava toimenpide yrittää napsauttaa painiketta uudelleen saavuttaakseen odotetun tuloksen. Jos käytät ifModified-parametria huonosti, voit jättää huomioimatta käyttäjän toimet ja pakottaa käyttäjän ryhtymään vakavampiin toimiin ongelman ratkaisemiseksi.

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 itsenäisestä käytöstä:

$(function() ( $.ajax(( url: "mydata.json", statusCode: ( 200: function(data)) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2") ("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 404-vastauskoodi, joka osoittaa, että pyydettyä tiedostoa ei löydy), argumentit ovat samat kuin ne, jotka välitettäisiin virheparametrin määrittämälle funktiolle.

Kuten näet, tämä työkalu ei tarjoa suoria tietoja vastauskoodeista. Käytän sitä usein virheenkorjauksessa selaimen ja palvelimen vuorovaikutuksessa, yleensä selvittääkseni, miksi jQuery ei toimi haluamallani tavalla. Tässä tapauksessa käytän 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 toiminnot.

Esipuhdistuksen vastaustiedot

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 täysin tyydytä sinua joko siksi, että ne on muotoiltu sopimattomalla tavalla tai koska ne sisältävät tietoja, joita et halua käsitellä.

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

$(function() ( $.ajax(( url: "mydata.json", menestys: function(data)) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)) .appendTo("#row1"); json") ( var filteredData = $.parseJSON(data); filteredData.shift(); return JSON.stringify(filteredData.reverse()); ) else ( palauttaa tiedot; ) ));

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

Muutt suodatettuData = $.parseJSON(data); filteredData.shift(); return JSON.stringify(filteredData.reverse()); ...

Jotta esimerkki olisi havainnollistavampi, se suorittaa joitain lisätoimintoja. Ensin JSON-tiedot jäsennetään JavaScript-taulukkoon jQuery parseJSON -menetelmällä. Sitten ensimmäinen elementti poistetaan taulukosta käyttämällä siirtomenetelmä(), ja sen jäljellä olevien elementtien järjestys käännetään käänteisellä()-menetelmällä.

Toiminnon tarvitsee vain palauttaa merkkijono, joten kutsumme JSON.stringify() -funktiota tietäen, että jQuery muuntaa tiedot muotoon JavaScript-objekti ennen menestysfunktion kutsumista. Tämä esimerkki osoitti kyvyn poistaa elementti taulukosta, mutta tilanteesta riippuen voimme suorittaa minkä tahansa muun tyyppisen käsittelyn.

Lopputulos näkyy kuvassa:

Tietojen muuntamisen hallinta

Tallensin viimeiseksi arvostelun yhdestä suosikkiasetuksestani. Olet ehkä huomannut sen vastaanottaessasi tietyntyyppiset jQuery suorittaa automaattisesti joitain käteviä muunnoksia tiedoille. Esimerkiksi vastaanottaessaan JSON-tietoja jQuery tarjoaa onnistumisfunktion, joka käyttää JavaScript-objektia alkuperäisen raaka-JSON-merkkijonon sijaan.

Sitä käytetään tällaisten muutosten hallintaan muuntimen parametri. Tämän parametrin arvo on objekti, joka muodostaa kuvauksen tietotyyppien ja niiden käsittelyyn käytettyjen funktioiden välillä. Alla oleva esimerkki näyttää, kuinka tätä vaihtoehtoa 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("#row1").appendTo("#row2"); ": function(data) ( palauttaa $(data); ) ) ));

Tämä esimerkki rekisteröi funktion teksti-html-tietotyypille. Huomaa määritetyn MIME-tyypin komponenttien välinen tila (toisin kuin teksti/html-merkintälomake). Toiminto hyväksyy palvelimelta saadut tiedot ja palauttaa muunnetut tiedot. Tässä tapauksessa datamuunnos koostuu kukkien.html-tiedoston sisältämän HTML-fragmentin välittämisestä $()-funktiolle ja tuloksen palauttamisesta. Tästä seuraa, että seuraava koskee objektia, joka välitetään onnistumisfunktion data-argumenttina: perinteisiä menetelmiä jQuery.

Tiedonmuuntimien kanssa työskennellessäsi voi olla liian innostunut. Yritän aina välttää kiusausta tehdä enemmän kuin minun pitäisi näillä toiminnoilla. Joskus minulla on esimerkiksi houkutus soveltaa mallia JSON-tietoihin ja palauttaa tuloksena olevat HTML-elementit. Vaikka tämä tekniikka on erittäin kätevä, se ei palvele sinua hyvin, jos joku muu yrittää laajentaa koodiasi tai esimerkiksi joudut myöhemmin tekemään intensiivistä tietojenkäsittelyä saadaksesi sen alkuperäisessä muodossaan.

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

Nyt kun olet tutustunut ajax()-menetelmään ja sen kanssa käytettäviin parametreihin, voimme tarkastella muutamia lisämenetelmiä jQueryn tarjoama kyselyiden määrittämisen helpottamiseksi.

Oletusasetusten määrittäminen

AjaxSetup()-menetelmän avulla voit asettaa parametriarvoja, joita käytetään oletuksena kaikissa Ajax-pyynnöissä, jolloin sinun ei tarvitse 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) ( return $(data); ) ) )); $.ajax(( url: "flowers.html", menestys: function(data, status, jqxhr) ( var elems = data.filter("div").addClass("dcell"); elems.slice( 0, 3).appendTo("#row1"); elems.slice(3).appendTo("#row2" ));

Metodi ajaxSetup() kutsutaan jQuery $ -funktiolla samalla tavalla kuin ajax()-metodia kutsuttiin. 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 tarvitsee vain määrittää parametrien arvot, joita haluamme muuttaa, tai parametrien, joita ei ole oletusarvoisesti säädetty. Tämä säästää huomattavasti aikaa tapauksissa, joissa joudut tekemään monta kyselyä samoilla parametriarvoilla.

Pyydä suodatusta

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

$(function() ( $.ajaxSetup(( timeout: 15000, global: false, error: function(jqxhr, status, errorMsg)) ( $("") .text("Tila: " + status + " Virhe: " + errorMsg) .insertAfter("h1" -muuntimet: ( "text html": function(data) ( return $(data); ) ) )); ) ( if (originalSettings.dataType == "html") ( settings.timeout = 2000; ) else ( jqxhr.abort(); ) )) $.ajax(( url: "flowers.html", dataType: " html" , menestys: function(data, status, jqxhr) ( var elems = data.filter("div").addClass("dcell"); elems.slice(0, 3).appendTo("#row1"); elems. slice(3).appendTo("#row2");

Määrittämäsi toiminto suoritetaan jokaiselle uudelle Ajax-pyynnölle. Funktiolle välitetyt argumentit ovat pyyntöparametrit (mukaan lukien ajaxSetup()-menetelmällä asettamasi oletusarvot) sekä ajax()-menetelmälle välitetyt alkuperäiset parametrit (pois lukien kaikki oletusarvot) ja jqXHR-pyyntö esine.

Teemme muutoksia ensimmäisenä argumenttina annettuun objektiin, kuten esimerkissä näkyy. SISÄÄN tämä skenaario, jos ajax()-metodille välitettyjen parametrien joukossa on dataType-parametri, aikakatkaisun kestoksi asetetaan kaksi sekuntia. Kaikkien muiden pyyntöjen lähettämisen estämiseksi jqXHR-objektissa kutsutaan abort()-menetelmää.

Oppitunti, jossa käytämme yksinkertaisia esimerkkejä ymmärtääksemme kuinka työskennellä AJAX-tekniikan kanssa, nimittäin kuinka käyttää XMLHttpRequest-objektia (lyhyesti XHR) luomaan synkronisia HTTP-pyyntöjä palvelimelle ja vastaanottamaan vastauksia siltä.

Aloitetaan tutustuminen AJAX-tekniikkaan katsomalla esimerkkiä (aloittelijoille), joka pyytää tietoja palvelimelta synkronisen pyynnön kautta.

Synkroninen pyyntö, toisin kuin asynkroninen, jäädyttää verkkosivun sen lähettämisen jälkeen ja ennen vastauksen vastaanottamista, ts. tekee siitä käyttäjän ulottumattomissa. Synkronisia pyyntöjä käytetään melko harvoin verkkosivustoilla, mutta aloittelijan on parempi oppia AJAX-tekniikkaa niiden kanssa.

Ennen kuin siirryt esimerkin luomiseen, katsotaanpa päävaiheita, jotka liittyvät AJAX-tekniikan mukaisesti toimivan sivun fragmentin kehittämiseen. Tässä tapauksessa kaikki toiminnot suoritetaan pääasiassa JavaScript-koodissa minkä tahansa sivulla tapahtuneen tapahtuman jälkeen (käyttäjä napsautti painiketta jne.) ja koostuvat seuraavista vaiheista:

Joidenkin tietojen (datan) hakeminen sivulta tai lomakkeelta (tarvittaessa)

Pyynnön lähettäminen verkkopalvelimelle

Vastaanotetaan web-palvelimelta

Näytä tulokset sivulla, jos vastaus onnistui.

Synkronisten AJAX-pyyntöjen luomisen perusteet Esimerkki 1: Synkronisen AJAX-pyynnön tekeminen

Katsotaanpa esimerkkiä synkronisen AJAX-pyynnön suorittamisesta palvelimelle käyttämällä XMLHttpRequest-menetelmä. Tässä esimerkissä pyydämme palvelimella data.txt-tiedostossa olevia tietoja ja näytämme ne sivulla span-elementissä.

Esimerkki koostuu tiedostoista index.html , script.js ja data.txt , jotka yksinkertaisuuden vuoksi voivat sijaita palvelimella samassa hakemistossa.

Aloitetaan kehittäminen luomalla HTML-sivu, johon yhdistämme script.js-tiedoston. Tämä tiedosto tai pikemminkin sen sisältö tekee kaiken päätyön. Mutta ennen kuin siirrymme sen kehittämiseen, luodaan sivulle div- ja span-elementtejä. div-elementti toimii painikkeena, kun sitä napsautetaan, AJAX-pyyntö suoritetaan. Ja span-elementti toimii säilönä, joka sisältää palvelimelta tulevan vastauksen.

Lisäksi lisäämme sivulle lisää CSS-tyylejä koristelemaan sitä hieman. Tämän seurauksena meillä pitäisi olla seuraava HTML-koodi:

JavaScript AJAX#myDiv (korkeus: 30px; leveys: 100px; taustaväri: vaaleanvihreä; )

Vastaus (AJAX):

Avaa sen jälkeen data.txt-tiedosto ja kirjoita siihen teksti "Hei, maailma!" Tallennetaan ja suljetaan tiedosto.

Jatketaan lopuksi script.js-tiedoston luomiseen. Tämän tiedoston sisältö suorittaa kaikki perustoiminnot, esim. lähetä ajax-pyyntö palvelimelle, vastaanota vastaus palvelimelta ja päivitä sivun sisältö (sijoita vastaus span-elementtiin).

Harkitse luomista tästä tiedostosta askel askeleelta:

JavaScript AJAX

Napsauta vaaleanvihreää lohkoa ja vastaanota vastaus palvelimelta "Esimerkki, maailma!"

Vastaus (AJAX):

// hanki elementti, jolla on id="myDiv" var myDiv = document.getElementById("myDiv"); // tilaa tämän elementin napsautustapahtuma myDiv.addEventListener("click", function() ( // luo XMLHttpRequest-objekti var request = new XMLHttpRequest(); // määritä pyyntö: GET - method, data.txt - URL, johon pyyntö lähetetään, false - synchronous request request.open("GET","data.txt",false // lähetä tiedot palvelimelle lähetysmenetelmällä request.send(); jos vastauksen tila on 200 (OK ) niin if (request.status==200) ( // näytä palvelimen vastaus elementissä, jossa on id="answer" document.getElementById("answer").innerHTML = request); .responseText; ) ))

Hei maailma!

Esimerkki 2: Synkronisen AJAX-pyynnön käsittely palvelimella PHP:n avulla

Esimerkki, joka käyttää AJAX-tekniikkaa parametrin sisältävän pyynnön lähettämiseen palvelimelle ja vastauksen näyttämiseen sivulla.

Tässä esimerkissä sivu koostuu 3 painikkeesta. Ensimmäisessä painikkeessa on teksti 1, toisen painikkeen teksti 2 ja kolmannen painikkeen teksti 3. Napsauttamalla mitä tahansa painikkeita tehdään synkroninen pyyntö palvelimelle. Käytämme GET:tä pyynnön lähetysmenetelmänä. Ja osoite, johon lähetämme pyynnön ja ajax.php-parametrit. Vastaanotamme asiakkaan palvelimelle lähettämät tiedot HTTP GET -muuttujan ($_GET) avulla. Tämän jälkeen käsittelemme vastaanotetut tiedot palvelimella ja palautamme vastauksen (merkkijono) asiakkaalle.

JavaScript AJAX span ( fontin paino: lihavoitu; väri: punainen; )

Napsauta yhtä painikkeista ja vastaanota vastaus palvelimelta AJAX-tekniikalla.

1 2 3

Vastaus (AJAX):

// hanki kaikki sivun painikeelementit var buttons = document.getElementsByTagName("button"); // tilaa kaikkien elementtien napsautustapahtuma painikkeelle (var i=0; i

Viimeisin päivitys: 1.11.2015

Aiemmin käsitellyt get, post, load menetelmät ovat erittäin helppokäyttöisiä ja kattavat useimmat kehittäjien tarpeet. Joskus on kuitenkin tarve hallita enemmän toteutusta. Ja niin he kääntyvät ajax-menetelmään, joka mahdollistaa pyyntöjen tekemisen alemmalla tasolla. Muut menetelmät käyttävät olennaisesti ajax-menetelmää.

Käytämme esimerkiksi ajax-menetelmää lataamaan html-merkinnät sivun elementtiin:

Lataa $(function())( $("button").click(function())( $.ajax("ajax.php", (onnistui: function(data)( $("#result").html() data) ; ) ));

Anna palvelinpuolen ajax.php-resurssin palauttaa html-merkintöjä vastauksena.

Tässä tapauksessa määritämme kaksi parametria: pyynnön osoitteen ja onnistumisparametrin, joka hyväksyy funktion, joka käsittelee palvelimen vastauksen.

Voisimme tehdä olennaisesti saman asian sekä latausmenetelmällä että get-menetelmällä. Mutta ajax-menetelmän parametrien valikoima antaa sinun mukauttaa pyyntöä yksityiskohtaisemmin.

Lähdössä ajax-menetelmä, kuten muutkin menetelmät, palauttaa nykyiseen pyyntöön liittyvän jqXHR-objektin.

Ajax-menetelmällä voi olla seuraavat muodot: ajax(url, options) ja ajax(optiot) . Options-parametri edustaa javascript-objektia, jossa määritämme tarvitsemamme pyyntövaihtoehdot avain-arvo-parien muodossa. Joten yllä olevassa esimerkissä käytimme onnistumisvaihtoehtoa. Seuraavassa on joitain vaihtoehdoista, joita voimme käyttää ajax-menetelmässä:

url: sen resurssin osoite, johon pyyntö lähetetään. Tietotyyppi: merkkijono

asynkroninen: Ilmaisee, onko pyyntö asynkroninen. Tietotyyppi: Boolen arvo. Oletusarvo on tosi. Jos arvo on epätosi, pyyntö lähetetään synkronisena

dataType: palvelimelta vastaanotetun tiedon tyyppi. Tietotyyppi: merkkijono.

Voi ottaa seuraavat arvot: html, xml, json, jsonp, text, script

välimuisti: Ilmaisee, tallentaako selain vastauksen välimuistiin. Tietotyyppi: Boolen arvo. Oletusarvo on tosi.

Ja oletuksena epätosi pyynnöille, joiden dataType on "script" tai "jsonp"

konteksti: Elementti, joka edustaa takaisinsoittotoimintojen datakontekstia. Esimerkiksi:

$.ajax(( url: "ajax.php", konteksti: document.body ));

tyyppi: ilmaisee pyynnön tyypin. Tyypillisesti "GET" tai "POST". Tietotyyppi: merkkijono. Oletus "GET"

data: tiedot, jotka lähetetään pyynnön mukana palvelimelle. Tietotyyppi: merkkijono tai javascript-objekti

aikakatkaisu: aika millisekunteina odottaa vastausta pyyntöön

globaali: määrittää, voidaanko globaaleja ajax-tapahtumia herättää. Tietotyyppi: Boolen arvo. Oletuksena true, eli globaalien tapahtumien kutsuminen on sallittua

isModified: Voit tarkistaa Last-Modified -vastauksen otsikon. Tietotyyppi: Boolen arvo. Oletusarvo on false, mikä tarkoittaa, että tätä otsikkoa ei tarkisteta. Jos totta, otsikko tarkistetaan. Ja tietoja pyydetään, jos ne ovat muuttuneet edellisen tietopyynnön jälkeen. Jos dataa ei ole muutettu, onnistumisfunktion käsittelijässä dataparametrin arvo on määrittelemätön

salasana: Salasana vaaditaan, jos pyyntö edellyttää todennusta. Tietotyyppi: merkkijono

käyttäjätunnus: käyttäjätunnus tai kirjautuminen vaaditaan, jos pyyntö vaatii todennusta. Tietotyyppi: merkkijono

dataFilter: raakadatan suodatustoiminto. Se vaatii kaksi parametria: function(data, type) . Dataparametri edustaa palvelimelta saatua dataa ja tyyppi on tietotyyppi. Lähdössä funktion pitäisi palauttaa suodatettua dataa

menestys: toiminto kutsutaan, jos pyyntö onnistuu. Se voi kestää kolme parametria: function(data, textStatus, jqXHR) . Dataparametri edustaa palvelimelta saatua dataa. TextStatus-parametri välittää tilakoodin. Kolmas parametri edustaa pyyntöön liittyvää jqXHR-objektia

error: Toiminto, jota kutsutaan, jos tilakoodi ilmoittaa virheestä. Se voi kestää kolme parametria: function (jqXHR, textStatus, errorThrown)

Valmis: Funktio, joka kutsutaan pyynnön suorittamisen jälkeen. Se voi ottaa kaksi parametria: function(jqXHR, textStatus) . TextStatus-parametri kertoo, onnistuiko pyyntö vai epäonnistui.

beforeSend: toiminto, joka käynnistyy ennen pyynnön lähettämistä. Se vaatii kaksi parametria: function (jqXHR, settings) . Asetusparametri sisältää objektin, joka tallentaa joitain lisäpyyntöasetuksia. Jos tämä funktio palauttaa epätosi, pyyntö peruutetaan

xhr: toiminto XMLHttpRequest-objektin luomiseen

Tietenkään ei ole välttämätöntä käyttää kaikkia parametreja, tärkeintä on ottaa huomioon, että yhdistämällä parametrijoukkoja voimme tehdä Ajax-pyynnöstä yhdenmukaisemman vaatimuksiemme kanssa.

Lomaketietojen ja POST-pyyntöjen sarjoittaminen

Yllä tarkastelimme jo GET-pyyntöjen lähettämistä, nyt katsotaan kuinka voimme lähettää POST-pyyntöjä ajax-menetelmällä.

Palvelinpuolella meillä on yksinkertaisin valtuutustietojen käsittely:

Luodaan verkkosivulle lomake ja asetetaan parametrit ajax-menetelmälle:

$(function())( $("#loginForm").submit(function(event) ( event.preventDefault(); $.ajax(( url: $("#loginForm").attr("toiminta"), data : $("#loginForm").serialize(), kirjoita: "POST", menestys: function(data)( $("#tulos").html(data; ) ));

Jquery ajax on asynkroninen. Yksinkertainen esimerkki PHP:n ja AJAXin käytöstä. Lomaketietojen ja POST-pyyntöjen sarjoittaminen

Lisää tästä aiheesta:

Muut artikkelit: