XMLHttpRequest objekt

XMLHttpRequest objektet tilbyder metoder til at kommunikere med serveren efter at websiden er indlæst.

Hvad er XMLHttpRequest objektet?

XMLHttpRequest objektet erUdviklerens drøm, fordi du kan:

  • Opdater siden uden at genindlæse siden
  • Forespørge data fra serveren efter at siden er indlæst
  • Modtag data fra serveren efter at siden er indlæst
  • Send data til serveren i baggrunden

Alle moderne browsere understøtter XMLHttpRequest-objektet.

Eksempel:Kommunikere med serveren ved hjælp af XML HTTP, når der indtastes tekst.

Opret XMLHttpRequest-objekt

Med et enkelt linje JavaScript-kode kan vi oprette XMLHttpRequest-objektet.

I alle moderne browsere (inklusive IE 7):

xmlhttp=new XMLHttpRequest()

I Internet Explorer 5 og 6:

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

Eksempel

<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// kode for alle nye browsere}
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// kode for IE5 og IE6}
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
else
  {
  alert("Din browser understøtter ikke XMLHTTP.");
  }
}
function state_Change()
{
if (xmlhttp.readyState==4)
  {// 4 = "loaded"}
  if (xmlhttp.status==200)
    {// 200 = OK}
    // ...vores kode her...
    }
  else
    {
    alert("Problem med indhentning af XML-data");
    }
  }
}
</script>

TIY

Kommentarer:onreadystatechange er en eventhåndterer. Dens værdi (state_Change) er navnet på en funktion, der udløses, når XMLHttpRequest-objektets tilstand ændres. Tilstanden ændres fra 0 (ikke initialiseret) til 4 (færdig). Vi udfører kun kode, når tilstanden er 4.

Hvorfor bruge Async=true ?

Vores eksempel bruger "true" som tredje parameter i open().

Denne parameter bestemmer, om anmodningen skal behandles asynkront.

True betyder, at skriptet vil fortsætte efter send()-metoden, uden at vente på serverens svar.

onreadystatechange-begivenheden gør koden kompleks. Men det er den sikreste måde at forhindre, at koden stopper, uden at få serverens svar.

Ved at sætte denne parameter til "false" kan du undgå yderligere onreadystatechange-kode. Hvis det ikke er vigtigt, om resten af koden skal udføres, når anmodningen fejler, kan du bruge denne parameter.

TIY

Flere eksempler

Indlæs en textfil i en div-element med XML HTTP

Udfør en HEAD-anmodning med XML HTTP

Udfør en specificeret HEAD-anmodning med XML HTTP

List XML-filens data med XML HTTP

XML / ASP

Du kan også åbne XML-dokumentet og sende det til en ASP-side på serveren, analysere denne anmodning og derefter returnere resultaterne.

<html>
<body>
<script type="text/javascript">
xmlHttp=null;
if (window.XMLHttpRequest)
  //{ kode for IE7, Firefox, Opera, etc.
  xmlHttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  //{ kode 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("Din browser understøtter ikke XMLHTTP.");
  }
</script>
</body>
</html>

ASP-side, skrevet i VBScript:

<%
set xmldoc = Server.CreateObject("Microsoft.XMLDOM")
xmldoc.async=false
xmldoc.load(request)
for hver x i xmldoc.documentElement.childNodes
   hvis x.NodeName = "to" så name=x.text
next
response.write(name)
%>

Ved at bruge response.write egenskaben sendes resultatet tilbage til klienten.

TIY

Er XMLHttpRequest objektet en W3C standard?

Ingen W3C-anbefalede standarder definerer XMLHttpRequest objektet.

Selvom W3C DOM Level 3's "Load and Save"-specifikationer indeholder nogle lignende funktioner, er der endnu ingen browser, der har implementeret dem.

Se

XML DOM reference manual: XMLHttpRequest objekt