AJAX on lyhenne sanoista Asynchronous Javascript ja XML. Itse asiassa AJAX ei ole uusi teknologia, koska sekä Javascript että XML ovat olleet olemassa melko pitkään, ja AJAX on näiden tekniikoiden synteesi. AJAX yhdistetään useimmiten termiin Web 2.0, ja sitä mainostetaan uusimpana verkkosovelluksena.
AJAXia käytettäessä koko sivua ei tarvitse päivittää joka kerta, koska vain tietty osa siitä päivitetään. Tämä on paljon kätevämpää, koska sinun ei tarvitse odottaa kauan, ja taloudellisempaa, koska kaikilla ei ole rajoittamatonta Internetiä. Totta, tässä tapauksessa kehittäjän on varmistettava, että käyttäjä on tietoinen sivulla tapahtuvasta. Tämä voidaan toteuttaa latausilmaisimilla ja tekstiviesteillä, jotka osoittavat, että tietoja vaihdetaan palvelimen kanssa. Sinun on myös ymmärrettävä, että kaikki selaimet eivät tue AJAX:ia (selaimien vanhemmat versiot ja tekstiselaimet). Lisäksi käyttäjä voi poistaa Javascriptin käytöstä. Siksi tekniikan käyttöä ei pidä käyttää väärin ja turvautua vaihtoehtoisiin menetelmiin tietojen esittämiseksi Web-sivustossa.
Tehdään yhteenveto AJAXin eduista:
- Kyky luoda kätevä verkkokäyttöliittymä
- Aktiivinen käyttäjän vuorovaikutus
- Helppokäyttöisyys
Tietojen vaihtoa varten sivulle on luotava XMLHttpRequest-objekti, joka on eräänlainen välittäjä käyttäjän selaimen ja palvelimen välillä (kuva 1). XMLHttpRequestin avulla voit lähettää pyynnön palvelimelle ja saada myös vastauksen lomakkeella monenlaisia tiedot.
On kaksi tapaa vaihtaa tietoja palvelimen kanssa. Ensimmäinen menetelmä on GET-pyyntö. Tässä pyynnössä pääset palvelimella olevaan asiakirjaan ja välität sille argumentit URL-osoitteen kautta. Tässä tapauksessa asiakaspuolella olisi loogista käyttää Javascriptin pakotoimintoa, jotta jotkin tiedot eivät keskeytä pyyntöä.
Javascriptillä kirjoitetun asiakasosan tulee tarjota tarvittavat toiminnot turvalliseen tiedonvaihtoon palvelimen kanssa ja menetelmiä tietojen vaihtoon millä tahansa edellä mainituista tavoista. Palvelinosan tulee käsitellä syötetiedot ja sen perusteella tuottaa uutta tietoa (esim. tietokannan kanssa työskennellä) ja lähettää se takaisin asiakkaalle. Esimerkiksi tietojen pyytämiseen palvelimelta voit käyttää tavallista GET-pyyntöä, jossa siirretään useita pieniä parametreja, mutta tietojen päivittämiseen tai uusien tietojen lisäämiseen on käytettävä POST-pyyntöä, koska sen avulla voit siirtää suuria tietomääriä.
Kuten jo mainittiin, AJAX käyttää asynkronista tiedonsiirtoa. Tämä tarkoittaa, että tietojen siirron aikana käyttäjä voi suorittaa muita tarpeellisia toimia. Tällä hetkellä käyttäjälle tulee ilmoittaa, että jonkinlainen tiedonvaihto on meneillään, muuten käyttäjä luulee, että jotain on tapahtunut väärin ja voi poistua sivustolta tai kutsua uudelleen toimintoa, jonka hän uskoo olevan "jäätynyt". Web 2.0 -sovelluksessa viestinnän aikana tapahtuvalla osoituksella on erittäin tärkeä rooli: vierailijat eivät ehkä ole vielä tottuneet tähän tapaan päivittää sivua.
Palvelimen vastaus ei voi olla vain XML, kuten tekniikan nimi antaa ymmärtää. XML:n lisäksi voit saada vastauksen lomakkeella tavallista tekstiä tai JSON (Javascript Object Notation). Jos vastaus on saatu pelkällä tekstillä, niin se voidaan heti näyttää sivun säilössä. Vastaanotettaessa vastaus XML-muodossa, vastaanotettu XML-dokumentti yleensä käsitellään asiakaspuolella ja muunnetaan (X)HTML-muotoon. Kun asiakas vastaanottaa vastauksen JSON-muodossa, asiakkaan tarvitsee vain suorittaa vastaanotettu koodi (Javascriptin eval-toiminto) saadakseen täysimittaisen Javascript-objektin. Mutta tässä sinun on oltava varovainen ja otettava huomioon se tosiasia, että haitallista koodia voidaan lähettää tällä tekniikalla, joten ennen palvelimelta vastaanotetun koodin suorittamista sinun tulee tarkistaa ja käsitellä se huolellisesti. On olemassa sellainen käytäntö kuin "idle"-pyyntö, jossa palvelimelta ei saada vastausta, vain palvelinpuolen tietoja muutetaan.
Eri selaimissa tällä objektilla on erilaisia ominaisuuksia, mutta yleisesti ottaen vastaa.
XMLHttpRequest-objektimenetelmätHuomaa, että menetelmän nimet kirjoitetaan samalla Camel-tyylillä kuin muut Javascript-funktiot. Ole varovainen käyttäessäsi niitä.
keskeyttää()- nykyisen pyynnön peruuttaminen palvelimelle.
getAllResponseHeaders()- saada kaikki vastausotsikot palvelimelta.
getResponseHeader("otsikon_nimi")- hanki määritetty otsikko.
open("pyynnön_tyyppi", "URL", "asynkroninen", "käyttäjänimi", "salasana")- pyynnön alustus palvelimelle ja pyyntömenetelmän määrittäminen. Pyynnön tyyppi ja URL-osoite ovat pakollisia parametreja. Kolmas argumentti on boolen arvo. Yleensä tosi on aina määritetty tai sitä ei ole määritetty ollenkaan (oletus on tosi). Neljättä ja viidettä argumenttia käytetään todentamiseen (todennustietojen tallentaminen komentosarjaan on erittäin vaarallista, koska komentosarjaa voi tarkastella kuka tahansa).
lähetä ("sisältö")- lähetä HTTP-pyyntö palvelimelle ja vastaanota vastaus.
setRequestHeader("otsikon_nimi", "arvo")- Aseta pyynnön otsikkoarvot.
XMLHttpRequest-objektin ominaisuudetvalmiissa tilanmuutoksessa- yksi XMLHttpRequest-objektin tärkeimmistä ominaisuuksista. Tämän ominaisuuden avulla määritetään käsittelijä, jota kutsutaan aina, kun objektin tila muuttuu.
readyState- numero, joka ilmaisee kohteen tilan.
vastausteksti- palvelimen vastauksen esitys pelkkänä tekstinä (merkkijono).
vastausXML- palvelimelta vastaanotettu DOM-yhteensopiva dokumenttiobjekti.
Tila- palvelimen vastauksen tila.
statusTeksti- palvelimen vastauksen tilan tekstiesitys.
Sinun tulisi katsoa tarkemmin readyState-omaisuutta:
- 0 - Objektia ei ole alustettu.
- 1 - Objekti lataa tietoja.
- 2 - Objekti on ladannut tietonsa.
- 3 - Objekti ei ole täysin ladattu, mutta käyttäjä voi olla vuorovaikutuksessa sen kanssa.
- 4 - Objekti on alustettu kokonaan; palvelimelta saatiin vastaus.
Kuten edellä mainittiin, tämän objektin luominen kullekin selaintyypille on ainutlaatuinen prosessi.
Jos esimerkiksi haluat luoda objektin Gecko-yhteensopivissa selaimissa, Konquerorissa ja Safarissa, sinun on käytettävä seuraavaa lauseketta:
Var Request = uusi XMLHttpRequest();
Ja Internet Explorerissa käytetään seuraavaa:
Var Request = new ActiveXObject("Microsoft.XMLHTTP");
Var Request = uusi ActiveXObject("Msxml2.XMLHTTP");
Nyt sinun on yhdistettävä kaikki toiminnot yhdeksi selaimen yhteensopivuuden saavuttamiseksi:
Funktio CreateRequest() ( var Request = false; if (window.XMLHttpRequest) ( //Gecko-yhteensopivat selaimet, Safari, Konqueror Request = new XMLHttpRequest(); ) else if (window.ActiveXObject) ( //Internet Explorer try ( Request) = new ActiveXObject("Microsoft.XMLHTTP"); ) catch (CatchException) ( Request = new ActiveXObject("Msxml2.XMLHTTP"); ) ) if (!Request) ( alert("Ei voi luoda XMLHttpRequest"); ) return Request; )
Kaiken tämän jälkeen voit luoda tämän objektin ja olla huolehtimatta suorituskyvystä suosituissa selaimissa. Mutta voit luoda kohteen eri paikoissa. Jos luot sen maailmanlaajuisesti, tietyllä hetkellä vain yksi pyyntö palvelimelle on mahdollinen. Voit luoda objektin aina, kun palvelimelle tehdään pyyntö (tämä ratkaisee ongelman lähes kokonaan).
Pyyntö palvelimellePalvelinpyyntöalgoritmi näyttää tältä:
- XMLHttpRequestin olemassaolon tarkistaminen.
- Alustetaan yhteyttä palvelimeen.
- Pyynnön lähettäminen palvelimelle.
- Vastaanotetun tiedon käsittely.
/* Toiminto pyynnön lähettämiseksi palvelimella olevaan tiedostoon r_method - pyynnön tyyppi: GET tai POST r_path - polku tiedostoon r_args - argumentit kuten a=1&b=2&c=3... r_handler - toiminto, joka käsittelee vastauksen palvelin */ toiminto SendRequest(r_method , r_path, r_args, r_handler) ( //Luo pyyntö var Request = CreateRequest(); //Tarkista pyynnön olemassaolo uudelleen, jos (!Request) ( return; ) //Määritä mukautettu Käsittelijä Request.onreadystatechange = function() ( // Jos tiedonvaihto on valmis if (Request.readyState == 4) ( //Siirrä ohjaus käyttäjän käsittelijälle r_handler(Request); ) ) //Tarkista, onko se tarpeen tee GET-pyyntö if (r_method.toLowerCase() == "get" && r_args.length > 0) r_path += "?" + r_args; //Alusta yhteys Request.open(r_method, r_path, true); if ( r_method.toLowerCase() == "post") ( //Jos tämä on POST-pyyntö //Aseta otsikko Request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf- 8"); //Lähetä pyyntö Request.send(r_args); ) else ( //Jos tämä on GET-pyyntö //Lähetä tyhjä pyyntö Request.send(null); ) )
Pyynnön tekemisestä on tullut paljon helpompaa. Kirjoitetaan esimerkiksi funktio, joka vastaanottaa palvelimella olevan tiedoston sisällön ja tulostaa sen säilöön.
Funktio ReadFile(tiedostonimi, säilö) ( //Luo käsittelijäfunktio var Käsittelijä = function(Request) ( document.getElementById(container).innerHTML = Request.responseText; ) //Lähetä pyyntö SendRequest("GET",tiedostonimi," ", Käsittelijä);)
Näin vuorovaikutus palvelimen kanssa tapahtuu.
Vastausta käsitelläänEdellisessä esimerkissä teimme pyyntöfunktion palvelimelle. Mutta se on pohjimmiltaan vaarallista, koska emme käsittele objektin tilaa ja palvelimen vastauksen tilaa.
Lisätään koodiamme, jotta se voi näyttää visuaalisen ilmoituksen latausprosessista.
Request.onreadystatechange = function() ( //Jos tiedonvaihto on valmis if (Request.readyState == 4) ( //Siirrä ohjaus käyttäjän käsittelijälle r_handler(Request); ) else ( //Ilmoita käyttäjälle latauksesta ))...
Kuten jo tiedät, XMLHttpRequest-objektin avulla voit tietää palvelimen vastauksen tilan. Hyödynnetään tämä tilaisuus.
Request.onreadystatechange = function() ( //Jos tiedonvaihto on valmis if (Request.readyState == 4) ( if (Request.status == 200) ( //Siirrä ohjaus käyttäjän käsittelijälle r_handler(Request); ) else ( // Ilmoitamme käyttäjälle tapahtuneesta virheestä) ) muuten ( //Ilmoita käyttäjälle latauksesta ) ) ...
Palvelimen vastausvaihtoehdotVoit vastaanottaa palvelimelta useita erilaisia tietoja:
- Pelkkää tekstiä
JSON on Javascript-objektimerkintä. Sen avulla voit esittää objektin merkkijonona (tässä voit antaa analogian serialisointifunktion kanssa). Kun vastaanotat JSON-tietoja, sinun on suoritettava se, jotta saat täyden Javascript-objektin ja suoritat sille tarvittavat toiminnot. Huomaa, että tällainen tiedonsiirto ja suoritus eivät ole turvallisia. Sinun on seurattava, mitä toteutukseen tulee.
Esimerkki JSON-koodista:
( "data": ( "sekalainen": [ ( "nimi" : "JSON-elementti yksi", "tyyppi" : "Alaotsikko 1" ), ( "nimi" : "JSON-elementti kaksi", "tyyppi" : " Alaotsikko 2 " ) ] ) )
Kun vastaanotat tällaisen koodin, suorita seuraava toimenpide:
Muun vastausdata = eval("(" + Request.responseText + ")")
Tämän koodin suorittamisen jälkeen kohde on käytettävissäsi vastaustiedot.
Työskentely palvelinpuolen ohjelmointikielten kanssaTällainen työ ei eroa tavallisesta työstä. Esimerkkinä otan PHP:n palvelinpuolen kieleksi. Mikään ei ole muuttunut asiakaspuolella, mutta palvelinpuolta edustaa nyt PHP-tiedosto.
Perinteisesti aloitetaan tervehtimällä ihmeelliseen maailmaamme:
Kaiku "Hei, maailma!";
Tätä tiedostoa käytettäessä asiakkaalle palautetaan merkkijono Hello, World. Kuten voit kuvitella, tämä tarjoaa valtavia mahdollisuuksia sovellusten rakentamiseen. Välittämällä argumentteja kutsuttaessa palvelinta XMLHttpRequestillä, voit parametroida lähdön ja tarjota näin laajan toiminnallisuuden Web-sovellukselle.
PHP:n lisäksi voit käyttää mitä tahansa muuta palvelinpuolen ohjelmointikieltä.
Palautus: jqXHR
Suorittaa asynkronisen HTTP (Ajax) -pyynnön
- versio lisätty: 1.5 jQuery.ajax(url [, asetukset])
url
Tyyppi: merkkijono
URL-osoite, johon Ajax-pyyntö lähetetäänasetukset
Tyyppi: Objekti
Joukko avain-/arvoparametreja, jotka määrittävät Ajax-pyynnön. Kaikki asetukset ovat valinnaisia. Oletuksena asetukset on otettu kohteesta . Alla on täydellinen luettelo kaikista asetuksista. - versio lisätty: 1.0 jQuery.ajax(asetukset)
asetukset
Tyyppi: Objekti
Joukko avain-/arvoparametreja, jotka määrittävät Ajax-pyynnön. Kaikki asetukset ovat valinnaisia. Oletuksena asetukset on otettu kohteesta .
| asetukset | Tietotyyppi |
| hyväksyy Oletus: Riippuu tietotyypistä Kun teet Ajax-pyynnön, otsikot osoittavat sallitut sisältötyypit, joita palvelimelta odotetaan. Näiden tyyppien arvot otetaan hyväksymisparametrista. Jos haluat muuttaa sitä, on parempi tehdä se käyttämällä $.ajaxSetup()-menetelmää. |
esine |
| asynk Oletus: tosi Oletuksena kaikki pyynnöt lähetetään asynkronisesti (tämän parametrin arvo on tosi). Jos tarvitset synkronisia pyyntöjä, aseta async-parametriksi false. Verkkotunnusten välisiä pyyntöjä ja dataType: "jsonp" ei suoriteta synkronisesti. Huomaa, että synkroniset pyynnöt voivat estää selaimen pyynnön suorittamisen aikana. |
looginen |
| beforeSend(jqXHR jqXHR, asetusobjekti) Funktio, joka kutsutaan välittömästi ennen ajax-pyynnön lähettämistä palvelimelle. Sitä voidaan käyttää jqXHR-objektin muokkaamiseen (aikaisemmissa versioissa, ennen jQuery 1.4.x:ää, käytettiin XMLHttpRequestiä). Voidaan käyttää myös otsikoiden vaihtamiseen jne. jqXHR-tyyppinen objekti ja asetusobjekti välitetään argumentteina. False-palautus beforeSend-funktiossa aiheuttaa ajax-pyynnön peruuntumisen. JQuery 1.5:stä lähtien beforeSend käynnistyy pyynnön tyypistä riippumatta. |
toiminto |
| kätkö Oletus: true , false tietotyypeille "script" ja "jsonp". Jos se on epätosi, selain ei tallenna pyydettyä sivua välimuistiin. |
looginen |
| valmis(jqXHR jqXHR, merkkijonon tekstin tila) Funktio, jota kutsutaan ajax-pyynnön valmistumisen jälkeen (käynnistyy onnistumis- ja virhekäsittelytoimintojen jälkeen). Funktiolla on kaksi argumenttia: jqXHR-tyyppinen objekti (aikaisemmissa versioissa, ennen kuin jQuery 1.4.x, XMLHttpRequest käytettiin) ja pyynnön tilaa kuvaava merkkijono ("success", "notmodified", "error", "timeout" ", "keskeytä" tai " jäsennysvirhe"). jQuery 1.5:stä lähtien complete voi hyväksyä joukon toimintoja. |
funktio tai matriisi |
| sisällys Parametri määritetään muodossa (merkkijono:säännöllinen lauseke) ja määrittää, kuinka jQuery jäsentää vastauksen palvelimelta sen tyypistä riippuen. (lisätty versioon 1.5) |
esine |
| sisältötyyppi Oletus: "application/x-www-form-urlencoded; charset=UTF-8" Kun lähetät Ajax-pyynnön, tiedot lähetetään tässä parametrissa määritetyssä muodossa. Oletus on "application/x-www-form-urlencoded; charset=UTF-8". Jos asetat arvon itse, se lähetetään palvelimelle. Jos koodausta ei ole määritetty, käytetään palvelimella asetettua oletuskoodausta. |
linja |
| yhteydessä Objekti, josta tulee konteksti pyynnön suorittamisen jälkeen (tälle muuttujalle välitetty arvo). Jos esimerkiksi määrität kontekstiksi DOM-elementin, kaikki ajax-pyyntökäsittelijät suoritetaan myös tämän DOM-elementin yhteydessä. SISÄÄN tässä esimerkissä tämä avainsana sisältää document.body: $.ajax(( url: "test.html", konteksti: document.body, menestys: function())( $(this).addClass("tehty"); ) )); |
esine |
| muuntimet Oletus: ("*teksti": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML) Määrittää, mitä toimintoja käytetään arvojen muuntamiseen tyypistä toiseen. (lisätty versioon 1.5) |
esine |
| crossDomain Oletus: false samalle verkkotunnukselle, tosi verkkotunnusten välisille kyselyille. Jos haluat suorittaa verkkotunnusten välisen pyynnön (esimerkiksi JSONP) samalle toimialueelle, aseta crossDomain-asetukseksi tosi. Tämä mahdollistaa esimerkiksi palvelimen uudelleenohjauksen toiseen toimialueeseen. (lisätty versioon 1.5) |
looginen |
| tiedot Tiedot, jotka siirretään palvelimelle. Jos data ei ole merkkijono, se muunnetaan kyselymerkkijonoksi. GET-pyyntöjen tiedot liitetään URL-osoitteeseen. Objektin on koostuttava avain/arvo-pareista. Jos arvo on taulukko, jQuery järjestää arvot perinteisen asetuksen mukaan. Oletusarvoisesti esimerkiksi (foo:["bar1", "bar2"]) muuttuu &foo=bar1&foo=bar2 . |
esine tai merkkijono |
| dataFilter (merkkijonotiedot, merkkijonotyyppi) Toiminto, jota käytetään käsittelemään palvelimelta saatua XMLHttpRequest-tyyppistä raakadataa. Funktiosi pitäisi toimia suodattimena ja palauttaa puhdistettu merkkijono. Funktiolle välitetään kaksi parametria: vastaanotettu data ja dataType-parametrin arvo. |
toiminto |
| tietotyyppi Oletus: automaattisesti tunnistettu merkkijono (xml, json, skripti tai html) Palvelimelta odotettavissa olevien tietojen tyyppi. Jos vaihtoehtoa ei ole määritetty, jQuery yrittää määrittää tyypin vastauksen MIME-tyypin perusteella. |
linja |
| virhe(jqXHR jqXHR, merkkijonotekstin tila, merkkijono errorThrown) Toiminto, joka suoritetaan, jos pyyntö epäonnistuu. Siinä on kolme argumenttia: jqXHR-objekti (aiemmin XMLHttpRequest), virhettä kuvaava merkkijono ja poikkeusmerkkijono, jos se heitettiin. Toinen argumentti voi sisältää seuraavat arvot: null, "timeout", "error", "abort" ja "parsererror". Jos HTTP-virhe tapahtuu, sen tekstitila kirjoitetaan kolmanteen argumenttiin. Esimerkiksi "Ei löydy" tai "Sisäinen palvelinvirhe". jQuery 1.5:stä lähtien tämä parametri voi hyväksyä joukon toimintoja yhden funktion sijaan. Virhetapahtumaa ei tapahdu, kun dataType on sama kuin komentosarja tai JSONP. |
funktio tai matriisi |
| maailmanlaajuisesti Oletus: tosi. Kutsutaanko tätä pyyntöä varten globaaleja Ajax-tapahtumakäsittelijöitä (kuten ajaxStart tai ajaxStop). |
looginen |
| otsikot Oletus: () Täällä voit määrittää lisäpyyntöotsikot. Tämän asetuksen arvot syötetään ennen beforeSend-funktion kutsumista, jossa otsikoihin voidaan tehdä lopullisia muutoksia. (lisätty versioon 1.5) |
esine |
| jos Muokattu Oletus: false Pyyntö katsotaan onnistuneeksi vain, jos vastaustiedot ovat muuttuneet edellisen pyynnön jälkeen. Tarkistus suoritetaan Last-Modified -otsikon avulla. Oletuksena tämä vaihtoehto on poistettu käytöstä. jQuery 1.4:ssä "etag"-arvo tarkistetaan myös sen seuraamiseksi, ovatko tiedot muuttuneet. |
looginen |
| on paikallinen Oletus: nykyisestä sijainnista riippuen Parametri määrittää, toimiiko verkkosivu paikallisesti (esimerkiksi tiedostoa, *-laajennusta ja widget-protokollaa käyttäen) vai ei (esimerkiksi http-protokollan avulla). On parempi muuttaa tätä asetusta käyttämällä $.ajaxSetup()-menetelmää. (lisätty versioon 1.5) |
looginen |
| jsonp Määrittää JSONP-pyynnön URL-osoitteeseen lisättävän parametrin nimen (oletusarvoisesti käytetään takaisinsoittoa). Esimerkiksi asetus (jsonp:"onJSONPLoad") muunnetaan merkkijonon "onJSONPLoad=?" url-osaksi. Versiosta 1.5 lähtien arvon false määrittäminen tässä parametrissa estää lisäparametrin lisäämisen URL-osoitteeseen. Tässä tapauksessa sinun on asetettava jsonpCallback-asetusarvo. Esimerkki: (jsonp:false, jsonpCallback:"callbackName"). |
linja |
| jsonpCallback Toiminto, jota kutsutaan, kun palvelin vastaa JSONP-pyyntöön. Oletusarvoisesti jQuery luo tälle toiminnolle mukautetun yksilöllisen nimen, mikä on suositeltavaa. Jos haluat käyttää GET-pyyntöjen välimuistia, anna funktion nimi itse. Versiosta 1.5 alkaen voit määrittää toiminnon, joka käsittelee palvelimen vastauksen itse. |
merkkijono tai funktio |
| mimeType Tässä voit määrittää tietotyypin, jossa vastausta odotetaan palvelimelta XHR:n sijaan. (lisätty versioon 1.5.1) |
linja |
| Salasana Salasana, jota käytetään vastauksena HTTP-pääsyn todennuspyyntöön (tarvittaessa) |
linja |
| käyttäjätunnus Käyttäjätunnus, jota käytetään vastauksena HTTP-käyttöoikeuksien todennuspyyntöön (tarvittaessa) |
linja |
| käsitellä Dataa Oletus: true ; Oletuksena palvelimelle välitetyt tiedot muunnetaan objektista kyselymerkkijonoksi ja lähetetään muodossa "application/x-www-form-urlencoded". Jos haluat lähettää DOM-asiakirjan tai muita tietoja, joita ei voi muuntaa, aseta processData-asetukseksi false. |
looginen |
| scriptCharset Koskee vain "JSONP"- ja "script"-tyyppisiä Ajax GET -pyyntöjä. Jos kolmannen osapuolen toimialueen palvelin käyttää koodausta, joka on erilainen kuin sinun, sinun on määritettävä kolmannen osapuolen palvelimen koodaus. |
linja |
| statusCode Oletus: () 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())( alert("Sivua ei löydy"); ) ) )); Jos pyyntö onnistui, anonyymi toiminto ottaa parametrina samat parametrit kuin onnistumisen kannalta. Jos tapahtuu virhe, se kestää samoin kuin virheenkäsittelytoiminnon kanssa. (lisätty versioon 1.5) |
esine |
| menestys(tietoobjekti, tekstiTila-merkkijono, jqXHR-objekti) Funktio, jota kutsutaan, jos pyyntö suoritetaan onnistuneesti. Ottaa 3 argumenttia - palvelimen lähettämät ja esikäsitellyt tiedot; merkkijono suoritustilan kanssa (textStatus); jqXHR-objekti (1.5:tä vanhemmissa versioissa käytetään XMLHttpRequestiä jqXHR:n sijaan). jQuery 1.5:stä lähtien tämä parametri voi hyväksyä joukon toimintoja yhden funktion sijaan. |
funktio tai matriisi |
| Aikalisä Palvelimen vastauksen odotusaika millisekunteina. Korvaa saman parametrin yleiset asetukset kohdassa $.ajaxSetup(). Jos tämä aika ylittyy, pyyntö epäonnistuu ja tapahtuu virhetapahtuma, jonka tila on "aikakatkaisu". |
määrä |
| perinteinen Oletus: false Aseta tämä parametri arvoon true, jos haluat käyttää perinteistä sarjoitustyyliä. |
looginen |
| tyyppi Oletus: GET Määrittää, onko pyyntö GET vai POST. Voit käyttää myös muita HTTP-pyyntöjä (kuten PUT tai DELETE), mutta muista, että kaikki selaimet eivät tue niitä. |
linja |
| url Oletus: nykyinen sivu. Sivu, jolle pyyntö lähetetään. |
linja |
| xhr Oletuksena ActiveXObject IE:ssä, XMLHttpRequest muissa selaimissa. Takaisinsoittotoiminto XMLHttpRequest-objektin luomiseksi. Luomalla toiminnon otat täyden vastuun kohteen luomisesta. |
toiminto |
| xhrFields Objekti, jonka muoto on (nimi:arvo), jolla muutetaan XMLHttpRequest-objektin vastaavien kenttien arvoja. $.ajax(( url: a_cross_domain_url, xhrFields: ( withCredentials: true ) )); (lisätty versioon 1.5.1) |
kartta |
$.ajax(( type: "POST", url: "some.php", data: ( nimi: "John", sijainti: "Boston" ) )).done(function(msg) ( alert("Tallennetut tiedot: " + msg); ));
Saada uusin versio HTML-sivut
$.ajax(( url: "test.html", välimuisti: false )).done(function(html) ( $("#results").append(html; ));
Lähetämme XML-dokumentin datana. Poista automaattinen tietojen muuntaminen käytöstä tavallinen merkkijono, asettamalla processData-asetukseksi epätosi:
Muutt xmlDocument = ; var xmlRequest = $.ajax(( url: "sivu.php", processData: false, data: xmlDocument )); xmlRequest.done(handleResponse);
Muutt menuId = $("ul.nav").first().attr("id"); var request = $.ajax(( url: "script.php", tyyppi: "POST", data: (id: menuId), dataType: "html" )); request.done(function(msg) ( $("#log").html(msg; )); request.fail(function(jqXHR, textStatus) ( alert("Pyyntö epäonnistui: " + textStatus); ));
Lataa ja suorita JavaScript-tiedosto:
$.ajax(( tyyppi: "GET", url: "test.js", dataType: "script" ));
Tekee pyynnön palvelimelle lataamatta sivua uudelleen. Tämä on matalan tason menetelmä, jossa on paljon asetuksia. 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älle pyynnölle. 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ää.
↓ 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 seuraavien protokollien tapauksessa: 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 processData-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ä. Tämä on korjattu kaikissa myöhemmissä kirjaston versioissa.
TapahtumanjärjestäjätAsetukset beforeSend, error, dataFilter, success ja complete (niiden kuvaus on edellisessä osiossa) mahdollistavat tapahtumakäsittelijöiden asettamisen, jotka esiintyvät tietyillä hetkillä 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.Esimerkki helppokäyttöinen. 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 tekstimuodossa. Voit työskennellä sen kanssa tavallisilla jQuery-työkaluilla (sekä html-dokumentin kanssa). "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 palvelimelleOletuksena 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 tietojen lähettämistä jQuery muuntaa annetun objektin merkkijonoksi 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 palvelimeltaPalvelimelta 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äasetuksetYleisparametrin 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äYksinkertaisin käyttötapaus olisi kutsua $.ajax() määrittelemättä parametreja:
$.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). Määritämme mukautetun funktion handleResponse käsittelijäksi pyynnön onnistuneelle suorittamiselle:
var xmlDocument = [luo xml-dokumentti] ; $.ajax (( url: "page.php" , processData: false , data: xmlDocument, menestys: handleResponse ) ) ;
Edistynyt lähestymistapaAlkaen 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 palvelimelle.
EsisuodattimetTä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.
Esisuodattimet ovat kätevät mukautettujen asetusten (eli pyynnössä määritetyn kirjaston tuntemattomien uusien asetusten) käsittelemiseen. 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 verkkotunnusten välisen pyynnön verkkotunnuspalvelimesi kautta uudelleenohjatuksi seuraavasti:
$.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.
MuuntimetTä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ä mainittua tietotyyppiä "mydatatype" koskeva pyyntö voisi näyttää tältä:
$.ajax (url, (tietotyyppi: "omatietotyyppi" ) );
AJAX on joukko teknologioita, joita käytetään verkkokehityksessä interaktiivisten sovellusten luomiseen. AJAXin avulla voit siirtää tietoja palvelimelta lataamatta sivua uudelleen. Tällä tavalla voit saada erittäin vaikuttavia tuloksia. Ja jQuery-kirjasto yksinkertaistaa huomattavasti AJAXin käyttöönottoa sisäänrakennetuilla menetelmillä.
Ota tekniikka käyttöön käyttämällä $.ajax- tai jQuery.ajax-menetelmää:
$.ajax(ominaisuudet) tai $.ajax(url [, ominaisuudet])
Toinen parametri lisättiin jQueryn versioon 1.5.
url - pyydetyn sivun osoite;
ominaisuudet - pyydä ominaisuuksia.
Täydellinen luettelo vaihtoehdoista on jQueryn ohjeissa.
Tässä opetusohjelmassa käytämme useita yleisimmin käytettyjä parametreja.
menestys (toiminto) - tämä toiminto kutsutaan, kun pyyntö on suoritettu onnistuneesti. 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.
dataType (merkkijono) - mahdolliset arvot: xml, json, script tai html. Kuvaus tietotyypeistä, joita odotetaan palvelimen vastauksessa.
tyyppi (merkkijono) - pyyntötyyppi. Mahdolliset arvot: GET tai POST. Oletus: GET.
url (merkkijono) - pyynnön URL-osoite.
Esimerkki 1Helppo tekstin siirto.
$.ajax(( url: "response.php?action=sample1", menestys: function(data) ( $(.results").html(data; ) ));
Vastauksessa on .result div -elementti.
Vastausta odotellen
Palvelin yksinkertaisesti palauttaa merkkijonon:
Echo "Esimerkki 1 - siirto suoritettu onnistuneesti";
Esimerkki 2Välitämme käyttäjätiedot PHP-skriptille.
$.ajax(( type: "POST", url: "response.php?action=sample2", data: "name=Andrew&nickname=Aramis", menestys: function(data)( $(.results").html( tiedot); ) ));
Palvelin palauttaa merkkijonon, johon on lisätty lähetetyt tiedot:
Echo "Esimerkki 2 - siirto suoritettu onnistuneesti. Parametrit: name = " . $_POST["nimi"] . ", lempinimi= ". $_POST["lempinimi"];
Esimerkki 3JavaScript-koodin välittäminen ja suorittaminen
$.ajax(( dataType: "script", url: "response.php?action=sample3", ))
Palvelin suorittaa koodin:
Echo "$(".results").html("Esimerkki 3 - JavaScriptin suorittaminen");";
Esimerkki 4Käytämme XML:ää. Esimerkkiä voidaan käyttää ulkoisen XML:n, esimerkiksi RSS-syötteen, kanssa työskentelyyn.
$.ajax(( dataType: "xml", url: "response.php?action=sample4", menestys: function(xmldata)( $(.results").html(""); $(xmldata).find ("tuote").each(function())( $(" ").html($(this).text()).appendTo(.results"); )); ) ));
Palvelimen pitäisi palauttaa XML-koodi:
Header("Sisältötyyppi: application/xml; charset=UTF-8"); kaiku
