XMLHttpRequest Object

Het XMLHttpRequest-object biedt methoden om na het laden van de pagina met de server te communiceren.

Wat is het XMLHttpRequest-object?

Het XMLHttpRequest-object isDe droom van ontwikkelaarsOmdat je kunt:

  • Update de pagina zonder de pagina opnieuw te laden
  • Vraag gegevens van de server op nadat de pagina is geladen
  • Ontvang gegevens van de server nadat de pagina is geladen
  • Geef gegevens naar de server in de achtergrond

Alle moderne browsers ondersteunen het XMLHttpRequest-object.

Voorbeeld:Communiceren met de server wanneer tekst wordt ingevoerd via XML HTTP.

Creëer XMLHttpRequest-object

Met een eenvoudige regel JavaScript kunnen we het XMLHttpRequest-object creëren.

In alle moderne browsers (inclusief IE 7):

xmlhttp=new XMLHttpRequest()

In Internet Explorer 5 en 6:

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

Voorbeeld

<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// code voor alle nieuwe browsers}
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code voor IE5 en IE6}
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
}
function state_Change()
{
if (xmlhttp.readyState==4)
  {// 4 = "geladen"}
  if (xmlhttp.status==200)
    {// 200 = OK}
    // ...ons code hier...
    }
  else
    {
    alert("Er is een probleem opgetreden bij het ophalen van XML-gegevens");
    }
  }
}
</script>

Try It Yourself (TIY)

Opmerking:onreadystatechange is een event handler. Zijn waarde (state_Change) is de naam van een functie die wordt aangeroepen wanneer de status van het XMLHttpRequest-object verandert. De status verandert van 0 (oninitieerd) tot 4 (voltooid). Alleen wanneer de status 4 is, voeren we de code uit.

Waarom Async=true gebruiken?

Onze voorbeeld gebruikt "true" in de derde parameter van open().

Deze parameter bepaalt of de aanvraag asynchrone verwerking ondergaat.

True betekent dat het script na de send()-methode verdergaat zonder te wachten op een reactie van de server.

Het onreadystatechange-evenement complicatie in de code. Maar dit is de veiligste manier om te voorkomen dat de code stopt zonder een reactie van de server te krijgen.

Door deze parameter op "false" te zetten, kunt u extra onreadystatechange-code weggelaten. Als het uitvoeren van de overige code bij een mislukking van de aanvraag niet belangrijk is, kunt u deze parameter gebruiken.

Try It Yourself (TIY)

Meer voorbeelden

Laden van een textfile in een div-element met XML HTTP

HEAD-aanvraag uitvoeren met XML HTTP

Specifieke HEAD-aanvraag uitvoeren met XML HTTP

Lijst gegevens in XML-bestand met XML HTTP op

XML / ASP

U kunt ook een XML-document openen en het naar een ASP-pagina op de server sturen, deze aanvraag analyseren en vervolgens het resultaat terugsturen.

<html>
<body>
<script type="text/javascript">
xmlHttp=null;
if (window.XMLHttpRequest)
  //{ code for IE7, Firefox, Opera, etc.
  xmlHttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  //{ code for IE6, IE5
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlHttp!=null)
  {
  xmlHttp.open("GET", "note.xml", false);
  xmlHttp.send(null);
  xmlDoc=xmlHttp.responseText;
  xmlHttp.open("POST", "demo_dom_http.asp", false);
  xmlHttp.send(xmlDoc);
  document.write(xmlHttp.responseText);
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
</script>
</body>
</html>

ASP page, written in VBScript:

<%
set xmldoc = Server.CreateObject("Microsoft.XMLDOM")
xmldoc.async=false
xmldoc.load(request)
for each x in xmldoc.documentElement.childNodes
   if x.NodeName = "to" then name=x.text
next
response.write(name)
%>

Return the result to the client by using the response.write property.

Try It Yourself (TIY)

Is the XMLHttpRequest object a W3C standard?

No W3C recommended standard specifies the XMLHttpRequest object.

However, the 'Load and Save' specification of W3C DOM Level 3 includes some similar functionalities, but none of the browsers have implemented them yet.

See also

XML DOM reference manual: XMLHttpRequest object