2. decembra. , 2016
Jednom sam napisao članak kako stvoriti ugrađene widgete na izvornim JavaScript i PHP. I sve bi bilo u redu, ali jedan trenutak nije uticao na to. Takvi se widgeti mogu koristiti na vlastitom mjestu, ali zanimljivije je stvoriti ih za treće strane. Ali u ovom slučaju, željeni preglednik podataka mora učitati iz druge domene - ovo je zahtjevi Ajax-a u Cross-Domain-u.
Sa stanovišta frontEnd programera, zahtjevi za unakrsne domene nisu različiti od običnih. Ali na Bekendu postoji razlika. Zašto s njima nije sve tako jednostavno i kako ih implementirati - pročitajte o tome u članku.
Pokušavamo dobiti podatke iz druge domene
Za jednostavnost, razmislite o dobiti zahtjeve. Pretpostavimo da server leži određena HTML datoteka, koju nam ivicu za nas kako preuzme Ajax-ohm iz druge domene..html. Otvorite ga i provjerite je li zaista dostupan - (otvara se na novoj kartici). Ovo je redovno div s tekstom "Sadržaj iz template.html".
A sada preuzmimo ovaj HTML-ku Ajax-ohm direktno sa konzole pregledača.
Nećemo se bacati izvornim JavaScript-om, a vozom zahtjeva pomoću jQuery.get () i dovesti do konzole ono što su dobili kao odgovor sa servera.
$ .. html ", funkcija (odgovorno) (odgovorno)));
Otvorite alate za programere u pretraživaču i na kartici konzole, napravite ovaj zahtjev.
Vidjet ćete o sljedećem
Sve je divno, poslato zahtjev, dobio je odgovor. Čini se da bi moglo biti lakše? I sada idite na bilo koju drugu stranicu u kojoj je jQuery povezan i pokušajte to učiniti isto. Samo ne na web mjestu HTTPS, zašto - naučiti na kraju članka.
Na primjer, provjerio sam zahtjeve na nogometnom mjestu bombardir.ru. I istovremeno je pušten, koji smeće ne spada u konzolu ni na tako poznatim lokacijama. Međutim, razgovor nije u tome.
Izvršite zahtjev od druge domene i vidjet ćete konzolu više takve blatna slika. Kaže, nemoguće je preuzeti, nema podataka i općenito tuge.
Ako otvorite karticu Mreže i pronađite odgovarajući upit tamo, vidjet ćete da se server čak vratio na US 200 ok 
A ne postoji datoteka sadržaja. Šta je ulov?
Šta je pošlo po zlu i koja će biti odluka
Ulov je da internetska politika ne dopuštaju preglednicima da izvuku podatke iz bilo kakvih resursa. Pored slučajeva u kojima su ovi resursi zainteresovani za distribuciju određenih podataka.
Naš slučaj je takav. Da biste dobili dozvolu za upotrebu HTML datoteke s bilo kojeg mjesta, želite poslati pristup HTTP zaglavlje pristupa - omogućuju HTTP za zatraženje datoteke.
Sada je pitanje kako to učiniti. Ako (ili administrirate) imate pristup Nginu, a zatim na jedan način da konfigurirate kontaminaciju ovog zaglavlja na alate web servera. Idite na administratoru sa odgovarajućim zahtjevom ili Googleu vi željene konfigurirane za vaš web poslužitelj.
Ako nema ovog pristupa, poput, na primjer, u gotovo bilo kojem pružaču hostinga u jeftinoj tarifi, onda morate izaći sami. A ovdje PHP dolazi na spas. Ideja je bacanje našeg HTML-ku u php datoteku, koji se snosi naslovom i dat će željeni sadržaj.
Ispada da kreirate datoteku template.php i prvi niz napišite PHP naredbu
Zaglavlje ("Pristupno-kontrolu-dopušta-porijeklo: *");
Sadržaj iz template.php.
Odnosno sadržaj template.php će biti tako, ne zaboravite na php rukave i zagrade 
Datoteka na Webdevkinu kreira se i laži (otvara se na novoj kartici). Pokušajmo sada zatražiti od druge domene i vidjeti šta će se dogoditi
$ .. php ", funkcija (odgovorno));
Kao što vidite, sve funkcionira dobro - datoteka je učitana! 
Pogledajte karticu Mreža.
Imajte na umu da je zaglavlje za glavu za kontrolu pristupa i kontrolu zainteresiran za blok zaglavlja odgovora. 
Općenito, članak je završen. Ostaje da sakuplja misli u gomilu i dodam još nekoliko informacija.
Sažeti i sumirati
- 1. Nemoguće je lako zatražiti Ajax bilo koji resurs iz druge domene
- 2. Pošaljite zaglavlje sa pristupom-dopuštanju-porijekla za sve resurse na koji pristup može biti potreban pristup.
- 3. Učinite to sa web serverom ili PHP-om
- 4. Na PHP-u ovaj zaglavlje šalje naredbu zaglavlja ("Pristupni kontrolu - Omogući: *")
- 5. Dopuštanje pristupnog kontrola: * - Omogućite pristup svim domenama, dopuštanju pristupnom kontrolom - porijeklo: stranica.ru - samo na lokalitetu domene.ru
- 6. Porijeklom pristupne kontrole - podrijetlo se šalje na samom početku PHP datoteke, čak i prije izlaza drugih podataka (kao i bilo koji drugi http naslovi)
- 7. "Resurs" nije samo datoteka sa HTML markom, već i bilo koji URL na koji AJax zahtjev dolazi, na primjer, primanje JSON podataka ili postavki zatrag za dodavanje niza u tablicu baze podataka
A posljednje, izvedeno odvojeno. Nisam tražio ispunjavanje zahtjeva sa HTTP stranice. Sa HTTPS-om neće biti moguće učitati podatke sa HTTP iz drugog razloga - mješoviti sadržaj. A web mjesto je i dalje http stranica ( ažurirano: Više nije odloženo mjesto na https)
To ćete vidjeti u konzoli, pokušavajući ispuniti isti zahtjev sa bilo koje HTTPS stranice. Stoga ćete se uključiti u ugrađene widgete ili nešto slično, definitivno trebate staviti SSL certifikat na svoju web lokaciju.
jquery.ajax () - vrši zahtjev poslužitelju bez ponovnog pokretanja stranice. Ovo je metoda niskog nivoa. velika količina Podešavanja. Zasnovan je na radu svih Ajaxa, što je često lakše razumjeti i koristiti, ali koji i dalje pruža ograničenu funkcionalnost u odnosu na ovu metodu.
$ .Ajax () vraća XMLHttPrequest objekt. U većini slučajeva, nećete morati raditi direktno s ovim objektom, ali je i dalje dostupan, u slučaju da ga trebate ručno prekinuti.
Kao argument, funkcija $ .AJAX () prenosi se objekt koji se sastoji od para ključa / vrijednosti, koji se koriste za inicijalizaciju i upravljanje zahtjevom.
Ajax zahtjev ima dvije mogućnosti za upotrebu:
jquery.ajax (URL [, Podešavanja])
Razlika iz prethodne verzije metode sastoji se samo da je nekretnina URL-a dio postavki, a ne zasebni parametar.
Lista postavki (postavke)
- prihvaća.(Zadano: ovisi o datuep)
Tip: objekt.
Prilikom izvršavanja upita, zaglavlja (zaglavlje) označavaju dozvoljene vrste sadržaja koji se očekuju od poslužitelja. Vrijednosti ovih vrsta bit će uzete iz parametra Prihvati. Na primjer, sljedeći primjer ukazuje na dopuštene vrste prilagođenih prilagođenih:$ .AJAX ((prihvaća: (MyCustomtype: "Aplikacija / X-Neki-Custom-Type"), pretvarači: ("TEXT MyCustomtype": Funkcija (rezultat) (povratak NewResult;), Datatip: "MyCustomType");
$. ajax (()
prihvata: (
mycustomtype: "Primjena / X-Neki-prilagođena vrsta"
pretvarači: (
"Tekst mycustomtype": funkcija (rezultat) (
vratiti newresult;
datatip: "MyCustomType"
} ) ;
- async. (Default: True)
Tip: logička vrijednost.
Prema zadanim postavkama, svi zahtjevi se šalju asinhrono (koji je nakon slanja zahtjeva na poslužitelj, stranica ne zaustavlja svoj rad dok čeka odgovor). Ako trebate poslati upite sinkrono, postavite ovu opciju u FALSE. Crossdomain Zahtjevi i zahtjevi "JSONP" tipa ne mogu se izvesti u sinkronom režimu. Imajte na umu da sinhroni zahtjevi mogu blokirati pretraživač tokom vremena izvršenja. - bEFORESERT (jqxhr, postavke)
Tip: Funkcija.
Sadrži funkciju koja će se pozvati odmah prije slanja zahtjeva AJAX na server. Ova funkcija može biti korisna za izmjenu JQXHR objekta (u rane verzije Biblioteke (do 1,5), umjesto jqxhr koristi xmlhttprequest). Na primjer, možete promijeniti / odrediti potrebne zaglavlja (zaglavlja) I.D. Objekt JQXHR prenosit će se na prvu funkciju argumentacije. Drugi argument prenosi postavke upita.
Preizgled se odnosi na Ajax događaje. Stoga, ako funkcija navedena u njemu vraća lažna, upit AJAX bit će otkazan. Beforsend se naziva samostalno od vrste upita. - skladiste. (Default: True, FALSE ZA DATATIP "Skripta" i "JSONP")
Tip: logička vrijednost.
Ako želite da pretraživač ne bude kešira zahtjev, a zatim postavite ovaj parametar na FALSE. Imajte na umu da ako je parametar postavljen na FALSE, "_ \u003d" niz će biti dodan u URL. - kompletan (jqxhr, textstatus)
Tip: Funkcija.
Funkcija koja se izvršava svaki put nakon završetka ajax upita (nakon uspjeha i pogreške ispunjena). Dva parametra prenose se u funkciju: jqxhr (u ranim verzijama biblioteke (do 1,5), umjesto JQXHR koristi XMLHttPrequest) i status izvršenja upita (string: "uspjeh", "nemoćan", "" uspjeh "," Greška "," Vremena "," prekida ", ili" parserError ").
Počevši od jQuery-1.5, kompletan parametar može se prenijeti niti jedna funkcija, već niz funkcija. Sve funkcije bit će uzrokovane redoslijedom navedenog polja. - sadržaj.
Tip: objekt.
Parametar se pojavio u JQuery-1.5 postavljen je u objektu formata (string: regularni izraz) i određuje kako jQuery rastavlja odgovor sa servera, ovisno o njegovoj vrsti. - sadržaj.
Tip: logička vrijednost ili niz.
Prilikom slanja zahtjeva poslužitelju, podaci se prenose u format naveden u sadržaju sadržaja. Po defaultu, "aplikacija / X-www-form-urlencoded; Charset \u003d UTF-8 ', koji je pogodan u većini slučajeva. Ako navedete ovaj parametar izričito, bit će prenesen na server (čak i ako se tamo ne pošalje podaci).
Sa jQuery-1.6 možete poslati FALSE da ne postavite naslov. - kontekst.
Tip: objekt.
Objekt koji će biti kontekst nakon izvršenja upita (prenosio vrijednost ovoj varijabli). Na primjer, ako navedite Dom element kao kontekst, tada će se svi Ajax zatražiti ručnike zatražiti i u kontekstu ovog DOM elementa. U ovom primjeru ključna riječ Ovo će sadržavati dokument.Dod:$ .Ajax ((URL: "test.html", kontekst: dokument.Dodbi)). Gotovo (funkcija () ($ (ovo) .Addclass ("Gotovo"););
$. ajax (()
uRL: "test.html",
kontekst: dokument. Telo.
))). Gotov (funkcija () () (
$ (ovo). Addclass ("Gotovo");
} ) ;
- pretvarači.(Zadano: ("* Tekst": prozor.string, "Tekst HTML": True, "Tekst JSON": jquery.parsejson, "Tekst XML": jquery.parsexml))
Tip: objekt.
Parametar se pojavio u JQuery-1.5 određuje, uz pomoć koje će se funkcije pretvoriti u vrijednosti iz iste vrste, u drugom. - crossdomain.(Default: FALSE za istu domenu, TRUE za crossdomains)
Tip: logička vrijednost.
Parametar se pojavio u jQuery-1.5 ako želite izvesti upita unakrsne domene (na primjer, jsonp) na istoj domeni, postavljen u okrug. To omogućava, na primjer, da se ponovno preusmjeravanje poslužitelja učini na drugu domenu. - podaci.
Tip: Objekt, niz ili niz.
Podaci koji će biti preneseni na server. Ako podaci nisu niz, tada se pretvaraju u niz upita. Za dobivanje zahtjeva, podaci su priloženi u URL-u. Objekt se treba sastojati od para ključa / vrijednosti. Ako vrijednost niza, tada jQuery naručuje vrijednosti ovisno o tradicionalnoj postavci. Prema zadanim postavkama, na primjer, (foo: ["Bar1", "Bar2"]) ulazi u & foo \u003d bar1 & foo \u003d bar2. - dataFilter (podaci, tip)
Tip: Funkcija.
Funkcija koja će prediftikirati podatke koje je poslao poslužitelj, I.E. Trebalo bi igrati ulogu filtera i vratiti očišćeni niz. Dvije parametre prenose se u ovu funkciju: spomenuti podaci i vrijednost parametra datatip.. Funkcija navedena u DataFilter-u mora vratiti obrađene podatke. - datatip. (Zadano: Određeno automatski (XML, JSON, Script ili HTML))
Tip: Red.
Vrsta podataka u kojima se očekuje da dobiju odgovor sa servera. Ako nije naveden, jQuery će ga pokušati automatski odrediti pomoću MIME servera. - greška
Tip: Funkcija
Funkcija koja će se pozvati u slučaju neuspešnog završetka zahtjeva poslužitelju. Pruža tri parametra: JQXHR (do 1,5 koristi XMLHttPrquest), niz s opisom pogreške koji su se dogodili, kao i objekt izuzetka ako se to dogodilo. Moguće vrijednosti Drugog argumenta: "TIMEOUT", "GREŠKA", "NOTModifikovan" i "ParserError" (u nepredviđenim slučajevima može se vratiti nulta vrijednost). Počevši od jQuery-1.5, ovaj parametar može uzeti jednu funkciju i niz funkcija.
Događaj greške ne dolazi do kada je Datatip jednak skriptu ili jsonp. - globalan (Default: True)
Tip: logička vrijednost.
Odgovoran za rad Global Ajax zahtjeva za zahtjev (na primjer, Ajaxstart ili Ajaxstop). Ako ovaj parametar postavite na FALSE, globalni događaji za ovaj zahtjev Će se zvati. - zaglavlja.
Tip: objekt.
Parametar se pojavio u JQuery-1.5 Ovdje možete odrediti dodatne zaglavlja upita (zaglavlje). Vrijednosti ove postavke bit će upisane prije nego što se naziva izvrsne promjene u koje se mogu izvršiti konačne promjene u naslovima. - ifmodifikovan
Tip: logička vrijednost.
Kada prenesete ovu postavku na TRUE, upit će biti završen sa statusom "Uspješno", samo ako se odgovor poslužitelja razlikuje od prethodnog odgovora. JQuery provjerava ovu činjenicu koja se odnosi na posljednji modificirani zaglavlje. Počevši od jQuery-1.4, pored posljednjeg modificiranog i "etag" također se provjerava (oba pruža se poslužitelj i potrebni su za obavještavanje pregledača koji traženi podaci sa servera ne mijenjaju iz prethodnog zahtjeva). - islocal
Tip: logička vrijednost.
Parametar se pojavio u jQuery-1.5.1 omogućava vam postavljanje statusa izvora stranice lokalnog (kao da se to dogodilo putem protokola datoteke), čak i ako je jQuery prepoznao drugačije. Biblioteka odlučuje da se stranica radi lokalno u slučaju sljedećih protokola: datoteke, * -axtension i widget. Preporučuje se da postavi vrijednost Islocal parametra globalno - koristeći funkciju $ .ajaxSup (), a ne u Podešavanja pojedinih pitanja AJAX-a. - jsonp
Tip: red ili logička vrijednost.
Definira naziv parametra koji se dodaje u JSONP zahtjev za URL (zadano "," povratni poziv "se koristi). Na primjer, konfiguracija (JSONP: "OnjusonPload") pretvori se u dio URL-a String "OnjsonPload \u003d?" . Počevši od verzije 1.5, specifikacija u ovom lažnom parametru sprečava dodavanje u URL-u dodatni parametar. U ovom slučaju morate postaviti jsonpcallback vrijednost podešavanja. Na primjer, ovo je: (JSONP: FALSE, JSONPCALCKBACK: "CallBacketName"). - jsonpcallback
Tip: niz ili funkcija.
Definira naziv funkcije koja će se nazvati prilikom odgovaranja na poslužitelj na JSONP zahtjev. Prema zadanim postavkama, jQuery generira proizvoljno ime ove funkcije, što je preferirana opcija koja pojednostavljuje rad biblioteke. Jedan od razloga u kojima je specificirati vlastiti jsonp funkcija za obradu upita je poboljšanje predmemoriranja geniranja zahtjeva.
Počevši od jQuery-1.5, možete odrediti funkciju u ovom parametru kako biste sami obradili odgovor poslužitelja. U ovom slučaju navedena funkcija mora vratiti podatke primljene sa servera (u navedenoj funkciji bit će dostupni u prvom parametru). - metoda (zadano: "Get")
Tip: Red.
Parametar pojavio se u JQuery-1.9.0 omogućava vam da odredite vrstu zahtjeva na poslužitelju ("Post", "Get", "Put") - mimetipe.
Tip: Red.
Parametar se pojavio u jQuery-1.5.1. Na ovom polju možete odrediti vrstu podataka u kojima se očekuje odgovor sa servera umjesto XHR-a - lozinka.
Tip: Red.
Lozinka za provjeru autentičnosti na poslužitelju, ako je potrebno. - procesData. (zadana tačna)
Tip: logička vrijednost.
Prema zadanim postavkama, prenošeni na poslužitelj pretvaraju se iz objekta u nizu upita (URL format: fname1 \u003d vrijednost1 & fname2 \u003d vrijednost2 & ...) i poslana kao "aplikacija / x-www-forl-urlencoded". Ako trebate poslati dom dokument ili druge podatke koji se ne mogu pretvoriti da bi se opcija postavila u procesData u FALSE. - scriptHarset.
Tip: Red.
Primjenjuje se samo za Ajax Dobivanje upita, datatip može biti ili "jsonp" ili "skripta". Ako server na domenu treće strane koristi kodiranje osim vašeg, morate odrediti kodiranje poslužitelja treće strane. - statusCode.
Tip: objekt.
Parametar se pojavio u jQuery-1.5.0 set pare, u kojem se upita su u odnosu na funkcije koje će biti uzrokovane. Na primjer, za kod 404 (ne postoji), možete izvući poruku na ekran:$ .Ajax (statusna kud: (404: Funkcija () (upozorenje ("Stranica nije pronađena");));
$. ajax (()
statusCode: (
404: Funkcija () (
upozorenje ("Stranica nije pronađena");
} ) ;
Ako je zahtjev uspješno prošao, tada kao parametar, anonimna funkcija Poduzet će iste parametre da funkcije uspješnog izvršavanja upita (navedene u parametru uspjeha) i u slučaju pogreške isto kao i funkcije pogreške. - uspjeh (podaci, tekstuatus, jqxhr)
Tip: Funkcija, niz.
Funkcija koja će se pozvati u slučaju uspješnog završetka zahtjeva poslužitelja. Uzima 3 argumenta:- podaci (podaci) poslani od strane poslužitelja i predobrade;
- niz sa statusom izvršenja (TextStatus);
- objekt JQXHR (u verzijama do 1,5 umjesto jqxhr koristi xmlhttprequest). Iz jQuery 1.5, umjesto jedne funkcije, ovaj parametar može preuzeti niz funkcija.
- vrijeme je isteklo.
Tip: Broj.
Vrijeme čekajući odgovor na serveru u milisekundi. Prepisivati globalna postavka Isti parametar u $ .AaxSetup (). Ako se ovaj put prekorači, zahtjev će biti završen greškom i pojavit će se događaj greške, što će imati status "Istek".
Vrijeme se računa od trenutka poziva na $ .ajax funkciju. Može se dogoditi da će u ovom trenutku biti pokrenut nekoliko drugih zahtjeva i preglednik će odgoditi izvršenje trenutnog zahtjeva. U ovom slučaju, istek vremena može se završiti, mada u stvari, zahtjev nije ni lansiran.
U jQuery-1.4 i mlađoj, na kraju vremena čekanja, XMLHttPrequest objekt će se prebaciti na stanje greške i pristup njenim poljima može izazvati izuzetak. U Firefoxu 3,0+, skripta i jsonp upiti neće se prekinuti kada se prekorači vrijeme čekanja. Oni će biti završeni i nakon što ovaj put ističu. - tradicionalno
Tip: logička vrijednost.
Podesite vrijednost ovog parametra na TRUE, kako bi se koristili tradicionalni parametri pretvorbe (serializacija). - vrsta(Default: "Get")
Tip: Red.
Metoda analognog parametara. Parametar se koristi u jQuery ispod 1.9.0 - url (zadano: adresa trenutne stranice)
Tip: Red.
Definira adresu kojoj će se zahtjev poslati. - korisničko ime.
Tip: Red.
Korisničko ime za autentifikaciju na poslužitelju, ako je potrebno. - xhr.(Zadano: ActiveXObject u IE, XMLHttPrquest u drugim preglednicima)
Tip: Funkcija.
Funkcija koja će pružiti XMLHttPrequest objekt. Prema zadanim postavkama, odnosno preglednici Ovaj objekt je ActiveXObject, a u drugim slučajevima je XMLHttPrquest. Uz ovaj parametar možete implementirati vlastitu verziju ovog objekta. - xhrfields.
Tip: objekt.
Parametar se pojavio u jQuery-1.5.1 set parova (naziv: znak) za promjenu / dodavanje vrijednosti odgovarajućih polja objektaxmlhttpRequest. Na primjer, možete uvidjeti svoje nekretnine u istinito, prilikom obavljanja upita Crossdomain:$ .Ajax ((URL: a_cross_domain_url, xhrfields: (sa nestancima: istina)));
$. ajax (()
url: a_cross_domain_url,
xhrfields: (
sa nestancima: istina.
} ) ;
Kao što je gore spomenuto, $ .AJAX () najosnovnija metoda, a sve naredne metode su samo njegov omot. Vrlo dio nema potrebe za pozivanjem ove funkcije, jer Postoje alternative višeg nivoa, kao što su i. Oni su lakši u razumijevanju i upotrebi, iako je $ .AJAX () fleksibilnije rješenje.
Najlakši način za upotrebu bit će $ .ajax () poziv bez navođenja parametara:
$. ajax (); |
Rukovatelji događaja
Pretpostavljam, grešku, postavke podataka, uspjeh i potpuna omogućavaju vam instaliranje rukovatelja događaja koji se javljaju u određenim vremenima svakog Ajax upita.
- prepustiti.javlja se odmah prije slanja zahtjeva poslužitelju;
- greška javlja se u slučaju neuspješnog izvršenja upita;
- datafilter. događa se u trenutku pristiglih podataka sa servera. Omogućuje vam rukovanje "RAW" podacima koje je poslao poslužitelj;
- uspeh. javlja se u slučaju uspješnog završetka zahtjeva;
- kompletan.događa se u slučaju bilo kakvog završetka zahtjeva. Uspjeh: Funkcija () (
- "XML" - Rezultat XML dokumenta bit će dostupan u tekstualnom obliku. Možete raditi s njim standardno znači jQuery (kao i sa HTML dokumentom).
- "HTML" - HTML primljeni bit će dostupan u tekstualnom obliku. Ako sadrži skripte u oznakama
Broj nečega na web lokaciji poslužitelja2.ru -
upozorenje ( "Podaci su uspješno poslani.") ;
} ) ;
Pažnja! Postavke su raspravljale gore.Success (), .Irror () i-.pelate () dodani su u JQuery-1.5, pored standardnih odloženih objekata.Done (),. () I.Ten (), sa Što možete instalirati rukovodioce, počevši od jQuery-1.8 Ova tri metoda bit će nepoželjna za upotrebu.
Datatip
Funkcija $ .Aajax () saznat će se o vrsti poslužitelja podataka poslan sa samog poslužitelja (MIME Alati). Pored toga, moguće je lično odrediti (pojasniti) kako tumačiti ove podatke. To se vrši pomoću parametra. datatip.. Moguće vrijednosti ovog parametra: