XMLHttpRequest Overzicht

Oorspronkelijk ontworpen XMLHttpRequest Microsoft om Internet Explorer (IE) te laden XML documenten van JavaScript. Ook al is XML in haar naam, XMLHttpRequest is echt een generieke HTTP-client voor JavaScript. Met het kan, JavaScript maken GET en POST-HTTP-verzoeken. (Voor POST verzoeken, kunnen gegevens worden verzonden naar de server in een formaat van uw keuze.) De belangrijkste beperkingen van de XMLHttpRequest te wijten zijn aan de browser veiligheid zandbak. Het kan alleen HTTP (S) verzoeken (URL bestand, bijvoorbeeld, zal niet werken), en het kan verzoeken doen alleen aan hetzelfde domein als de op dat moment geladen pagina.

De veiligheid beperkingen van XMLHttpRequest doen beperking van de manieren waarop je kunt gebruiken, maar de trade-off in extra veiligheid is ook de moeite waard. De meeste aanvallen van JavaScript toepassingen centrum rond injecteren kwaadaardige code in de webpagina. Als XMLHttpRequest mogen verzoeken om een website, zou het een belangrijke speler in deze aanslagen. De zekerheid zandbak vermindert deze potentiële problemen. Bovendien vereenvoudigt het de programmering model, omdat de JavaScript-code impliciet kan alle gegevens wordt geladen vanaf XMLHttpRequest vertrouwen. Het kan het vertrouwen van de gegevens, omdat de nieuwe gegevens net zo veilig is als de pagina die de eerste pagina geladen.

Ondanks het feit dat XMLHttpRequest geeft slechts een klein API en slechts een handvol van methoden en eigenschappen, heeft het zijn de verschillen tussen browsers. Deze verschillen zijn voornamelijk in event handling en object instantiatie (in IE, XMLHttpRequest is eigenlijk een ActiveX-object), zodat ze niet moeilijk te omzeilen. In het volgende overzicht van de XMLHttpRequest API, de Mozilla syntaxis voor XMLHttpRequest instantiatie wordt gebruikt. Als u de voorbeelden in IE lopen, moet u vervangen new XMLHttpRequest (); met ofwel new ActiveXObject ( "MSXML2.XMLHTTP.3.0"); of de volledige cross-browser instantiëring methode, beschreven in de "cross-browser XMLHttpRequest" van dit artikel.

XMLHttpRequest is de meest gebruikte methode voor AJAX communicatie omdat het twee unieke eigenschappen biedt. De eerste functie geeft de mogelijkheid om nieuwe inhoud te laden zonder dat de inhoud wordt veranderd op enigerlei wijze, waardoor het zeer eenvoudig om te AJAX passen in je normale ontwikkeling van patronen. De tweede functie kan JavaScript om synchrone bellen. Een synchroon oproep stopt alle andere operaties, totdat het voltooid is, en terwijl dit niet een optie die meestal wordt gebruikt, kan het nuttig zijn in gevallen waarin de huidige verzoek moet worden ingevuld voordat verdere maatregelen worden genomen.

XMLHttpRequest:: Open ()

De open methode wordt gebruikt om het verzoek type (GET, POST, PUT, of PROPFIND), de URL van de pagina die wordt opgevraagd, en of de oproep zal worden asynchrone. Een gebruikersnaam en wachtwoord voor HTTP-authenticatie kan optioneel ook worden doorgegeven. De URL kan een relatief pad (zoals pagina.html) of een complete degene die het adres van de server omvat (zoals http://blog.joshuaeichorn.com/page.html). De basismethode handtekening is:

In de JavaScript-milieu, veiligheid beperkingen zijn plaats. Deze veiligheidsmaatregelen beperkingen oorzaak van de open te gooien een uitzondering als de URL is van een ander domein dan de huidige pagina. Het volgende voorbeeld maakt gebruik van open tot oprichting van een synchrone GET-verzoek om index.html:

1 var req = new XMLHttpRequest ();
2 req.open ( 'GET', 'index.html', false);
3 req.send (null);
4 als (req.status == 200)
5 alert (req.responseText);

XMLHttpRequest:: Send ()

Het verzenden methode maakt de verbinding met de URL in te openen. Indien het verzoek asynchroon is, wordt het gesprek onmiddellijk terug te sturen, anders wordt het gesprek blokkeren verdere uitvoering totdat de pagina is gedownload. Indien het verzoek type is POST, zal de lading worden verzonden als het lichaam van het verzoek dat wordt verzonden naar de server. De methode handtekening is:

send (payload)

Wanneer u een POST-aanvraag te maken, moet u om de Content-type header. Op deze manier, de server weet wat te doen met de geüploade content. Om na te bootsen verzenden van een formulier via HTTP POST, stelt u de content type application / x-www-form-urlencoded. Urlencoded gegevens is hetzelfde formaat dat je in een URL na de "?". U ziet een voorbeeld van deze gecodeerde gegevens door het maken van een formulier en de vaststelling van de methode te krijgen. Het volgende voorbeeld toont een synchrone POST-verzoek index.php dat is een urlencoded laadvermogen verzenden. Als index.php bevat Ziet u de ingediende gegevens vertaald alsof het een normale vorm in de signalering:

1 var req = new XMLHttpRequest ();
2 req.open ( 'POST', 'index.php', false);
3 req.setRequestHeader ( 'Content-type ",
4 'application / x-www-form-urlencoded; charset = UTF-8;');
5 req.send ( 'hello world & = XMLHttpRequest = test');
6 indien (req.status == 200)
7 alert (req.responseText);

XMLHttpRequest:: setRequestHeader ()

Er zijn veel verschillende gevallen waarin de vaststelling van een kop op een verzoek kan nuttig zijn. De meest voorkomende gebruik van setRequestHeader () is om de Content-type ingesteld, omdat de meeste web-toepassingen al weten hoe om te gaan met bepaalde soorten, zoals urlencoded. De setRequestHeader methode handtekening neemt twee parameters: de kop in te stellen en de waarde ervan:

setRequestHeader (header, waarde)

Omdat de verzoeken verzonden met XMLHttpRequest sturen dezelfde standaard headers, inclusief kop-en cookie HTTP authenticatie headers, als een normale browser verzoek zal de header-naam meestal de naam van de HTTP-header die u wilt overschrijven. Naast dwingende standaard headers, is setRequestHeader nuttig voor het instellen van aangepaste, applicatie-specifieke headers. Custom headers zijn in het algemeen voorafgegaan met X-om ze te onderscheiden van standaard Ones. Het volgende voorbeeld maakt een synchrone GET-verzoek het toevoegen van een header genaamd X-foo te test.php. Als test.php bevat Ziet u de ingediende kop in de signalering:

1 var req = new XMLHttpRequest ();
2 req.open ( 'GET', 'test.php', false);
3 req.setRequestHeader ( 'X-foo', 'bar');
4 req.send (null);
5
6 indien (req.status == 200)
7 alert (req.responseText);

XMLHttpRequest:: getResponseHeader () en getAllResponseHeaders ()

De geTResponseHeader methode kunt u een berichtkop van het antwoord krijgt, dit is vooral handig wanneer alles wat je nodig hebt is een kop als Content-type; er rekening mee dat de opgegeven header is hoofdlettergevoelig. De methode handtekening is als volgt:

getResponseHeader (header)

getAllResponseHeaders geeft alle headers van de respons in een string, dit is handig voor het debuggen of het zoeken naar een waarde. Het volgende voorbeeld maakt een synchrone GET-verzoek om test.html. Wanneer de cliënt een antwoord ontvangt, de Content-type is gewaarschuwd en alle headers zijn gewaarschuwd:

1 var req = new XMLHttpRequest ();
2 req.open ( 'GET', 'test.html', false);
3 req.send (null);
4
5 als (req.status == 200) (
6 alert (req.getResponseHeader ( 'Content-type'));
7 alert (req.getAllResponseHeaders ()); 8)

Alle browsers uitvoering van een abort () methode, die wordt gebruikt om een in-progress asynchrone verzoek annuleren. (Een voorbeeld hiervan is weergegeven in de "verzenden Asynchronous aanvragen 'in dit artikel.) Mozilla-gebaseerde browsers bieden ook een aantal extra methoden op de top van de basis-API; bijvoorbeeld addEventListener () en removeEventListener () bieden een manier om vangst status gebeurtenissen zonder gebruik van de op * eigenschappen. Er is ook een overrideMimeType ()-methode die het mogelijk maakt om de Content-type op text / xml, zodat het zal worden verwerkt in een DOM document zelfs als de server niet melden van kracht als zodanig. De Mozilla-specifieke methoden kan handig zijn in bepaalde omstandigheden, maar in de meeste gevallen, moet je wegblijven van hen, omdat niet alle browsers te ondersteunen.

XMLHttpRequest Eigenschappen

XMLHttpRequest biedt een aantal eigenschappen die informatie verstrekken of resultaten over het verzoek. De meeste van de eigenschappen zijn vanzelfsprekend, je gewoon de waarde en handelen te lezen op. De op * eigenschappen zijn event handlers die worden gebruikt door het toewijzen van een functie voor hen. Een lijst van alle eigenschappen volgt:

status. De HTTP status code van het verzoek antwoord.
statusText. De HTTP status code die verder gaat met de code.
readyState. De toestand van het verzoek.
responseText. Ongeparsed tekst van het antwoord.
responseXML. Reactie ontleed in een DOM document object; gebeurt alleen als Content-type is text / xml.
onreadystatechange. Event handler die wordt aangeroepen als readyState veranderingen.
OnError. Mozilla-only event handler die wordt aangeroepen als er een fout gebeurt tijdens een verzoek.
onprogress. Mozilla-only event handler die wordt aangeroepen met een interval als de inhoud wordt geladen.
onload. Mozilla-only event handler die wordt aangeroepen wanneer het document wordt geladen.

Opmerking

Mozilla herstelt event handlers, zoals onreadystatechange, na een verzoek is voltooid, dus moet je ze opnieuw als u meerdere gesprekken met hetzelfde doel maken.

readyState Referentie

De volgende tabel toont de mogelijke waarden voor de readyState variabele. Het zal weer een aantal die de huidige staat van het object. Elk verzoek zal de voortgang door de lijst van readyStates

ReadyState Niveaus
readyState Status Code	Status van de XMLHttpRequest object
(0) ongeinitialiseerde	Het object is gemaakt, maar niet geïnitialiseerd. (De open methode niet is genoemd.)
(1) laden	Het object is gemaakt, maar het verzenden methode is niet genoemd.
(2) LOADED	Het verzenden methode is genoemd, maar de status en de headers zijn nog niet beschikbaar.
(3) INTERACTIVE	Sommige gegevens zijn ontvangen. Roepen de responseBody responseText en eigenschappen op deze stand om gedeeltelijke resultaten te verkrijgen zal terugkeren een fout, omdat de status en de reactie headers worden niet volledig beschikbaar.
(4) AFGEROND	Alle gegevens is ontvangen, en de volledige gegevens beschikbaar zijn in de responseBody en responseText eigenschappen.

De readyState variabele en de onreadystatechange event handler zijn verbonden op een zodanige wijze dat elke keer dat de readyState variabele wordt veranderd, de onreadystatechange event handler wordt aangeroepen.

een artikel afkomstig van Carol Rudenberg