XMLHttpRequest object

XMLHttpRequest-objektet tillhandahåller metoder för att kommunicera med servern efter att webbsidan har laddats.

Vad är XMLHttpRequest-objektet?

XMLHttpRequest-objektet ärUtvecklarens dröm, eftersom du kan:

  • Uppdatera webbsidan utan att ladda om sidan
  • Begära data från servern efter att sidan har laddats
  • Ta emot data från servern efter att sidan har laddats
  • Skicka data till servern i bakgrunden

Alla moderna webbläsare stöder XMLHttpRequest-objektet.

Exempel:Kommunicera med servern via XML HTTP när text skrivs in.

Skapa XMLHttpRequest-objekt

Med ett enkelt rad av JavaScript-kod kan vi skapa ett XMLHttpRequest-objekt.

I alla moderna webbläsare (inklusive IE 7):

xmlhttp=new XMLHttpRequest()

I Internet Explorer 5 och 6:

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

Exempel

<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
om (window.XMLHttpRequest)
  {// kod för alla nya webbläsare}
  xmlhttp=new XMLHttpRequest();
  }
annars om (window.ActiveXObject)
  {// kod för IE5 och IE6}
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
annan
  {
  alert("Din webbläsare stöder inte XMLHTTP.");
  }
}
function state_Change()
{
if (xmlhttp.readyState==4)
  {// 4 = "loaded"}
  if (xmlhttp.status==200)
    {// 200 = OK}
    // ...vår kod här...
    }
  annan
    {
    alert("Problem med hämtning av XML-data");
    }
  }
}
</script>

TIY

Kommentarer:onreadystatechange är en händelsehanterare. Värdet (state_Change) är namnet på en funktion som utlöses när XMLHttpRequest-objektets tillstånd ändras. Tillståndet varierar från 0 (ej initierad) till 4 (komplett). Vi utför endast koden när tillståndet är 4.

Varför använda Async=true ?

Vårt exempel använder "true" som tredje parameter i open()

Denna parameter definierar om förfrågan ska behandlas asynkront.

Sant innebär att skriptet fortsätter att köra efter send() -metoden utan att vänta på svaret från servern.

onreadystatechange-händelsen komplicerar koden. Men det är den säkraste metoden för att förhindra att koden stannar utan att få serverns svar.

Genom att sätta detta parametervärdet till "false" kan du undvika extra onreadystatechange-kod. Om det inte spelar någon roll om resten av koden körs vid misslyckad förfrågan, kan du använda denna parameter.

TIY

Mer exempel

Ladda en textfil till en div-element via XML HTTP

Gör en HEAD-förfrågan via XML HTTP

Gör en specifik HEAD-förfrågan via XML HTTP

Listar data i XML-filen via XML HTTP

XML / ASP

Du kan också öppna och skicka XML-dokumentet till en ASP-sida på servern, analysera denna förfrågan och skicka tillbaka resultatet.

<html>
<body>
<script type="text/javascript">
xmlHttp=null;
om (window.XMLHttpRequest)
  // kod för IE7, Firefox, Opera, etc.
  xmlHttp=new XMLHttpRequest();
  }
annars om (window.ActiveXObject)
  // kod för IE6, IE5
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
om (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);
  }
annan
  {
  alert("Din webbläsare stöder inte XMLHTTP.");
  }
</script>
</body>
</html>

ASP-sida, skriven i VBScript:

<%
set xmldoc = Server.CreateObject("Microsoft.XMLDOM")
xmldoc.async=false
xmldoc.load(request)
för varje x i xmldoc.documentElement.childNodes
   om x.NodeName = "to" då name=x.text
next
response.write(name)
%>

Genom att använda response.write-attributet skicka resultatet till klienten.

TIY

Är XMLHttpRequest-objektet ett W3C-standard?

Ingen W3C rekommenderad standard reglerar XMLHttpRequest-objektet.

Men W3C DOM Level 3 "Ladda och Spara"-specifikationen innehåller några liknande funktionella, men ingen webbläsare har implementerat dem ännu.

Se

XML DOM referenshandbok: XMLHttpRequest objekt