Javascript XMLHttpRequest, povijest stvaranja, standardi, primjeri

XMLHttpRequest (XHR) je API u obliku objekta koji pruža okruženje preglednika javascripta. Konkretno, traženje podataka iz XHR-a za trajno mijenjanje preuzete web stranice osnovni je koncept Ajax dizajna. Unatoč imenu, XHR se može koristiti s protokolima koji nisu HTTP, a podaci mogu biti u obliku ne samo XML-a, već i JSON-a, HTML-a ili običnog teksta. WHATWG podržava XHR standard. Trenutni rad u W3C za stvaranje stabilne specifikacije temelji se na snimkama WHATWG standarda.

[thumb] http://hi-news.pp.ua/uploads/posts/2018-12/javascript-xmlhttprequest-storya-stvorennya-standarti-prikladi_261.jpeg
Izvorno, javascript je bio XMLHttpRequest kao objekt programa ActiveX, njegova je uporaba bila ograničena na intranet temeljene na Microsoftu i nije bila prikladna za druge web-lokacije. Mozilla tim je bio zainteresiran za implementaciju JScript ekvivalenta i distribuirao ga svim preglednicima, uključujući i one koji rade na Gecko /KHTML i Opera. Čak ni IE7 više ne zahtijeva instalaciju ActiveX-a za korištenje s XHR-om.


Povijest XMLHttpRequest

Koncept javascript XMLHttpRequest je kreiran od strane stručnjaka za Outlook Web Access za korištenje na poslužitelju Microsoft Exchange 2000. Verzije 5 i 6 nisu definirale XHR identifikator objekta u njihovim skriptnim jezicima jer Sam ID zahtjeva nije bio standardni u vrijeme objavljivanja. Microsoft je dodao ID objekta na svoje skriptne jezike u programu Internet Explorer 7.0, objavljenom u listopadu 2006. godine. U projektu preglednika, razvijeno je i implementirano sučelje javascript XMLHttpRequest u mehanizmu Gecko rasporeda. Modeliran je tako da bude što je moguće bliže sučelju Microsoftovog zahtjeva. Mozillastvorio ljusku za korištenje ovog sučelja kroz objekt JS, koji je dobio ime XMLHttpRequest. Objekt je već stavljen na raspolaganje Gecko verziji 0.6 izdanoj 6. prosinca 2000., ali nije bio potpuno funkcionalan do 5. lipnja 2002., izdana je verzija Gecko 1.0, nakon čega je ID objekta postao de facto standard ostali glavni web sustavi:


  • Safari 1.2 objavljen u veljači 2004.
  • Opera 8.0 je izdana u travnju 2005.
  • iCab 3.0b352 objavljen u rujnu 2005.
  • S pojavom knjiľnica JavaScript-a, kao što je jQuery, programeri mogu nazvati funkciju javascript XMLHttpRequest bez kodiranja izravno u API. Konzorcij World Wide Web objavio je nacrt specifikacije za XMLHttpRequest 5. travnja 2006. kako bi dokumentirao minimalni skup kompatibilnih značajki na temelju postojećih implementacija, omogućujući programerima da ih koriste bez koda specifičnog za platformu. 25. veljače 2008. W3C je također objavio još jednu specifikaciju radnog projekta - XMLHttpRequest Level 2. Razina 2 sastoji se od naprednih funkcionalnosti, uključujući podršku za upite i obradu bajtova.

    Standardi identifikatora objekta

    Budući da je W3C standard za XMLHttpRequest JavaScript post objekt prethodni, korisnički agenti možda neće moći promatrati sve značajke definicije, a bilo koja od sljedećih akcija može se modificirati. Pri pisanju scenarija s objektom XMLHttpRequest za nekoliko korisničkih agenata treba voditi računa o ekstremnoj pažnji.
    HTTP i HTTPS zahtjevi XMLHttpRequest objekti se inicijaliziraju otvorenimnačin. Poziva se prije slanja stvarnog zahtjeva za potvrdu. Ova metoda ne jamči da URL postoji i da su informacije točne. Može prihvatiti do pet parametara, ali samo dva zahtijevaju inicijalizaciju zahtjeva. Prvi parametar je tekstualni niz. Predstavljamo metode upita koje mora podržavati odgovarajući korisnički agent, specifičan W3C projekt za XMLHttpRequest javascript. Primjeri:
  • GET podržava Mozilla Internet Explorer 7.
  • POST podržava IE7 Mozilla.
  • HEAD podržava IE7.
  • Metode zahtjeva nisu ograničene na gore navedene. Projekt W3C kaže da ih preglednik može podržati po vlastitom nahođenju. Drugi parametar je drugi tekstovni niz koji navodi URL HTTP zahtjeva. Treći parametar je logička vrijednost koja označava da li će zahtjev biti asinkroni. Projekt W3C ne zahtijeva to. Njegova zadana vrijednost treba smatrati istinitom pomoću odgovarajućeg sučelja agenta W3C. Asinkroni zahtjev "istine" neće čekati da poslužitelj odgovori prije nastavka izvršavanja trenutne skripte. Umjesto toga, on će nazvati slušatelja događaja onreadystatechange na XMLHttpRequest javascript postu u različitim fazama upita. Četvrti i peti parametar su korisničko ime i lozinka. Ti se parametri mogu osigurati za provjeru autentičnosti i autorizaciju, ako to zahtijeva poslužitelj.

    Metoda SetRequestHeader

    Nakon uspješne inicijalizacije, možete pozvati metodu zaglavlja XMLHttpRequest open javascript objekta za slanje HTTP zaglavlja na upit. Prvi parametar metode je naziv zaglavlja. Drugi parametar je vrijednost niza. Ova metoda bi trebalakoji će se koristiti za svako zaglavlje koje se šalje sa zahtjevom.
    Skriveni "kamen" u standardu XMLHttpRequest, koji pojednostavljuje proces uzorkovanja i analize JSON podataka putem Ajaxa, je JSON & amp; JSON-P. Uobičajeni način pružanja poslužiteljskih podataka za preglednike tako da se mogu koristiti na javascriptu klijenta je formatiranje podataka kao što je JSON i pristup kroz vlastiti URL. Na primjer: XMLHttpRequest javascript Json Da biste poslali HTTP zahtjev, morate pozvati metodu slanja XMLHttpRequest. Firefox 3.0.x i prethodne verzije izdaju iznimku ako se šalje poziv bez argumenata. Ako je ova opcija predmet DOM dokumenta, korisnički agent mora osigurati da se pretvori u dobro oblikovan XML. Ako zaglavlje Content-Type još nije dodano putem SetRequestHeader, potrebno ga je automatski dodati odgovarajući agent s sljedećom akcijom: "application /xml; charset = charset ", gdje je znak za kodiranje koji se koristi za dokument. Ako je korisnički agent konfiguriran da koristi proxy, objekt XMLHttpRequest će promijeniti zahtjev za prosljeđivanje konfiguriranih zaglavlja u Proxy-Authorization.

    Promjene u XHR-u

    Ako je metoda uspješno pokrenuta, svojstvima XMLHttpRequest objekta dodijelit će se vrijednost 1 (Open). Nakon što su primljena zaglavlja HTTP odgovora, vrijednost 2 (HEADERS_RECEIVED) dodijeljena je svojstvu readyState objekta XHR. Nakon učitavanja sadržaja HTTP odgovora, readyState svojstvo XHR objekta mora biti postavljeno na 3 (Učitavanje). Kada je HTTP odgovor dovršen, svojstvo readyState objekta XHR mora biti postavljeno na 4 (Gotovo). Slušatelj će bitireagiraju na promjene stanja koje nastaju nakon što se ona odredi. Za otkrivanje uvjeta 1 i 2, slušatelj mora biti definiran prije poziva. Otvorena metoda mora se primijeniti prije slanja poziva. Ova metoda prekida zahtjev ako objekt readyState XHR objekta još nije postao 4 (Gotovo). Metoda abortiranja osigurava da pozivni rukovatelj neće biti pozvan tijekom asinkronog upita. Neke AJAX knjižnice koriste prekide da bi poništile moguće duple ili oštećene upite.

    Upiti iz više domena

    U povijesti ranog razvoja Interneta, otkriveno je da je moguće razbiti sigurnost korisnika koji koriste javascript za razmjenu informacija s jedne web-lokacije na drugu, manje autoritativno. Stoga, svi moderni preglednici implementiraju istu politiku porijekla koja sprječava mnoge napade, kao što je skriptiranje na više stranica.
    javascript XMLHttpRequest onload podaci skloni su ovoj sigurnosnoj politici, ali ponekad web programeri žele namjerno zaobići ograničenja. Razlog tome je legitimna upotreba poddomena, budući da izrada XHR-a s stranice koju je generirao foo.example.com za dobivanje informacija iz bar.example.com iz nje obično ne uspije. Postoje različite alternative za zaobilaženje ove sigurnosne značajke, uključujući korištenje JSONP-a, dijeljenje resursa (CORS) ili alternative plug-inovima kao što su Flash i Silverlight.

    Aplikacije preglednika

    Inicijalizacija objekta XHR zapravo je prilično jednostavna u većini preglednika, ali za podršku MSIE 5 i 6, potrebno je poslužiti niz različitih metoda, tako da proces izgleda tako komplicirano. U osnovi,skripta pokušava dosljedno koristiti tri različite metode dok ne uspije ili ne završi.
    [thumb] http://hi-news.pp.ua/uploads/posts/2018-12/javascript-xmlhttprequest-storya-stvorennya-standarti-prikladi_412.jpeg
    Funkcija loadXMLDoc traje dva postavke. Prva je lokacija skripte na strani poslužitelja, a druga je varijabli koje treba proslijediti ovoj skripti. Ovo je kratak primjer kako možete nazvati skriptu. Koristi skriptu koja se nalazi u /scripts/myscript.php s dva parametra GET (q i target). Preporučuje se kodiranje vrijednosti pomoću encodeURIComponenta.

    POST umjesto GET

    Za prijenos na poslužitelj podataka više od 512 bajta, morate koristiti novi XMLHttpRequest javascript 34 javascript xml umjesto GET. Ako želite primati POST podatke, morate promijeniti vrstu MIME zahtjeva pomoću zaglavlja Content-Type i proslijediti varijable slati poziv. Završni dio funkcije loadXMLDoc mijenja se kao što je prikazano na slici ispod.
    [thumb] http://hi-news.pp.ua/uploads/posts/2018-12/javascript-xmlhttprequest-storya-stvorennya-standarti-prikladi_143.jpeg
    U većini slučajeva, treći parametar otvorene naredbe može biti zaustavljen. Vrijednost true označava da bi poziv trebao biti asinhroni - skripta se nastavlja bez čekanja XML odgovora koji je već zadan. Prijenos vrijednosti false dovodi do zaustavljanja skripte prije primitka odgovora. Skripta na koju upućuje URL bit će skripta na strani poslužitelja (PHP, Perl ili slično). Vraća dobro oblikovan XML dokument. Kako bi se izbjeglo upozorenje o sigurnosti preglednika, ona mora biti smještena u istoj domeni, što uzrokuje pristup stranici.putem HTTP-a ili HTTPS-a.

    Prijenos iz javascripta u poslužiteljsku skriptu

    Funkcija koja obrađuje odgovor (na primjer, processReqChange) mora biti u stanju dekomprimirati i obraditi primljeni XML. Ovaj dijagram pokazuje kako se podaci prenose s javascripta na poslužitelj skriptu i natrag. Princip je vrlo jednostavan. Vraćeni XML dokument će sadržavati jednu ili više naredbi koje se izvršavaju sekvencijalno - za generiranje upozorenja, za promjenu vrijednosti obrasca ili za upravljanje DOM-om. To se postiže funkcijom processReqChange.

    Dostupne naredbe

    U ukupno sedam različitih naredbi koje biblioteka objekta može pozvati:
  • upozorenje (poruka) - prikaz upozorenja o JavaScriptu.
  • setvalue (target, value) - postavite vrijednost polja obrasca s identifikatorom cilja.
  • setdefault (target) - resetira vrijednost polja obrasca.
  • fokus (cilj) - postavite fokus na polje obrasca.
  • setcontent (cilj, sadržaj) - postavite unutarnji HTML element HTML-a.
  • setstyle (target, value value) - postavi stil HTML elementa.
  • setproperty (target, value value) - postavi svojstvo HTML elementa.
  • U svakom slučaju, cilj je identifikator koji se odnosi na element HTML stranice. Ostale vrijednosti su tekst ili HTML za dodavanje dodatnih parametara u funkciju processReqChange.

    Generiranje XML odgovora pomoću PHP-a

    Ovdje opisane značajke namijenjene su programerima PHP-a koji ne žele previše znati o javascriptu, jer nakon slanja prvog zahtjeva nije potreban daljnji JScript. XML datoteka (generira upozorenje, na primjer, za slučaj kada kliknete na vezu u nastavku stvara prozorupozorenje JS s tekstom "hello world!") važan je prvi korak u bilo kojem programskom jeziku.
    [thumb] http://hi-news.pp.ua/uploads/posts/2018-12/javascript-xmlhttprequest-storya-stvorennya-standarti-prikladi_604.jpeg
    Sljedeći odgovor XML download tekst u stavci na stranici. U tom slučaju, izlaz s identifikatorom 2 će biti prikazan u div. Umjesto DIV-a, možete jednostavno postaviti sadržaj zaglavlja, odlomka ili ćelije tablice: example2 hello world.
    [thumb] http://hi-news.pp.ua/uploads/posts/2018-12/javascript-xmlhttprequest-storya-stvorennya-standarti-prikladi_855.jpeg
    Kao što smo već spomenuli, možete umetnuti HTML, a ne tekst i vratiti dinamičke, a ne statične podatke. Sljedeći XML zahtjev generira se pomoću PHP-a za umetanje trenutnog datuma i vremena.
    [thumb] http://hi-news.pp.ua/uploads/posts/2018-12/javascript-xmlhttprequest-storya-stvorennya-standarti-prikladi_676.jpeg
    Internet Explorer bit će spremljen u predmemoriju Odgovorite na XML i koristite ga za buduće upite. To znači da se izlaz nikada neće promijeniti. Drugi preglednici svaki put uzrokuju novi zahtjev. Svi DOM preglednici prihvaćaju pozadinsku boju jer ime stila ima boju pozadine koja je "ispravnija" i radi samo u nekim od njih. Vrijednosti se mogu generirati "u letu" pomoću PHP-a ili drugog poslužitelja. Prva naredba postavlja svojstvo pozadinske boje u hello world polju na žuto (# ff0), a drugo na slučajno (crveno, zeleno ili plavo). Timovi se uglavnom odnose na formiranje polja - postavljanje /resetiranje vrijednosti u polju i fokus. Oni su korisni prilikom provjere obrasca na strani poslužitelja u stvarnom vremenu, kada je potrebno pregledati podatke bez ponovnog pokretanja.trenutačnu stranicu.

    Stvaranje XML-a pomoću javascripta

    Postoji nekoliko različitih načina za pozivanje funkcije loadXMLDoc. Na primjer, referenca na obrazac uzima se kao prvi parametar, a zatim dvije dodatne varijable. Uspješan poziv loadXMLDoc vraća vrijednost "da". onsubmit rukovatelj će vratiti "laž". Otkazivanjem zadane radnje prikazat će se događaj koji bi inače uzrokovao obrazac. Kasnije izvršenje se vrši pomoću Ajaxa, pa preglednik ne mora učitati novu stranicu. Neuspješan poziv loadXMLDoc vraća vrijednost "laž". onsubmit rukovatelj će vratiti "true", što će rezultirati prikazom obrasca u normalnom načinu rada. Daljnje izvršavanje se obavlja pomoću nonAjaxTarget.html.
    [thumb] http://hi-news.pp.ua/uploads/posts/2018-12/javascript-xmlhttprequest-storya-stvorennya-standarti-prikladi_567.jpeg
    vrijednosti odgovora kolačića javascript xmlhttprequest. Neki će preglednici predmemorirati GET zahtjeve izrađene pomoću XHR-a tako da nakon prvog poziva sljedeće iz iste skripte samo je ponovno pokrenulo prvi odgovor. Da biste to zaobišli, zahtjevu morate dodati slučajni niz ili privremenu oznaku, kao što je prikazano na slici ispod:
    [thumb] http://hi-news.pp.ua/uploads/posts/2018-12/javascript-xmlhttprequest- storya-stvorennya-standarti-prikladi_288.jpeg
    Ako skripta uvijek vraća isti odgovor za dane parametre, onda nema potrebe brinuti o tome, jer se za ubrzavanje programa koristi caching. Sumirajući kako je lako raditi s Ajaxom koristeći ovu strukturu, potrebno je samo dovršiti sljedećeRadnje:
  • Postavite skriptu na strani poslužitelja da prihvati GET ili POST ili COOKIE parametre i vratite valjanu XML datoteku.
  • Na stranici navedite JS datoteku xmlhttp.js.
  • Upotrijebite javascript za poziv.
  • Ajax inverzni pozivi mogu se napraviti stvaranjem instance XHR objekta u JScript klijentu. javascript XMLHttpRequest get može se koristiti za izravno pozivanje poslužiteljskih objekata, kao što su stranice i web-usluge. Pohranit će ili rotirati podatke. Ajax je izvorno bio akronim za asinkrone JS i XML. "Asinkroni" znači da se nekoliko događaja događa apsolutno neovisno jedan o drugom. Čim klijent učini Ajax povratni poziv poslužitelju, on ne mora čekati odgovor, budući da može nastaviti koristiti web aplikaciju tijekom obrade zahtjeva. Nakon toga poslužitelj će odgovoriti klijentu i on će ga obraditi prema potrebi.

    Povezane publikacije