2. detsember , 2016
Kirjutasin kunagi artikli selle kohta, kuidas luua manustatavaid vidinaid natiivses JavaScriptis ja php-s. Ja kõik oleks hästi, aga üht hetke selles ei puudutatud. Saate selliseid vidinaid kasutada oma saidil, kuid huvitavam on neid luua kolmandate osapoolte ressursside jaoks. Kuid sel juhul peab brauser laadima vajalikud andmed teisest domeenist - need on domeenidevahelised ajax-päringud.
Esiosa programmeerijate vaatevinklist ei erine domeenidevahelised päringud tavalistest päringutest. Kuid tagaküljel on erinevus. Miks pole nendega kõik nii lihtne ja kuidas neid rakendada - lugege selle kohta artiklist.
Proovin hankida andmeid teisest domeenist
Lihtsuse huvides kaaluge taotluste saamist. Oletame, et serveris on mingi html-fail, mille peame ajaxiga laadima teisest domeenist ..html. Avage see ja veenduge, et see on tegelikult saadaval – (avaneb uuel vahelehel). See on tavaline div tekstiga "content from template.html".
Ja nüüd võtame selle html ajaxi otse brauseri konsoolist.
Ärme vaeva native javascriptiga, vaid tõmbame päringu jQuery.get() abil ja väljastame konsooli selle, mis saime vastuseks serverilt.
$..html", function(responce) (console.log(responce)));
Avage oma brauseris arendaja tööriistad ja käivitage see päring konsooli vahekaardil.
Näete midagi sellist
Kõik on korras, saatis päringu, sain vastuse. Näib, mis võiks olla lihtsam? Nüüd minge mõnele teisele saidile, kus jQuery on kaasatud, ja proovige sama teha. Lihtsalt mitte https saidil, miks - saate teada artikli lõpust.
Näiteks kontrollisin taotlusi jalgpallisaidil bombardir.ru. Ja samal ajal mõtlesin, et mis prügi isegi sellistel üsna tuntud saitidel konsooli ei pudene. Vestlus ei käi aga sellest.
Käivitage päring teisest domeenist ja näete konsoolis mitte nii head pilti. Ta ütleb, et allalaadimine on võimatu, andmed puuduvad ja üldiselt kurb.
Kui avate vahekaardi Võrk ja leiate sealt vastava päringu, näete, et server tagastas meile isegi 200 OK 
Faili sisu puudub. Mis on saak?
Mis läks valesti ja mis on lahendus
Konks on selles, et Interneti-poliitika ei luba brauseritel andmeid ühestki ressursist tõmmata. Välja arvatud juhul, kui need ressursid ise on huvitatud konkreetsete andmete levitamisest.
Meie juhtum on just selline. Html-faili kõikjal kasutamiseks loa andmiseks peate selle faili taotlemisel saatma HTTP päise Access-Control-Allow-Origin: *
Nüüd on küsimus, kuidas seda teha. Kui teil (või administraatoritel) on juurdepääs nginxile, on üks võimalus seadistada see päis veebiserveri abil edastama. Lähed vastava päringuga adminnitesse või googeldad ise oma veebiserveri jaoks vajalikud seadistused.
Kui see juurdepääs pole saadaval, nagu näiteks peaaegu iga hostimisteenuse pakkuja juures odava hinnaga, peate sellest ise välja tulema. Ja siin tuleb appi php. Idee on visata meie html php faili, mis edastab pealkirja ja annab soovitud sisu.
See selgub nii, looge fail template.php ja kirjutage käsk php esimesele reale
Header("Access-Control-Allow-Origin: *");
Sisu saidilt template.php
See tähendab, et template.php sisu on selline, ärge unustage php küsimusi ja sulgusid 
Webdevkinis olev fail luuakse ja asub (avaneb uuel vahelehel). Proovime nüüd seda teisest domeenist taotleda ja vaatame, mis juhtub
$..php", function(responce) (console.log(responce)));
Nagu näete, töötab kõik hästi - fail on laaditud! 
Vaatame vahekaarti Võrk.
Pange tähele, et päis Access-Control-Allow-Origin, millest meid huvitab, on ilmunud vastuse päiste plokki: * 
Üldiselt on artikkel valmis. Jääb üle mõtted hunnikusse koguda ja veidi infot lisada.
Kokkuvõtete tegemine ja kokkuvõtete tegemine
- 1. Te ei saa lihtsalt ajax taotleda mis tahes ressurssi teisest domeenist
- 2. Saatke päis Access-Control-Allow-Origin kõigi ressursside jaoks, millele on vaja juurdepääsu kõikjalt
- 3. Tee seda veebiserveri või php-ga
- 4. See päis saadetakse php-le käsu päise kaudu ("Juurdepääs-Juht-Luba-Origin: *")
- 5. Access-Control-Allow-Origin: * - luba juurdepääs kõigile domeenidele, Access-Control-Allow-Origin: site.ru - ainult domeenile site.ru
- 6. Access-Control-Allow-Origin saadetakse kohe php-faili alguses, isegi enne muude andmete (nagu ka muude http-päiste) väljastamist.
- 7. "Ressurss" pole mitte ainult html-märgistusega fail, vaid ka mis tahes url, kuhu ajax-päring läheb, näiteks json-andmete hankimine või postitustaotlus andmebaasi tabelisse rea lisamiseks.
Ja viimane, tarnitakse eraldi. Ma ei palunud asjata täita taotlusi http saidilt. https-iga ei saa http-st andmeid laadida muul põhjusel - segatud sisul. Ja sait on endiselt http-sait ( uuendatud: enam mitte, teisaldas sait https-sse)
Seda näete konsoolis, kui proovite teha sama päringu mis tahes https saidilt. Seega, kui kavatsete tegeleda manustatavate vidinatega või muu sellisega, peate kindlasti oma saidile panema ssl-sertifikaadi.
jQuery.ajax() – esitab serverile päringu ilma lehte uuesti laadimata. See on madala taseme meetod, millel on suur summa seaded. See on kogu ajaxi aluseks, mida on sageli lihtsam mõista ja kasutada, kuid mis pakub selle meetodiga võrreldes siiski piiratud funktsioone.
$.ajax() tagastab XMLHttpRequest objekti. Enamikul juhtudel ei pea te selle objektiga otse töötama, kuid see on siiski saadaval juhuks, kui peate päringu käsitsi katkestama.
Funktsiooni $.ajax() argument on võtme/väärtuse paaridest koosnev objekt, mida kasutatakse päringu lähtestamiseks ja haldamiseks.
Ajaxi taotlusel on kaks kasutusjuhtu:
jQuery.ajax(url[, seaded])
Ainus erinevus meetodi eelmisest versioonist on see, et URL-i atribuut on osa sätetest, mitte eraldi parameeter.
Seadete loend
- võtab vastu(vaikimisi: sõltub andmetüübist)
Tüüp: objekt.
Kui päring tehakse, näitavad päised serverilt oodatavat lubatud sisutüüpi. Nende tüüpide väärtused võetakse aktsepteerimisparameetrist. Näiteks järgmine näide määrab kehtivad kohandatud tüübid:$.ajax(( aktsepteerib: ( mycustomtype: "application/x-some-custom-type" ), konverterid: ( "text mycustomtype": function(result) ( return newresult; ) ), dataType: "mycustomtype" ));
$ . ajax((
võtab vastu :(
minu kohandatud tüüp: "rakendus/x-some-custom-type"
muundurid :(
"text mycustomtype" : funktsioon (tulemus ) (
tagasta uustulemus ;
andmetüüp: "mycustomtype"
} ) ;
- asünkr(vaikimisi: tõsi)
Tüüp: Boolean.
Vaikimisi saadetakse kõik päringud asünkroonselt (st pärast serverisse päringu saatmist ei peata leht oma tööd vastuse ootamisel). Kui teil on vaja päringuid sünkroonselt saata, määrake see suvand väärtusele Väär. Domeenidevahelisi päringuid ja jsonp-tüüpi taotlusi ei saa sünkroonrežiimis täita. Pange tähele, et sünkroonsed päringud võivad päringu kehtivuse ajaks brauseri blokeerida. - enne saatmist (jqXHR, seaded)
Tüüp: funktsioon.
Sisaldab funktsiooni, mis kutsutakse välja vahetult enne ajaxi päringu saatmist serverisse. Selline funktsioon võib olla kasulik jqXHR objekti muutmisel (in varased versioonid raamatukogudes (enne 1.5), kasutatakse jqXHR asemel XMLHttpRequesti). Näiteks saate muuta / määrata soovitud päised (päised) jne. jqXHR-objekt edastatakse funktsioonile esimese argumendina. Teine argument on päringu seaded.
beforeSend on seotud ajaxi sündmustega. Seega, kui selles määratud funktsioon tagastab false, siis ajax päring tühistatakse.Alates jQuery-1.5-st, kutsutakse enneSend sõltumata päringu tüübist. - vahemälu(vaikimisi: tõene, väär dataType "script" ja "jsonp" jaoks)
Tüüp: Boolean.
Kui soovite, et brauser tehtud päringut vahemällu ei salvestaks, määrake see parameeter väärtuseks false. Pange tähele, et kui parameeter on seatud väärtusele Väär, lisatakse URL-ile string "_=". - lõpetatud (jqXHR, teksti olek)
Tüüp: funktsioon.
Funktsioon, mis käivitatakse iga kord, kui AJAX-i päring on lõpule viidud (pärast edu ja vea lõppemist). Funktsioonile edastatakse kaks parameetrit: jqXHR (teegi varasemates versioonides (enne 1.5), jqXHR asemel kasutatakse XMLHttpRequesti) ja päringu olek (stringi väärtus: "success", "notmodified", "error", "timeout", "abort" või "parsererror").
Alates jQuery-1.5-st saate tervele parameetrile ühe funktsiooni asemel edastada hulga funktsioone. Kõik funktsioonid kutsutakse välja selles järjekorras, milles need selles massiivis on antud. - sisu
Tüüp: objekt.
JQuery-1.5-s kasutusele võetud parameeter Määrab objekt vormingus (string:regex) ja määrab, kuidas jQuery sõelub (parsib) serveri vastuse olenevalt selle tüübist. - sisu tüüp
Tüüp: tõeväärtus või string.
Päringu saatmisel serverisse edastatakse andmed sisuType'is määratud vormingus. Vaikimisi on 'application/x-www-form-urlencoded; charset=UTF-8', mis on enamikul juhtudel korras. Kui määrate selle parameetri selgesõnaliselt, edastatakse see serverile (isegi kui sinna andmeid ei saadetud).
Alates jQuery-1.6-st saate pealkirja määramata jätmiseks sisestada väärtuse Väär. - kontekst
Tüüp: objekt.
Objekt, millest saab pärast päringu täitmist kontekst (sellele muutujale edastatud väärtus). Näiteks kui määrate kontekstiks DOM-i elemendi, siis käivitatakse kõik ajaxi päringukäsitlejad ka selle DOM-i elemendi kontekstis. Selles näites märksõna see sisaldab document.body:$.ajax(( url: "test.html", kontekst: document.body )).done(function() ( $(this).addClass("tehtud"); ));
$ . ajax((
url : "test.html" ,
kontekst: dokument. keha
) ) . tehtud(funktsioon()(
$(see) . addClass("tehtud") ;
} ) ;
- muundurid(vaikimisi: ("* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML))
Tüüp: objekt.
JQuery-1.5-s kasutusele võetud parameeter määrab, milliseid funktsioone kasutatakse väärtuste teisendamiseks ühest tüübist teise. - crossDomain(vaikimisi: vale sama domeeni puhul, tõene domeeniüleste päringute puhul)
Tüüp: Boolean.
Valik võeti kasutusele versioonis jQuery-1.5. Kui soovite teha domeeniülese päringu (nagu JSONP) samas domeenis, määrake domeenidevahelise sätte väärtuseks Tõene. See võimaldab näiteks teha serveri ümbersuunamisi teisele domeenile. - andmeid
Tüüp: objekt, string või massiiv.
Andmed saadetakse serverisse. Kui andmed ei ole string, teisendatakse need päringustringiks. GET-päringute puhul lisatakse andmed URL-ile. Objekt peab koosnema võtme/väärtuse paaridest. Kui väärtus on massiiv, korraldab jQuery väärtused traditsioonilise sätte alusel. Vaikimisi muutub näiteks (foo:["bar1", "bar2"]) &foo=bar1&foo=bar2 . - andmefilter(andmed, tüüp)
Tüüp: funktsioon.
Funktsioon, mis hakkab täitma eeltöötlus serveri poolt saadetud andmed, st. see peaks täitma filtri rolli ja tagastama puhastatud stringi. Sellele funktsioonile edastatakse kaks parameetrit: nimetatud andmed ja parameetri väärtus andmetüüp. DataFilteris määratud funktsioon peab tagastama töödeldud andmed. - andmetüüp(vaikimisi: tuvastatakse automaatselt (xml, json, skript või html))
Tüüp: string.
Andmetüüp, milles serverilt vastust oodatakse. Kui see pole määratud, proovib jQuery seda serverist saadud MIME abil automaatselt tuvastada. - viga
Tüüp: funktsioon
Funktsioon, mis tuleb välja kutsuda, kui päring serverile ebaõnnestub. Sellel on kolm parameetrit: jqXHR (enne 1.5 kasutatakse XMLHttpRequesti), string, mis kirjeldab ilmnenud viga ja erandiobjekt, kui see juhtus. Teise argumendi võimalikud väärtused on "timeout", "error", "notmodified" ja "parsererror" (ootamatutel juhtudel võidakse tagastada null). Alates jQuery-1.5-st võib see parameeter võtta kas ühe funktsiooni või funktsioonide massiivi.
Tõrkesündmust ei esine, kui dataType on skript või JSONP. - globaalne(vaikimisi: tõsi)
Tüüp: Boolean.
Vastutab globaalsete ajaxi päringu sündmuste (nt ajaxStart või ajaxStop) toimimise eest. Kui määrate selle parameetri väärtuseks false , siis globaalsed sündmused antud palve ei kutsuta. - päised
Tüüp: objekt.
See parameeter võeti kasutusele jQuery-1.5-s Siin saab määrata täiendavaid päringupäiseid (päist). Selle sätte väärtused sisestatakse enne funktsiooni beforeSend kutsumist, kus saab päistesse lõplikke muudatusi teha. - kui muudetud
Tüüp: Boolean.
Kui see säte on seatud väärtusele Tõene , täidetakse päring olekuga "Õnnestus" ainult siis, kui serveri vastus erineb eelmisest vastusest. jQuery kontrollib seda fakti, vaadates päist Last-Modified. Alates jQuery-1.4-st kontrollitakse peale Last-Modified ka 'etag'i (mõlemad on serveri poolt ja on vajalikud selleks, et anda brauserile teada, et serverilt küsitud andmed ei ole eelmisest päringust muutunud). - on Kohalik
Tüüp: Boolean.
Uus jQuery-1.5.1-s Võimaldab määrata lehe allika oleku kohalikuks (nagu oleks see failiprotokolli kaudu), isegi kui jQuery tuvastas selle teisiti. Teek otsustab, et leht töötab lokaalselt järgmiste protokollide korral: fail, *-laiend ja vidin . Parameetri isLocal väärtus on soovitatav määrata globaalselt – kasutades funktsiooni $.ajaxSetup(), mitte aga üksikute ajaxi päringute seadetes. - jsonp
Tüüp: string või tõeväärtus.
Määrab parameetri nime, mis lisatakse JSONP päringu URL-ile (vaikimisi kasutatakse "tagasihelistamist"). Näiteks säte (jsonp:"onJSONPLoad") teisendatakse stringi "onJSONPLoad=?" URL-i osaks. . Alates versioonist 1.5 takistab selle parameetri määramine valeks selle lisamist URL-ile lisaparameeter. Sel juhul peate määrama sätte jsonpCallback väärtuse. Näiteks: (jsonp:false, jsonpCallback:"callbackName") . - jsonpCallback
Tüüp: string või funktsioon.
Määrab funktsiooni nime, mida kutsutakse välja, kui server vastab jsonp-päringule. Vaikimisi genereerib jQuery sellele funktsioonile suvalise nime, mis on teegi töö lihtsustamiseks eelistatud valik. Üks põhjusi, miks tasub välja tuua enda funktsioon jsonp-päringu töötlemine on parandada GET-päringute vahemällu salvestamist.
Alates jQuery-1.5-st saate selles parameetris määrata funktsiooni serveri vastuse ise töötlemiseks. Sel juhul peab määratud funktsioon tagastama serverist saadud andmed (määratud funktsioonis on need saadaval esimeses parameetris). - meetod (vaikimisi: "GET")
Tüüp: string.
JQuery-1.9.0-s kasutusele võetud parameeter Võimaldab teil määrata serveri päringu tüübi ("POST" , "GET" , "PUT") - mimeType
Tüüp: string.
jQuery-1.5.1-s kasutusele võetud parameeter See väli võimaldab määrata andmetüübi, milles XHR-i asemel oodatakse serverilt vastust - parool
Tüüp: string.
Vajadusel parool serveris autentimiseks. - töödelda andmeid(vaikimisi tõene)
Tüüp: Boolean.
Vaikimisi teisendatakse serverisse saadetud andmed objektist päringustringiks (url-i vorming: fName1=value1&fName2=value2&...) ja saadetakse kujul "application/x-www-form-urlencoded" . Kui teil on vaja saata DOM-dokument või muud andmed, mida ei saa teisendada, määrake suvand processData väärtuseks false . - script Charset
Tüüp: string.
Kehtib ainult Ajaxi GET-i päringutele, dataType võib olla kas "jsonp" või "script". Kui kolmanda osapoole domeenis olev server kasutab teist kodeeringut kui teie, peate määrama kolmanda osapoole serveri kodeeringu. - olekukood
Tüüp: objekt.
Parameeter võeti kasutusele jQuery-1.5.0-s. Paaride komplekt, mis sobitavad päringu täitmiskoodid väljakutsutavate funktsioonidega. Näiteks koodi 404 puhul (lehti ei ole olemas) saate kuvada ekraanil teate:$.ajax(( statusCode: ( 404: function()) ( alert("lehte ei leitud"); ) ));
$ . ajax((
staatuse kood :(
404 : funktsioon () (
alert("lehte ei leitud") ;
} ) ;
Kui taotlus õnnestus, siis parameetrina anonüümne funktsioon võtab samad parameetrid kui eduka päringu töötleja funktsioonid (määratud eduparameetris) ja vea korral samad, mis veafunktsioonid. - edu (andmed, teksti olek, jqXHR)
Tüüp: funktsioon, massiiv.
Funktsioon, mida kutsutakse välja, kui päring serverile on edukalt täidetud. Nõuab 3 argumenti:- serveri poolt saadetud ja eeltöödeldud andmed (andmed);
- string täitmise olekuga (textStatus);
- jqXHR objekt (enne 1.5 kasutatakse jqXHR asemel XMLHttpRequesti). Alates versioonist jQuery 1.5 võib see parameeter ühe funktsiooni asemel kasutada mitmeid funktsioone.
- aeg maha
Tüüp: number.
Aeg oodata serverilt vastust millisekundites. Kirjutab ümber globaalne seadistus sama parameeter failis $.ajaxSetup(). Kui see aeg ületatakse, lõpetatakse päring veaga ja käivitatakse tõrkesündmus, millel on "timeout" olek.
Aega hakatakse lugema hetkest, kui funktsiooni $.ajax kutsuti. Võib juhtuda, et sel hetkel käivitatakse mitu muud päringut ja brauser lükkab praeguse päringu täitmise edasi. Sel juhul võib ajalõpp lõppeda, kuigi tegelikult pole päring veel alanud.
Rakenduses jQuery-1.4 ja varasemates versioonides läheb XMLHttpRequesti objekt ajalõpu aegumisel veaolekusse ja selle väljadele juurdepääs võib põhjustada erandi. Firefox 3.0+ puhul ei katkestata skripti- ja JSONP-päringuid ajalõpu korral. Need täidetakse ka pärast selle aja möödumist. - traditsiooniline
Tüüp: Boolean.
Traditsiooniliste teisendus- (serialiseerimis-) valikute kasutamiseks määrake selle parameetri väärtuseks Tõene. - tüüp(vaikimisi: "GET")
Tüüp: string.
Sarnaselt meetodi parameetriga. Seda parameetrit kasutatakse jQuerys enne versiooni 1.9.0 - url(vaikimisi: praeguse lehe aadress)
Tüüp: string.
Määrab aadressi, kuhu päring saadetakse. - kasutajanimi
Tüüp: string.
Vajadusel serveris autentimiseks vajalik kasutajanimi. - xhr(vaikimisi: ActiveXObject IE-s, XMLHttpRequest teistes brauserites)
Tüüp: funktsioon.
Funktsioon, mis pakub XMLHttpRequest objekti. Vaikimisi on IE brauserite jaoks see objekt ActiveXObject, muidu on see XMLHttpRequest. Selle valikuga saate sisestada selle objekti oma versiooni. - xhrFields
Tüüp: objekt.
Parameeter ilmus jQuery-1.5.1 Paaride komplektis (nimi: väärtus) objekti XMLHttpRequest vastavate väljade väärtuste muutmiseks/lisamiseks. Näiteks saate domeenidevahelise päringu tegemisel määrata selle atribuudi withCredentials väärtuseks Tõene:$.ajax(( url: a_cross_domain_url, xhrFields: ( koos mandaatidega: true ) ));
$ . ajax((
url : a_cross_domain_url ,
xhrFields :(
mandaatidega: tõsi
} ) ;
Nagu eespool mainitud, on $.ajax() kõige elementaarsem meetod ja kõik järgnevad meetodid on vaid selle ümbrised. Väga sageli pole seda funktsiooni vaja kutsuda. alternatiive on rohkemgi kõrge tase, nagu , ja . Neid on lihtsam mõista ja kasutada, kuigi $.ajax() on paindlikum.
Lihtsaim kasutusjuhtum oleks kutsuda $.ajax() ilma parameetriteta:
$ . ajax(); |
Sündmuste korraldajad
EnneSend, error, DataFilter, Edu ja Complete sätted võimaldavad teil määrata sündmuste käitlejad, mis esinevad iga ajaxi päringu täitmise teatud punktides.
- enneSaada toimub vahetult enne päringu saatmist serverisse;
- viga tekib siis, kui taotlus ebaõnnestub;
- andmefilter tekib siis, kui serverist saabuvad andmed. Võimaldab töödelda serveri saadetud "tooreid" andmeid;
- edu toimub päringu eduka täitmise korral;
- täielik toimub taotluse mis tahes täitmise korral. edu: funktsioon()(
- "xml"- saadud xml-dokument on saadaval teksti kujul. Saate temaga koostööd teha standardsed vahendid jQuery (sama, mis html-dokumendi puhul).
- "html"- saadud html on saadaval teksti kujul. Kui see sisaldab siltides skripte
millegi kogus serveris site2.ru -
hoiatus ( "Andmete saatmine õnnestus.") ;
} ) ;
Tähelepanu! Eespool käsitletud sätted .success() , .error() ja .complete() lisati jQuery-1.5-sse lisaks standardsetele edasilükatud .done() , .fail() ja .then() meetoditele töötlejate seadistamiseks. ., kuid alates versioonist jQuery-1.8 on need kolm meetodit aegunud.
parameeter dataType
Funktsioon $.ajax() õpib tundma, millist tüüpi andmeid server saadab serverist endast (kasutades MIME-d). Lisaks on võimalik isiklikult näidata (selgitada), kuidas neid andmeid tõlgendada. Seda tehakse parameetri abil andmetüüp. Selle parameetri võimalikud väärtused: