XMLHttpRequest object
- Föregående sida DOM klonade noder
- Nästa sida DOM-handbok innehållsförteckning
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>
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.
Mer exempel
Ladda en textfil till en div-element via XML HTTP
Gör en HEAD-förfrågan 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.
Ä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.
- Föregående sida DOM klonade noder
- Nästa sida DOM-handbok innehållsförteckning