Javascript XMLHttpRequest, zgodovina ustvarjanja, standardi, primeri

XMLHttpRequest (XHR) je API v obliki predmeta, ki ga nudi okolje brskalnika javascript. Zlasti iskanje podatkov iz XHR za trajno spreminjanje prenesene spletne strani je osnovni koncept oblikovanja Ajaxa. Kljub imenu se lahko XHR uporablja z drugimi protokoli razen HTTP, podatki pa so lahko v obliki ne samo XML, ampak tudi JSON, HTML ali golo besedilo. WHATWG podpira standard XHR. Trenutno delo v W3C za ustvarjanje stabilne specifikacije temelji na posnetkih standarda WHATWG.

[thumb] http://hi-news.pp.ua/uploads/posts/2018-12/javascript-xmlhttprequest-storya-stvorennya-standarti-prikladi_261.jpeg
Za objekt ActiveX je bila njegova uporaba omejena na intranet, ki temelji na Microsoftu, in ni bila primerna za druga spletna mesta. Ekipa Mozilla je bila zainteresirana za implementacijo ekvivalenta JScripta in ga razdelila vsem brskalnikom, vključno s tistimi, ki delujejo na Gecko /KHTML in Opera. Tudi IE7 ne zahteva več namestitve ActiveX za uporabo z XHR.


Zgodovina XMLHttpRequest

Koncept javascript XMLHttpRequest so ustvarili strokovnjaki za Outlook Web Access za uporabo na strežniku Microsoft Exchange 2000. Različice 5 in 6 niso opredelile identifikatorja objekta XHR v njihovih skriptnih jezikih, ker Sam ID zahtevka v času izdaje ni bil standarden. Microsoft je dodal ID objekta k svojim skriptnim jezikom v Internet Explorerju 7.0, izdanem oktobra 2006. V projektu brskalnika je bil razvit in implementiran vmesnik javascript XMLHttpRequest v mehanizmu postavitve Gecko. Modeliran je bil tako, da je čim bližje vmesniku Microsoftovih zahtev. Mozillaje ustvaril ukazno lupino za uporabo tega vmesnika prek objekta JS, ki se je imenoval XMLHttpRequest. Objekt je bil že dan na voljo različici 0.6 Gecko, ki je bila izdana 6. decembra 2000, vendar ni bila popolnoma funkcionalna do 5. junija 2002, izdana je bila verzija Gecko 1.0, po kateri je ID objekta postal de facto standard drugi pomembnejši spletni sistemi:


  • Safari 1.2, izdan februarja 2004.
  • Opera 8.0 je bila izdana aprila 2005.
  • iCab 3.0b352, izdan septembra 2005.
  • S pojavom navzkrižnih brskalnikov JavaScript knjižnic, kot so jQuery, lahko razvijalci kličejo funkcijo javascript XMLHttpRequest brez kodiranja neposredno v API. Konzorcij World Wide Web je 5. aprila 2006 objavil osnutek specifikacije za XMLHttpRequest, da bi dokumentiral minimalni nabor združljivih funkcij, ki temeljijo na obstoječih izvedbah, kar razvijalcem omogoča, da jih uporabljajo brez kode, ki je značilna za platformo. 25. februarja 2008 je W3C objavil še drugo specifikacijo delovnega projekta - XMLHttpRequest Level 2. Level 2 je sestavljen iz naprednih funkcionalnosti, vključno s podporo za poizvedbe in obdelavo bajtov.

    Standardi za identifikacijo objekta

    Ker je standard W3C za JavaScript post predmet JavaScriptHttpRequest prejšnji, uporabniški agenti morda ne bodo mogli opazovati vseh definicijskih funkcij in lahko se spremeni katero koli od naslednjih dejanj. Pri pisanju scenarija z objektom XMLHttpRequest za več uporabniških agentov je treba upoštevati izjemno previdnost.
    Zahteve HTTP in HTTPS XMLHttpRequest se inicializirajo z odprtimpoti. Kliče se pred pošiljanjem dejanske zahteve za preverjanje. Ta metoda ne zagotavlja, da URL obstaja in da so informacije pravilne. Sprejme lahko do pet parametrov, le dve pa zahtevata inicializacijo zahteve. Prvi parameter je besedilni niz. Predstavljamo metode poizvedb, ki jih mora podpirati ustrezni uporabniški agent, specifični W3C projekt za XMLHttpRequest javascript. Primeri:
  • Mozilla Internet Explorer 7 podpira GET.
  • POST podpira IE7 Mozilla.
  • HEAD je podprt z IE7.
  • Metode zahtevkov niso omejene na zgoraj navedene. Projekt W3C pravi, da jih brskalnik lahko podpira po lastni presoji. Drugi parameter je drug besedilni niz, ki določa URL zahteve za HTTP. Tretji parameter je logična vrednost, ki označuje, ali bo zahteva asinhrona. Projekt W3C ne zahteva tega. Njegovo privzeto vrednost je treba šteti za resnično z ustreznim vmesnikom agenta W3C. Zahteva za asinhrono "resnico" ne bo čakala, da se bo strežnik odzval, preden nadaljuje izvajanje trenutnega skripta. Namesto tega bo poklical poslušalca dogodkov onreadystatechange na objavo XMLHttpRequest javascript na različnih stopnjah poizvedbe. Četrti in peti parameter sta uporabniško ime in geslo. Ti parametri se lahko zagotovijo za overjanje in avtorizacijo, če to zahteva strežnik.

    Metoda SetRequestHeader

    Po uspešni inicializaciji lahko pokličete metodo Header odprtega objekta javascriptHttpRequest, da pošljete poizvedbo HTTP glave. Prvi parameter metode je ime glave. Drugi parameter je vrednost niza. Ta metoda bi moralaza vsako glavo, ki je poslana z zahtevo.
    Skriti "kamen" v standardu XMLHttpRequest, ki poenostavlja postopek vzorčenja in analiziranja podatkov JSON prek Ajaxa, je JSON & amp; JSON-P Običajen način, kako ponuditi strežniške podatke za brskalnike, tako da jih lahko uporabimo v javascriptu za odjemalce, je, da oblikuje podatke, kot je JSON, in do njih dostopa prek svojega URL-ja. Na primer: XMLHttpRequest javascript Json Če želite poslati zahtevo HTTP, morate poklicati metodo za pošiljanje XMLHttpRequest. Firefox 3.0.x in prejšnje različice izdajo izjemo, če je pošiljanje priklicano brez argumentov. Če je ta možnost predmet dokumenta DOM, mora biti uporabniški agent prepričan, da je pretvorjen v dobro oblikovan XML. Če glava Content-Type še ni bila dodana prek SetRequestHeader, jo mora ustrezni agent samodejno dodati uporabniku z naslednjim dejanjem: "application /xml; charset = charset ", kjer je nabor znakov kodiranje, ki se uporablja za dokument. Če je uporabniški agent konfiguriran za uporabo proxyja, bo objekt XMLHttpRequest spremenil zahtevo za posredovanje konfiguriranih glav na pooblastilo Proxy.

    Spremembe v XHR

    Če je bila metoda uspešno sprožena, se lastnost objekta XMLHttpRequest dodeli vrednosti 1 (Odpri). Ko so sprejeti naslovi HTTP-odgovorov, je lastnost readyState predmeta XHR dodeljena vrednosti 2 (HEADERS_RECEIVED). Po nalaganju vsebine odgovora HTTP mora biti lastnost readyState predmeta XHR nastavljena na 3 (Nalaganje). Ko je odgovor HTTP zaključen, mora biti lastnost readyState objekta XHR nastavljena na 4 (Končano). Poslušalec bose odzovejo na spremembe stanja, ki se pojavijo po določitvi. Za zaznavanje pogojev 1 in 2 mora biti poslušalec definiran pred klicanjem odprtega. Odprta metoda mora biti uporabljena pred pošiljanjem klica. Ta metoda prekine zahtevo, če objekt readyState objekta XHR še ni postal 4 (Končano). Metoda abortiranja zagotavlja, da v asinhroni poizvedbi ne bo klican upravljalnik povratnega klica. Nekatere knjižnice AJAX uporabljajo prekinitve, da prekličejo morebitne podvojene ali poškodovane poizvedbe.

    Poizvedbe med domenami

    V zgodovini zgodnjega razvoja interneta je bilo ugotovljeno, da je mogoče prekiniti varnost uporabnikov, ki uporabljajo javascript, za izmenjavo informacij z ene spletne strani na drugo, manj verodostojno. Tako vsi sodobni brskalniki izvajajo eno in isto politiko izvora, ki preprečuje številne napade, kot je navzkrižno skriptiranje.
    javascript XMLHttpRequest onload podatki so nagnjeni k tej varnostni politiki, vendar včasih spletni razvijalci želijo namerno obiti omejitve. Razlog za to je legitimna uporaba poddomen, saj ustvarjanje XHR-ja s strani, ki jo je ustvaril foo.example.com za pridobitev informacij iz naslova bar.example.com, ponavadi ne uspe. Obstajajo različne alternative za izogibanje tej varnostni funkciji, vključno z uporabo JSONP, skupne rabe virov (CORS) ali alternativ za vtičnike, kot sta Flash in Silverlight.

    Aplikacije brskalnika

    Inicializacija predmeta XHR je v večini brskalnikov precej preprosta, vendar je za podporo MSIE 5 in 6 potrebno uporabiti več različnih metod, zato je proces tako zapleten. V bistvuskript skuša dosledno uporabljati tri različne metode, dokler ne uspe ali se ne konča.
    [thumb] http://hi-news.pp.ua/uploads/posts/2018-12/javascript-xmlhttprequest-storya-stvorennya-standarti-prikladi_412.jpeg
    Funkcija loadXMLDoc traja dve parametrov Prva je lokacija skripta na strani strežnika, druga pa spremenljivke, ki jih je treba posredovati temu skriptu. To je kratek primer, kako lahko pokličete skript. Uporablja skript v /scripts/myscript.php z dvema parametroma GET (q in target). Priporočljivo je, da kodirate vrednosti s pomočjo encodeURIComponent.

    POST namesto GET

    Če želite na podatkovni strežnik prenesti več kot 512 bajtov, morate namesto GET uporabiti novo XMLHttpRequest javascript 34 javascript xml. Če želite prejemati podatke POST, morate spremeniti vrsto zahteve MIME s pomočjo glave Content-Type in posredovati spremenljivke pošiljanju. Zadnji del funkcije loadXMLDoc se spremeni, kot je prikazano na spodnji sliki.
    [thumb] http://hi-news.pp.ua/uploads/posts/2018-12/javascript-xmlhttprequest-storya-stvorennya-standarti-prikladi_143.jpeg
    V večini primerov je tretji parameter ukaza open se lahko ustavi. Vrednost true označuje, da mora biti klic asinhrona - skript se nadaljuje brez čakanja na odgovor XML, ki je že privzet. Prenos vrednosti false vodi do zaustavitve skripta, preden prejme odgovor. Skript, na katerega se nanaša URL, bo skript na strani strežnika (PHP, Perl ali podobno). Vrne dobro oblikovan dokument XML. Da bi se izognili opozorilu o varnosti brskalnika, mora biti v isti domeni, zaradi česar je stran dostopna.prek HTTP ali HTTPS.

    Prenos iz javascripta v strežniški skript

    Funkcija, ki obdeluje odziv (na primer processReqChange), mora biti sposobna dekomprimirati in obdelati prejeti XML. Ta diagram prikazuje, kako se podatki prenašajo iz javascripta v strežniški skript in nazaj. Načelo je preprosto. Vrnjen dokument XML bo vseboval enega ali več ukazov, ki bodo izvedeni zaporedoma - za ustvarjanje opozoril, za spreminjanje vrednosti obrazca ali za upravljanje DOM-a. To se izvede s funkcijo processReqChange.

    Razpoložljivi ukazi

    V skupno sedmih različnih ukazih, ki jih lahko kliče objektna knjižnica:
  • opozorilo (sporočilo) - prikaže opozorilo javascript.
  • setvalue (cilj, vrednost) - nastavite vrednost polja obrazca z identifikatorjem cilja.
  • setdefault (target) - ponastavi vrednost polja obrazca.
  • ostrenje (cilj) - nastavite ostrino na polje obrazca.
  • setcontent (cilj, vsebina) - nastavite notranji HTML element HTML.
  • setstyle (cilj, vrednost lastnosti) - nastavite slog elementa HTML.
  • setproperty (cilj, vrednost lastnosti) - nastavite lastnost elementa HTML.
  • V vsakem primeru je cilj identifikator, ki se nanaša na element strani HTML. Druge vrednosti so besedilo ali HTML za dodajanje dodatnih parametrov funkciji processReqChange.

    Ustvarjanje odgovora XML z uporabo PHP

    Tu opisane funkcije so namenjene programerjem PHP, ki ne želijo preveč vedeti o javascriptu, ker po pošiljanju prve zahteve ni potreben noben nadaljnji JScript. Datoteka XML (generira opozorilo, na primer za primer, ko s klikom na spodnjo povezavo ustvari oknoopozorilo JS z besedilom "hello world!") je pomemben prvi korak v katerem koli programskem jeziku.
    [thumb] http://hi-news.pp.ua/uploads/posts/2018-12/javascript-xmlhttprequest-storya-stvorennya-standarti-prikladi_604.jpeg
    Naslednji odgovor XML download besedilo v elementu na strani. V tem primeru bo izhod z identifikatorjem 2 prikazan v div. Namesto div-a lahko preprosto nastavite vsebino glave, odstavka ali celice tabele: example2 hello world.
    [thumb] http://hi-news.pp.ua/uploads/posts/2018-12/javascript-xmlhttprequest-storya-stvorennya-standarti-prikladi_855.jpeg
    lahko vstavite HTML, ne besedilo in vrnete dinamične in ne statične podatke. Naslednja zahteva XML je ustvarjena z uporabo PHP, da vstavite trenutni datum in čas.
    [thumb] http://hi-news.pp.ua/uploads/posts/2018-12/javascript-xmlhttprequest-storya-stvorennya-standarti-prikladi_676.jpeg
    Internet Explorer bo predpomnjen Odgovorite na XML in ga uporabite za prihodnje poizvedbe. To pomeni, da se proizvodnja ne bo nikoli spremenila. Drugi brskalniki vsakič povzročijo novo zahtevo. Vsi brskalniki, ki omogočajo DOM, sprejmejo backgroundColor, ker ime stila ima barvo ozadja, ki je bolj "pravilna" in deluje samo v nekaterih. Z uporabo PHP ali drugega strežnika je mogoče ustvariti "na letenje". Prvi ukaz nastavi lastnost barve ozadja v svetovnem polju hello na rumeno (# ff0) in drugo na naključno (rdeča, zelena ali modra). Ekipe so večinoma povezane z oblikovanjem polj - nastavitvijo /ponastavitvijo vrednosti v polju in nastavitvenim fokusom. So uporabne pri preverjanju obrazca na strani strežnika v realnem času, ko morate pregledati podatke brez ponovnega zagona.trenutno stran.

    Ustvarjanje XML z uporabo javascript

    Obstaja več različnih načinov za klic funkcije loadXMLDoc. Na primer, sklicevanje na obrazec je vzeto kot prvi parameter, nato pa dve dodatni spremenljivki. Uspešen klic loadXMLDoc vrne vrednost "da". onsubmit bo vrnil »laž«. S preklicem privzetega dejanja bo predstavljen dogodek, ki bi sicer povzročil obrazec. Naknadna izvedba se izvede z uporabo Ajaxa, zato brskalniku ni treba naložiti nove strani. Neuspešen klic loadXMLDoc vrne vrednost "laž". Upravljalnik onsubmit bo vrnil "true", kar pomeni, da je obrazec predstavljen v normalnem načinu. Nadaljnje izvajanje se izvede z uporabo nonAjaxTarget.html.
    [thumb] http://hi-news.pp.ua/uploads/posts/2018-12/javascript-xmlhttprequest-storya-stvorennya-standarti-prikladi_567.jpeg
    Preprečuje predpomnjenje vrednosti odgovora piškotka javascript xmlhttprequest. Nekateri brskalniki bodo predpomnili zahtevke GET, ki uporabljajo XHR, tako da je po prvem klicu naslednji od istega skripta ponovno zagnal prvi odziv. Če želite to zaobiti, morate zahtevi dodati naključni niz ali začasno oznako, kot je prikazano na spodnji fotografiji:
    storya-stvorennya-standarti-prikladi_288.jpeg
    Če skript vedno vrne isti odgovor za dane parametre, potem ni treba skrbeti, ker se za pospeševanje programa uporablja predpomnjenje. Če povzamemo, kako enostavno je delo z Ajaxom s to strukturo, morate le izpolniti naslednjeDejanja:
  • Nastavite skript na strani strežnika, da sprejme parametre GET ali POST ali COOKIE in vrnete veljavno datoteko XML.
  • Na strani podajte datoteko JS xmlhttp.js.
  • Za klic uporabite javascript.
  • Inverzne klice Ajax lahko naredite z ustvarjanjem primerka objekta XHR v odjemalcu JScript. javascript XMLHttpRequest get se lahko uporablja za neposredno klicanje strežniških objektov, kot so strani in spletne storitve. Shranili ali zavrtili bodo podatke. Ajax je bil prvotno kratica za asinhroni JS in XML. "Asinhrono" pomeni, da se več dogodkov zgodi popolnoma neodvisno drug od drugega. Takoj, ko odjemalec na strežnik vrne povratni klic Ajax, mu ni treba čakati na odgovor, saj lahko še naprej uporablja spletno aplikacijo med obdelavo zahteve. Po tem se bo strežnik odzval na odjemalca in ga bo obdelal po potrebi.

    Sorodne publikacije

    Kaj je JavaScript? Zgodovina izgleda in glavne značilnosti Večdimenzionalna asociativna JavaScript polja. Delo z nizi JavaScript JavaScript /stack JavaScript: Primeri aplikacij Primeri predmetov JavaScript JavaScript, nizi: opis