XMLHttpRequest

Den aktuella versionen av sidan har ännu inte granskats av erfarna bidragsgivare och kan skilja sig väsentligt från versionen som granskades den 29 september 2017; kontroller kräver 14 redigeringar .

XMLHttpRequest (XMLHTTP, XHR) är ett API tillgängligt i webbläsares skriptspråk som JavaScript . Använder HTTP- eller HTTPS -förfrågningar direkt till webbservern och laddar serverns svarsdata direkt i det anropande skriptet. [1] Information kan skickas i vilket textformat som helst , som XML , HTML eller JSON . Låter dig göra HTTP-förfrågningar till servern utan att ladda om sidan.

XMLHTTP är en viktig komponent i AJAX -tekniken (Asynchronous JavaScript And XML ) som används av många webbplatser för att skapa dynamiska, responsiva applikationer. Till exempel används XMLHTTP av sajter som Bing Maps , Gmail , Google Maps , Google Suggest , Facebook .

XMLHTTP fungerar bara med filer som finns på samma domän som sidan som använder XMLHTTP, men det finns en lösning. Precis som i fallet med JavaScript är denna möjlighet att kringgå begränsningen gjord med säkerhet i åtanke ( cross-site scripting ).

Även om namnet innehåller förkortningen XML, sätter tekniken inga begränsningar på formatet på de överförda data. Data kan skickas som XML, JSON, HTML eller bara vanlig text. Utvecklaren kan självständigt skapa ett format för dataöverföring. Tänk dock på att HTTP-textprotokollet används vid sändning, och därför måste, när du använder GET-metoden, data överföras i form av text (det vill säga binär data ska kodas, till exempel i base64 ) . När du använder POST-metoden behövs ingen kodning.

Historik

Den utvecklades först av Microsoft och dök upp i Outlook på webbkomponenten i programvaran Microsoft Exchange Server 2000. Den fick namnet IXMLHTTPrequest. Verket inkorporerades senare i MSXML 2.0 som ett ActiveX -objekt tillgängligt via JScript , VBScript eller andra webbläsarstödda skriptspråk. MSXML 2.0 ingick i Internet Explorer 5.

Mozilla- projektprogrammerare utvecklade sedan en kompatibel version som heter nsIXMLHttpRequest i Mozilla 0.6. Bönan nåddes via ett JavaScript-objekt som heter XMLHttpRequest. Full funktionalitet uppnåddes dock endast i Mozilla 1.0. Ytterligare stöd för XMLHttpRequest dök upp i Safari 1.2 , Opera 8.01 och andra.

Den senaste officiella specifikationen är version 1.0 ( XMLHttpRequest daterad 19 december 2012), som har status som nuvarande standard (Living Standard) och version 2.0 ( XMLHttpRequest Level 2 , daterad 17 januari 2012), som har status som fungerande version. Den andra versionen introducerar förloppshändelsehanterare, stöd för frågor över flera domäner och arbete med binär data. [2]

XMLHttpRequest Class Methods

Metod Beskrivning
abort() Avbryter den aktuella begäran, tar bort alla rubriker, ställer in serversvarstexten till null.
getAllResponseHeaders() Returnerar hela listan med HTTP-rubriker som en sträng. Rubriker separeras med bindestreck (CR+LF).
Om felflaggan är sann returneras en tom sträng.
Om statusen är 0 eller 1, orsakar det ett INVALID_STATE_ERR-fel.
getResponseHeader(headerName) Returnerar värdet för den angivna rubriken.
Om felflaggan är sann returneras null.
Om titeln inte hittas returneras null.
Om statusen är 0 eller 1, orsakar det ett INVALID_STATE_ERR-fel.
öppen (metod, URL, asynkron, användarnamn, lösenord) Anger metod, URL och andra valfria frågeparametrar;
parametern async avgör om arbetet utförs i asynkront läge.
De två sista parametrarna är valfria.
skicka (innehåll) Skickar en förfrågan till servern.
setRequestHeader(etikett, värde) Lägger till en HTTP-rubrik till begäran.
åsidosättaMimeType(mimeType) Låter dig ange dokumentets mime-typ om servern inte överförde det eller överförde det felaktigt.
Observera : metoden är inte tillgänglig i Internet Explorer!

Egenskaper för klassen XMLHttpRequest

Fast egendom Sorts Beskrivning
redo att byta tillstånd EventListener En händelsehanterare som aktiveras varje gång ett objekts tillstånd ändras. Namnet måste skrivas med gemener.
readyState osignerad kort Objektets nuvarande tillstånd (0 - ej initierad, 1 - öppen, 2 - skickar data, 3 - tar emot data och 4 - data laddas)
svarText DOMString Texten i svaret på begäran.
Om tillståndet inte är 3 eller 4, returneras en tom sträng.
svarXML dokumentera Texten i svaret på begäran i form av XML, som sedan kan bearbetas genom DOM .
Om tillståndet inte är 4, returneras null.
status osignerad kort HTTP-status som ett nummer ( 404  - "hittades inte", 200  - "OK", etc.)
statusText DOMString Status som en sträng ("hittades inte", "OK", etc.).
Om statusen inte känns igen bör användarens webbläsare visa ett INVALID_STATE_ERR-fel.

Fel orsakade av XMLHttpRequest-klassen

namn Koden Beskrivning
SECURITY_ERR arton Anropas när ett försök görs att göra en begäran som inte tillåts av säkerhetsinställningarna i användarens webbläsare.
NETWORK_ERR 101 Anropade ett nätverksfel (under en synkron begäran).
ABORT_ERR 102 Anropas när användaren avbryter begäran (under en synkron begäran).

Användningsexempel

Planen för att arbeta med XMLHttpRequest-objektet kan representeras enligt följande:

  1. Instantiera ett XMLHttpRequest-objekt
  2. Öppnar en anslutning
  3. Inställning av händelsehanteraren (bör göras efter öppning och innan sändning till IE)
  4. Skickar en förfrågan.

Instantiera ett XMLHttpRequest-objekt.

I detta skede behövs en separat implementering för olika webbläsare. Konstruktionen av objektskapande skiljer sig: i IE 5 - IE 6 implementeras det genom ActiveXObject, och i andra webbläsare (IE 7 och högre, Mozilla, Opera, Chrome, Netscape och Safari) - som ett inbyggt objekt av typen XMLHttpRequest .

Uppmaningen för tidigare versioner av Internet Explorer ser ut så här [3] :

var req = nytt ActiveXObject ( "Microsoft.XMLHTTP" );

I andra webbläsare:

var req = new XMLHttpRequest ();

Det vill säga, för att säkerställa kod över webbläsare behöver du bara kontrollera förekomsten av window.XMLHttpRequest och window.ActiveXObject-objekt, och, beroende på vilket, tillämpa det.

Som en universell lösning föreslås det att använda följande funktion:

function createRequestObject () { if ( typeof XMLHttpRequest === 'undefined' ) { XMLHttpRequest = function () { try { return new ActiveXObject ( "Msxml2.XMLHTTP.6.0" ); } catch ( e ) {} prova { returnera nytt ActiveXObject ( "Msxml2.XMLHTTP.3.0" ); } catch ( e ) {} prova { returnera nytt ActiveXObject ( "Msxml2.XMLHTTP" ); } catch ( e ) {} prova { returnera nytt ActiveXObject ( "Microsoft.XMLHTTP" ); } catch ( e ) {} throw new Error ( "Denna webbläsare stöder inte XMLHttpRequest." ); }; } returnera ny XMLHttpRequest (); }

Installera en händelsehanterare, öppna en anslutning och skicka förfrågningar

Dessa samtal ser ut så här:

req . öppen ( < "GET" | "POST" | ... > , < url > [, < asyncFlag > [, < användare > , < lösenord > ]]); req . onreadystatechange = processReqChange ;

Var:

  • <"GET"|"POST"|...> —  begäranmetod . Tillåtet: DELETE, GET, HEAD, ALTERNATIV, POST, PUT.
  • <url>  är adressen för begäran.
  • <asyncFlag>  är en flagga som bestämmer om en asynkron begäran ska användas. Standard är satt till sant.
  • <användare> , <lösenord>  — inloggning respektive lösenord. Anges vid behov.

Efter att ha definierat alla parametrar för begäran återstår det bara att skicka den. Detta görs med metoden send(). När du skickar en GET-förfrågan för versionen utan ActiveX måste du ange null-parametern, i andra fall kan du inte ange några parametrar. Det kommer inte att vara ett fel om GET-parametern alltid är null:

req . skicka ( noll );

Efter det börjar ovanstående händelsehanterare att fungera. Det är faktiskt huvuddelen av programmet. Hanteraren avlyssnar vanligtvis alla möjliga statuskoder för begäran och anropar lämpliga åtgärder, samt avlyssnar eventuella fel. Exempelkod med dessa två funktioner:

varreq ; _ funktion loadXMLDoc ( url ) { req = null ; if ( fönster . XMLHttpRequest ) { try { req = new XMLHttpRequest (); } catch ( e ) {} } else if ( window . ActiveXObject ) { try { req = new ActiveXObject ( 'Msxml2.XMLHTTP' ); } catch ( e ) { try { req = new ActiveXObject ( 'Microsoft.XMLHTTP' ); } fånga ( e ) {} } } if ( req ) { req . open ( "GET" , url , true ); req . onreadystatechange = processReqChange ; req . skicka ( noll ); } } function processReqChange () { try { // Viktigt! // only if state is "complete" if ( req . readyState == 4 ) { // for status "OK" if ( req . status == 200 ) { // process response } else { alert ( "Det gick inte att hämta data : \n" + req . statusText ); } } } catch ( e ) { // alert('Fel: ' + e. beskrivning); // Bugzilla Bug 238559 XMLHttpRequest behöver ett sätt att rapportera nätverksfel // https://bugzilla.mozilla.org/show_bug.cgi?id=238559 } }

Kända problem

Liten buffertstorlek när video laddas.

Se även

Anteckningar

  1. ↑ XMLHttpRequest-objekt förklarat av W3C Working Draft . W3.org. Tillträdesdatum: 14 juli 2009. Arkiverad från originalet den 5 februari 2012.
  2. ↑ Nya funktioner i XMLHttpRequest2 . Hämtad 30 september 2016. Arkiverad från originalet 7 augusti 2016.
  3. ↑ Native XMLHTTPRequest-objekt . Hämtad 2 december 2009. Arkiverad från originalet 6 mars 2010.

Litteratur

  • Dave Crane, Eric Pascarello, Darren James. AJAX in Action: Technology - Asynkron JavaScript och XML = Ajax in Action. - M .: "Williams" , 2006. - S. 640. - ISBN 1-932394-61-3 .
  • Dari K., Brinzare B., Cherchez-Toza F., Busika M. AJAX och PHP: Dynamisk webbapplikationsutveckling. - St Petersburg. : Symbol Plus, 2006. - S. 336. - ISBN 5-93286-077-4 .

Länkar

Historik

Implementering i webbläsare

Handledningar

Standarder