Ajax zahtjev za drugu domenu. Pravi Ajax zahtjev serveru, koristeći mnoge opcione parametre da ga konfiguriše
Sintaksa i opis:
Povratna vrijednost: Instanca XHR objekta (XMLHttpRequest).
Opcije:
async – (boolean - logička vrijednost) Podrazumevana vrijednost je true, a zatim se svi zahtjevi izvršavaju asinhrono (Zato se koristi Ajax, tako da se operacije izvode paralelno). Ako postavite vrijednost na false, što je krajnje nepoželjno, zahtjev će biti izvršen kao sinhroni (Druge radnje pretraživača mogu biti blokirane dok se sinhroni zahtjev izvršava. I općenito pretraživač može prestati da reaguje i odgovara).
beforeSend(XHR) – (funkcija) Funkcija pozvana prije slanja zahtjeva. Koristi se za postavljanje dodatnih (prilagođenih) zaglavlja ili za obavljanje drugih preliminarnih operacija. Prosljeđuje se instanca XHR objekta (XMLHttpRequest) kao jedini argument. Ako funkcija vrati false, zahtjev se poništava.
cache – (boolean - logička vrijednost) Ako je netačno, tražene stranice se ne keširaju od strane pretraživača. (Pretraživač može poslužiti rezultate iz keša. Na primjer, kada su podaci u odgovoru servera na Ajax zahtjev uvijek novi, keširanje ometa). Podrazumevano je tačno za tekst, xml, html, json tipove podataka. Za tipove podataka "script" i "jsonp" zadana vrijednost je lažna.
complete(XHR, textStatus ) – (funkcija) Funkcija pozvana na kraju zahtjeva, bez obzira na njegov uspjeh ili neuspjeh (i nakon funkcija uspjeha i greške, ako su specificirane). Funkcija uzima dva argumenta: instancu XHR objekta (XMLHttpRequest) i string koji ukazuje na status "uspjeha" ili "greške" (prema statusnom kodu u odgovoru na zahtjev).
contentType – (string) Tip sadržaja u zahtjevu (prilikom slanja podataka na server). Zadana vrijednost je "application/x-www-form-urlencoded" (prikladno za većinu slučajeva i također je zadana prilikom slanja obrazaca).
kontekst – (objekat) Ovaj objekat će postati kontekst (ovo) za sve funkcije povratnog poziva povezane sa ovim Ajax zahtevom (na primer, za funkcije uspeha ili greške).
$.ajax(( url: "test.html",
kontekst: document.body,
uspjeh: funkcija())(
$(this).addClass("gotovo");
}});podaci – (string | objekat) Podaci koji se šalju sa zahtjevom na server. Oni se konvertuju u string upita i podrazumevano kodiraju u formu nalik URL-u (parametar processData je odgovoran za automatsko kodiranje u URL format).
String se dodaje stringu URL upita ako je zahtjev napravljen korištenjem GET metode. Ako se zahtjev izvršava POST metodom, tada se podaci prenose u tijelu zahtjeva.
Ako je dati parametar objekt kao skup parova ime_svojstva/vrijednost, a vrijednost je niz, tada jQuery serijalizira objekt u niz od više vrijednosti s istim ključem.
Na primjer, (Foo: ["bar1", "bar2"])će postati "&Foo=bar1&Foo=bar2" .
dataFilter(podaci, tip) – (funkcija) Funkcija koja se poziva ako je zahtjev uspješan i koristi se za obradu podataka primljenih u odgovoru servera na zahtjev. Vraća podatke obrađene prema parametru "dataType" i prosljeđuje ih funkciji uspjeha. Podaci tipa text i xml se prosljeđuju bez trenutne obrade u funkciju uspjeha kroz svojstvo responseText ili responseHTML objekta XMLHttpRequest. Funkcija dataFilter uzima dva argumenta:
- podaci - primljeni podaci (telo odgovora servera),
- type - tip ovih podataka (parametar "dataType").
dataType – (string) Niz koji definira ime tipa podataka koji se očekuje u odgovoru servera. Ako tip podataka nije naveden, jQuery sam pokušava da ga odredi, na osnovu MIME tipa odgovora servera. Važeće vrijednosti: "xml", "html", "script", "json", "jsonp", "text". (Ovo je neophodno za definiranje metode za obradu podataka primljenih u odgovoru na zahtjev od strane funkcije dataFilter prije nego što se proslijede funkciji povratnog poziva za uspjeh.)
error(XHR, textStatus, errorThrown) – (funkcija) Funkcija koja se poziva kada zahtjev ne uspije (ako statusni kod u odgovoru servera ukazuje na grešku). Funkciji se prosljeđuju tri argumenta:
- XHR - instanca objekta XMLHttpRequest,
- textStatus - niz koji opisuje tip greške koja se dogodila ("timeout", "error", "notmodified" ili "parsererror"),
- errorThrown - neobavezni parametar - objekt izuzetka, ako postoji (vraća ga instanca XHR objekta).
global – (boolean – logička vrijednost) Podrazumevano je na true (omogućava pozivanje globalnih rukovatelja događajima u različitim fazama Ajax zahtjeva, na primjer, funkcije ajaxStart ili ajaxStop). Vrijednost je postavljena na false kako bi se spriječilo njihovo pokretanje. (Koristi se za upravljanje Ajax događajima).
ifModified – (boolean - boolean vrijednost) Ako je postavljeno na true, tada se zahtjev smatra uspješnim samo ako su se podaci u odgovoru promijenili od posljednjeg zahtjeva (jQuery utvrđuje da li se komponenta u predmemoriji pretraživača podudara s onim što se nalazi na serveru provjerom zaglavlje "Last-Modified" sa datumom posljednje izmjene sadržaja, au jQueryju 1.4 je također provjereno zaglavlje "Etag" - string sa verzijom komponente). Zadana vrijednost je false, tj. Uspjeh zahtjeva ne zavisi od zaglavlja ili promjena u odgovoru.
jsonp – (string) Nadjačava naziv funkcije povratnog poziva za jsonp zahtjev za više domena. Zamjenjuje ključnu riječ povratnog poziva u dijelu "callback=?" string zahtjeva GET (pridodan URL-u) ili poslan u tijelu zahtjeva kada se šalje pomoću POST metode. Podrazumevano, jQuery automatski generiše jedinstveno ime za funkciju povratnog poziva.
jsonpCallback – (string) Definira naziv funkcije povratnog poziva za jsonp zahtjev. Ova vrijednost će se koristiti umjesto slučajnog imena koje automatski generira jQuery biblioteka. Korištenje ovog parametra vam omogućava da izbjegnete keširanje GET zahtjeva pretraživača. Preporučljivo je dozvoliti jQueryju da generiše novo ime za svaki novi zahtjev za više domena serveru radi lakšeg upravljanja zahtjevima i odgovorima.
lozinka – (string) Lozinka koja će se koristiti kao odgovor na HTTP zahtjev za autorizaciju na serveru.
processData – (boolean) Podrazumevano je na true i podaci prosleđeni serveru u parametru podataka se konvertuju u niz upita sa tipom sadržaja "Application/X-WWW-forms-urlencoded" i kodirani. Ako ova obrada nije poželjna (kada se drugi podaci trebaju poslati na server, kao što je DOMDocument ili xml objekt), onda se može zaobići postavljanjem ovog parametra na false.
scriptCharset – (string) Prilikom izvođenja GET zahtjeva i zahtjeva koji ciljaju "jsonp" ili "script" podatke, specificira kodiranje znakova zahtjeva (na primjer, "UTF-8" ili "CP1251"). Korisno za razlike između kodiranja na strani klijenta i na strani servera.
uspjeh(podaci, textStatus, XHR ) – (funkcija) Funkcija koja se poziva nakon uspješnog zahtjeva (ako statusni kod u odgovoru na zahtjev ukazuje na uspjeh). Funkciji se prosljeđuju tri argumenta:
- podaci - podaci koje server vraća u odgovoru, prethodno obrađeni funkcijom dataFilter u skladu s vrijednošću parametra dataType,
- textStatus - niz sa statusnim kodom koji ukazuje na uspjeh,
- XHR je instanca objekta XMLHttpRequest.
timeout – (broj) Postavlja maksimalno vrijeme čekanja na odgovor servera u milisekundama. Ima prednost nad postavkom globalnog ograničenja vremenskog ograničenja preko $.AjaxSetup. Ako je ograničenje vremenskog ograničenja prekoračeno, zahtjev se prekida i poziva se greška funkcije za rukovanje greškama (ako je instalirana). Ovo se može koristiti, na primjer, da se određenom zahtjevu dodijeli duže vremensko ograničenje od vremenskog ograničenja postavljenog za sve zahtjeve.
tradicionalno – (boolean) Mora biti postavljeno na true da bi se koristila tradicionalna (pojednostavljena) serijalizacija podataka prilikom slanja (bez rekurzivnog pretvaranja u niz objekata ili nizova sličnih URL-u koji su ugniježđeni u drugim nizovima ili objektima).
type – (string) HTTP metoda za prijenos podataka prilikom izvršavanja zahtjeva. Podrazumevano, podaci se prenose metodom GET. Obično se koriste GET ili POST. Možete koristiti i metode PUT i DELETE, ali to se ne preporučuje zbog činjenice da ih ne podržavaju svi pretraživači.
url – (string) Niz koji sadrži URL na koji se šalje zahtjev. Podrazumevano je ovo trenutna stranica.
korisničko ime – (string) Korisničko ime koje će se koristiti za HTTP autorizaciju na serveru.
xhr – (funkcija) Funkcija koja se poziva za instanciranje objekta XMLHttpRequest. Po defaultu, kreiranje XHR objekta se implementira preko ActiveXObject u IE pretraživaču, ili preko ugrađenog objekta tipa XMLHttpRequest u drugim slučajevima.
opcije – (objekat) Objekt u obliku skupa svojstava (parovi ključ: "vrijednost") koji specificiraju parametre za Ajax zahtjev. Postoji mnogo mogućih parametara (svojstava objekta opcija) i obično se u većini slučajeva ne koriste svi, već samo neki od njih. Osim toga, svi ovi parametri su opcioni, jer vrijednost bilo kojeg od njih može se postaviti na zadanu pomoću metode $.ajaxSetup().
Sljedeća svojstva objekta opcija su dostupna za konfiguriranje Ajax zahtjeva:
2. decembra 2016
Jednom sam napisao članak o tome kako kreirati ugrađene widgete koristeći izvorni javascript i php. I sve bi bilo u redu, ali jedna tačka nije dotaknuta. Takve widgete možete koristiti na vlastitoj web stranici, ali zanimljivije je kreirati ih za resurse trećih strana. Ali u ovom slučaju, pretraživač mora učitati potrebne podatke sa drugog domena - to su Ajax zahtjevi za više domena.
Sa stanovišta front-end programera, upiti na više domena se ne razlikuju od uobičajenih. Ali na pozadini postoji razlika. Zašto s njima nije sve tako jednostavno i kako ih implementirati - o tome pročitajte u članku.
Pokušavam da dobijem podatke sa druge domeneRadi jednostavnosti, pogledajmo zahtjeve za primanje. Recimo da na serveru postoji određena html datoteka koju trebamo učitati pomoću ajax-a sa druge domene..html. Otvorite ga i uvjerite se da je stvarno dostupan - (otvoriće se u novoj kartici). Ovo je običan div sa tekstom "sadržaj iz template.html".
Sada hajde da dobijemo ovaj HTML koristeći Ajax direktno iz konzole pretraživača.
Hajde da se ne zamaramo izvornim javascriptom, već pokrenimo zahtjev koristeći jQuery.get() i ispustimo na konzolu ono što smo dobili kao odgovor od servera.
$..html", funkcija(odgovor) (console.log(response)));
Odmah otvorite alate za programere u svom pretraživaču i na kartici konzole pokrenite ovaj zahtjev.
Videćete ovako nešto
Sve je super, poslali smo zahtjev i dobili odgovor. Čini se, šta može biti jednostavnije? Sada idite na bilo koju drugu lokaciju na kojoj je jQuery omogućen i pokušajte učiniti isto. Samo ne na https stranici, na kraju članka ćete saznati zašto.
Na primjer, provjerio sam zahtjeve na fudbalskoj web stranici bombardir.ru. A u isto vrijeme sam bio zapanjen kakvom sranjem ne pada u konzolu, čak ni na tako prilično poznatim stranicama. Međutim, ovo nije ono o čemu govorimo.
Izvršite zahtjev sa druge domene i vidjet ćete ne tako blaženu sliku na konzoli. Kaže da je nemoguće učitati, nema podataka i generalno je tužno.
Ako otvorite karticu Mreža i tamo pronađete odgovarajući zahtjev, vidjet ćete da nam je server čak vratio 200 OK 
Ali sadržaj datoteke nedostaje. u čemu je kvaka?
Kvaka je u tome što internetska politika ne dozvoljava pretraživačima da povlače podatke iz bilo kojeg izvora. Osim u slučajevima kada su sami ovi resursi zainteresovani za distribuciju konkretnih podataka.
Ovo je naš slučaj. Da biste dali dozvolu za korištenje html datoteke s bilo kojeg mjesta, kada tražite ovu datoteku, morate poslati Access-Control-Allow-Origin http zaglavlje: *
Sada je pitanje kako to učiniti. Ako vi (ili administratori) imate pristup nginx-u, onda bi jedan od načina bio da konfigurirate prosljeđivanje ovog zaglavlja pomoću web servera. Odlazite do administratora sa odgovarajućim zahtjevom ili guglate potrebne konfiguracije za vaš web server.
Ako ovaj pristup nije dostupan, kao na primjer, gotovo svaki hosting provajder ima jeftinu tarifu, onda morate izaći sami. I tu php dolazi u pomoć. Ideja je da stavimo naš html u php fajl, koji će umetnuti zaglavlje i vratiti traženi sadržaj.
Ispostaviće se ovako, kreirajte datoteku template.php i napišite php komandu u prvom redu
Header("Access-Control-Allow-Origin: *");
Sadržaj sa template.php
Odnosno, sadržaj template.php će biti ovakav, ne zaboravite na PHP pitanja i zagrade 
Datoteka je kreirana na webdevkin-u i nalazi se (otvara se u novoj kartici). Pokušajmo sada to zatražiti sa druge domene i vidjeti šta će se dogoditi
$..php", funkcija(odgovor) (console.log(response)));
Kao što vidite, sve radi kako treba - datoteka je učitana! 
Pogledajmo karticu Mreža.
Imajte na umu da se zaglavlje Access-Control-Allow-Origin koje nas zanima pojavilo u bloku zaglavlja odgovora: * 
Općenito, članak je gotov. Ostaje samo da saberem svoje misli i dodam još malo informacija.
Sumiranje i sumiranje- 1. Ne možete jednostavno zatražiti bilo koji resurs sa druge domene pomoću Ajaxa
- 2. Pošaljite zaglavlje Access-Control-Allow-Origin za sve resurse kojima treba pristupiti s bilo kojeg mjesta
- 3. Uradite to koristeći web server ili php
- 4. U php-u, ovo zaglavlje se šalje sa zaglavljem komande ("Access-Control-Allow-Origin: *")
- 5. Access-Control-Allow-Origin: * - dozvoli pristup svim domenima, Access-Control-Allow-Origin: site.ru - samo domenu site.ru
- 6. Access-Control-Allow-Origin se šalje na samom početku php datoteke, čak i prije nego što se izlaze drugi podaci (kao i bilo koja druga http zaglavlja)
- 7. “Resource” nije samo datoteka s html markupom, već i bilo koji url na koji ide ajax zahtjev, na primjer, primanje json podataka ili zahtjev za postavljanjem za dodavanje reda u tablicu baze podataka
I poslednja stvar, izvadio sam je posebno. Nisam uzalud tražio da izvršim zahtjeve sa http stranice. Sa https neće biti moguće učitavanje podataka sa http-a iz drugog razloga - miješanog sadržaja. Ali stranica je još uvijek http stranica (ažurirana: više nije dostupna, stranica je premještena na https)
Ovo ćete vidjeti u konzoli ako pokušate izvršiti isti zahtjev sa bilo koje https stranice. Stoga, ako ćete raditi ugrađene widgete ili nešto slično, svakako morate instalirati SSL certifikat na svoju stranicu.
Ponekad morate poslati Ajax zahtjev na drugu domenu kako biste dinamički učitali podatke odatle. Međutim, ajax to ne dozvoljava iz sigurnosnih razloga. Ali u ovom članku ću pokazati kako se ovo ograničenje može zaobići.
Osnova je da iako vam ajax ne dozvoljava da pošaljete zahtjev na drugi domen, PHP vam dozvoljava da pošaljete bilo šta i bilo gdje. Dakle, algoritam je sljedeći:
Evo jednostavnog algoritma. Hajde da to brzo implementiramo. Dakle, odmah ajax:
/* Ova funkcija kreira XMLHTTP objekat za više pregledača */
funkcija getXmlHttp() (
var xmlhttp;
probaj (
xmlhttp = novi ActiveXObject("Msxml2.XMLHTTP");
) uhvatiti (e) (
probaj (
xmlhttp = novi ActiveXObject("Microsoft.XMLHTTP");
) uhvatiti (E) (
xmlhttp = lažno;
}
}
if (!xmlhttp && typeof XMLHttpRequest!="undefined") (
xmlhttp = novi XMLHttpRequest();
}
return xmlhttp;
}
funkcija send() (
var xmlhttp = getXmlHttp(); // Kreirajte XMLHTTP objekt
xmlhttp.open("POST", "test.php", true); // Otvaranje asinhrone veze
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // Pošalji kodiranje
xmlhttp.send("site=" + encodeURIComponent("http://ya.ru/?a=5")); // Pošaljite POST zahtjev
xmlhttp.onreadystatechange = function() ( // Čeka se odgovor servera
if (xmlhttp.readyState == 4) ( // Odgovor je stigao
if(xmlhttp.status == 200) ( // Server je vratio kod 200 (što je dobro)
document.getElementById("yandex").innerHTML = xmlhttp.responseText; // Ispis odgovora servera
}
}
};
}
A sada test.php fajl, koji je odgovoran za slanje zahtjeva na drugu domenu:
To je to, sada kada kliknete na dugme "Pošalji", otvoriće se stranica "http://ya.ru/?a=5". Kao što vidite, slanje Ajax zahtjeva na drugu domenu nije teško.
HTTP metoda za prijenos podataka prilikom izvršavanja zahtjeva. Obično se koriste GET ili POST. Možete koristiti i metode PUT i DELETE, ali to se ne preporučuje zbog činjenice da ih ne podržavaju svi pretraživači.
$.ajax(( //... tip: "POST", //... ));
$.ajax(( //... url: "/path/to/script", //... ));
Podaci se šalju sa zahtjevom na server. Oni se konvertuju u string upita i, prema zadanim postavkama, nužno su kodirani u obliku sličnom URL-u (parametar je odgovoran za automatsko kodiranje u URL format).
String se dodaje stringu URL upita ako je zahtjev napravljen korištenjem GET metode. Ako se zahtjev izvršava POST metodom, tada se podaci prenose u tijelu zahtjeva.
$.ajax(( //... podaci: "value1=1&value2=2&value3=3", //... ));
Ako je dati parametar objekt kao skup parova ime_svojstva/vrijednost, a vrijednost je niz, tada jQuery serijalizira objekt u niz od više vrijednosti s istim ključem.
(Foo: ["bar1", "bar2"])
&Foo=bar1&Foo=bar2
Oznaka za izvršavanje asinhronih zahtjeva.
$.ajax(( //... async: false, //... ));
Oznaka keširanja odgovora.
Podrazumevano je tačno za tekst, xml, html, json tipove podataka. Za tipove podataka script i jsonp zadana vrijednost je false.
Ako je postavljeno na true , zahtjev se smatra uspješnim samo ako su se podaci u odgovoru promijenili od posljednjeg zahtjeva (jQuery određuje da li se komponenta u predmemoriji pretraživača poklapa sa onim što je na serveru tako što provjerava zaglavlje Last-Modified s datumom posljednje izmjene sadržaja, a u jQueryju 1.4 se također provjerava Etag zaglavlje - string sa verzijom komponente). Zadana vrijednost je false, tj. Uspjeh zahtjeva ne zavisi od zaglavlja ili promjena u odgovoru.
Korisničko ime koje će se koristiti za HTTP autorizaciju na serveru.
Podaci proslijeđeni serveru u parametru se pretvaraju u niz upita s tipom sadržaja Application/X-WWW-forms-urlencoded i encoded. Ako ova obrada nije poželjna (kada se drugi podaci trebaju poslati na server, kao što je DOMDocument ili xml objekt), onda se može zaobići postavljanjem ovog parametra na false .
Prilikom izvođenja GET zahtjeva i zahtjeva koji ciljaju jsonp ili skript podatke, specificira kodiranje znakova zahtjeva (na primjer, UTF-8 ili CP1251). Korisno za razlike između kodiranja na strani klijenta i na strani servera.
Postavlja maksimalno vrijeme čekanja na odgovor servera u milisekundama. Ima prednost nad postavkom globalnog ograničenja vremenskog ograničenja preko $.AjaxSetup. Ako je ograničenje vremenskog ograničenja prekoračeno, zahtjev se prekida i poziva se greška funkcije za rukovanje greškama (ako je instalirana).
| greška | XHR, textStatus, errorThrown | Aktivira se kada zahtjev ne uspije. Funkciji se prosljeđuju tri argumenta: textStatus - niz koji opisuje vrstu greške koja se dogodila (timeout, error, notmodified ili parsererror) errorThrown - opcionalni parametar, objekt izuzetka, ako postoji (vraća instanca XHR objekta) $.ajax(( //... greška: function() ( alert("Greška!"), //... )); |
| uspjeh | podaci, status teksta, XHR | Aktivira se kada je zahtjev uspješan. Funkciji se prosljeđuju tri argumenta: podaci - podaci koje server vraća u odgovoru, prethodno obrađeni funkcijom dataFilter u skladu s vrijednosti parametra textStatus - niz sa statusnim kodom koji ukazuje na uspjeh XHR - instanca objekta XMLHttpRequest $.ajax(( //... uspjeh: function() ( alert("Uspjeh!"), //... )); |
| beforeSend | XHR | Pali prije slanja zahtjeva. Prosljeđuje se instanca XHR objekta (XMLHttpRequest) kao jedini argument. Ako funkcija vrati false, tada se zahtjev otkazuje. $.ajax(( //... beforeSend: function() ( alert("Prije slanja je proradio!"); //... )); |
| kompletan | XHR, status teksta | Aktivira se na kraju zahtjeva, bez obzira na njegov uspjeh ili neuspjeh (i nakon funkcija i, ako su specificirane). Funkcija uzima dva argumenta: instancu XHR objekta (XMLHttpRequest) i niz koji ukazuje na uspjeh ili status greške (prema statusnom kodu u odgovoru na zahtjev) |
Detaljan primjer:
funkcija testAjax(id, pid) ( $.ajax(( tip: "POST", podaci: "id=" + id + "&pid=" + pid, url: "/path/to/script/test.php", uspjeh: function(data) ( var obj = $.parseJSON(data); //Pretvori json odgovora servera if (obj.error == 0) ( alert("Zahtjev je bio uspješan"); ) else ( upozorenje (obj.error ) ) ));
Zahtjev s greškom
PHP skripta (test.php):
Još jedan primjer s drugačijim izlazom odgovora:
funkcija testAjax(id, pid) ( $.ajax(( tip: "POST", podaci: "id=" + id + "&pid=" + pid, url: "/path/to/script/test.php", uspjeh: funkcija(podaci) ( $("#content").html(data); ) ) return true;
Zahtjev s greškom
odgovor:
PHP skripta (test.php):
Više informacija možete pronaći na: http://api.jquery.com/jquery.ajax/
