Die XMLHttpRequest- objek
Alle moderne blaaiers het 'n ingeboude XMLHttpRequest-objek om data van 'n bediener te versoek.
Alle groot blaaiers het 'n ingeboude XML-ontleder om toegang tot XML te verkry en te manipuleer.
Die XMLHttpRequest-objek
Die XMLHttpRequest-objek kan gebruik word om data vanaf 'n webbediener aan te vra.
Die XMLHttpRequest-objek is ' n ontwikkelaar se droom , want jy kan:
- Dateer 'n webblad op sonder om die bladsy te herlaai
- Versoek data vanaf 'n bediener - nadat die bladsy gelaai is
- Ontvang data vanaf 'n bediener - nadat die bladsy gelaai is
- Stuur data na 'n bediener - in die agtergrond
XMLHttpRequest Voorbeeld
Wanneer jy 'n karakter in die invoerveld hieronder tik, word 'n XMLHttpRequest na die bediener gestuur, en 'n paar naamvoorstelle word teruggestuur (van die bediener af):
Voorbeeld
Start typing a name in the input field below:
Suggestions:
Stuur 'n XMLHttpRequest
Alle moderne blaaiers het 'n ingeboude XMLHttpRequest-objek.
'n Algemene JavaScript-sintaksis vir die gebruik daarvan lyk baie soos volg:
Voorbeeld
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Action to be performed when the
document is read;
}
};
xhttp.open("GET", "filename", true);
xhttp.send();
Skep 'n XMLHttpRequest-objek
Die eerste reël in die voorbeeld hierbo skep 'n XMLHttpRequest-objek:
var xhttp = new XMLHttpRequest();
Die onreadystatechange-gebeurtenis
Die readyState- eienskap hou die status van die XMLHttpRequest.
Die onreadystatechange- gebeurtenis word geaktiveer elke keer as die readyState verander.
Tydens 'n bedienerversoek verander die readyState van 0 na 4:
0: versoek nie geïnisialiseer nie
1: bedienerverbinding tot stand gebring
2: versoek ontvang
3: verwerking van versoek
4: versoek voltooi en antwoord is gereed
In die onreadystatechange-eienskap, spesifiseer 'n funksie wat uitgevoer moet word wanneer die readyState verander:
xhttp.onreadystatechange = function()
Wanneer readyState 4 is en status 200 is, is die antwoord gereed:
if (this.readyState == 4 && this.status == 200)
XMLHttpRequest-eienskappe en -metodes
| Method | Description |
|---|---|
| new XMLHttpRequest() | Creates a new XMLHttpRequest object |
| open(method, url, async) | Specifies the type of request method: the type of request: GET or POST url: the file location async: true (asynchronous) or false (synchronous) |
| send() | Sends a request to the server (used for GET) |
| send(string) | Sends a request string to the server (used for POST) |
| onreadystatechange | A function to be called when the readyState property changes |
| readyState | The status of the XMLHttpRequest 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready |
| status | 200: OK 404: Page not found |
| responseText | The response data as a string |
| responseXML | The response data as XML data |
Toegang oor domeine heen
Om sekuriteitsredes laat moderne blaaiers nie toegang oor domeine toe nie.
Dit beteken dat beide die webblad en die XML-lêer wat dit probeer laai, op dieselfde bediener geleë moet wees.
Die voorbeelde op W3Schools is almal oop XML-lêers wat op die W3Schools-domein geleë is.
As jy die voorbeeld hierbo op een van jou eie webblaaie wil gebruik, moet die XML-lêers wat jy laai op jou eie bediener geleë wees.
Die responseText Property
Die responseText-eienskap gee die antwoord as 'n string terug.
As jy die antwoord as 'n teksstring wil gebruik, gebruik die responseText-eienskap:
Voorbeeld
document.getElementById("demo").innerHTML = xmlhttp.responseText;
Die responseXML Eiendom
Die responseXML-eienskap gee die respons terug as 'n XML DOM-objek.
As jy die respons as 'n XML DOM-objek wil gebruik, gebruik die responseXML-eienskap:
Voorbeeld
Versoek die lêer cd_catalog.xml en gebruik die antwoord as 'n XML DOM-objek:
xmlDoc = xmlhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
KRY of PLAAS?
GET is eenvoudiger en vinniger as POST, en kan in die meeste gevalle gebruik word.
Gebruik egter altyd POST-versoeke wanneer:
- 'n Gekaslêer is nie 'n opsie nie (dateer 'n lêer of databasis op die bediener op)
- Stuur 'n groot hoeveelheid data na die bediener (POST het geen groottebeperkings nie)
- Deur gebruikerinvoer te stuur (wat onbekende karakters kan bevat), is POST meer robuust en veilig as GET
Die url - 'n Lêer op 'n bediener
Die url parameter van die open() metode, is 'n adres na 'n lêer op 'n bediener:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
Die lêer kan enige soort lêer wees, soos .txt en .xml, of bedienerskriplêers soos .asp en .php (wat aksies op die bediener kan uitvoer voordat die antwoord teruggestuur word).
Asinchroon - waar of onwaar?
Om die versoek asynchronies te stuur, moet die asynchronisasie-parameter van die open()-metode op waar gestel word:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
Die stuur van asynchroniese versoeke is 'n groot verbetering vir webontwikkelaars. Baie van die take wat op die bediener uitgevoer word, is baie tydrowend.
Deur asynchronies te stuur, hoef die JavaScript nie vir die bedienerantwoord te wag nie, maar kan dit eerder:
- voer ander skrifte uit terwyl jy wag vir bedienerantwoord
- hanteer die reaksie wanneer die antwoord gereed is
Async = waar
Wanneer async = true gebruik word, spesifiseer 'n funksie om uit te voer wanneer die antwoord gereed is in die onreadystatechange gebeurtenis:
Voorbeeld
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "xmlhttp_info.txt", true);
xmlhttp.send();
Async = vals
Om async = vals te gebruik, verander die derde parameter in die oop() metode na vals:
xmlhttp.open("GET", "xmlhttp_info.txt", false);
Die gebruik van async = vals word nie aanbeveel nie, maar vir 'n paar klein versoeke kan dit ok wees.
Onthou dat die JavaScript NIE sal voortgaan om uit te voer totdat die bedienerantwoord gereed is nie. As die bediener besig of stadig is, sal die toepassing hang of stop.
Let wel: Wanneer jy async = vals gebruik, MOENIE 'n onreadystatechange-funksie skryf nie - plaas net die kode na die send()-stelling:
Voorbeeld
xmlhttp.open("GET", "xmlhttp_info.txt", false);
xmlhttp.send();
document.getElementById("demo").innerHTML = xmlhttp.responseText;
XML-ontleder
Alle moderne blaaiers het 'n ingeboude XML-ontleder.
Die XML Document Object Model (die XML DOM) bevat baie metodes om toegang tot XML te verkry en te wysig.
Voordat toegang tot 'n XML-dokument verkry kan word, moet dit egter in 'n XML DOM-objek gelaai word.
'n XML-ontleder kan gewone teks lees en dit omskep in 'n XML DOM-objek.
Ontleding van 'n teksstring
Hierdie voorbeeld ontleed 'n teksstring in 'n XML DOM-objek, en onttrek die inligting daaruit met JavaScript:
Voorbeeld
<html>
<body>
<p id="demo"></p>
<script>
var text, parser,
xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday
Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
Ou blaaiers (IE5 en IE6)
Ou weergawes van Internet Explorer (IE5 en IE6) ondersteun nie die XMLHttpRequest-objek nie.
Om IE5 en IE6 te hanteer, kyk of die blaaier die XMLHttpRequest-objek ondersteun, of skep anders 'n ActiveXObject:
Voorbeeld
if (window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
}
else {
// code for old IE browsers
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
Ou weergawes van Internet Explorer (IE5 en IE6) ondersteun nie die DOMParser-objek nie.
Om IE5 en IE6 te hanteer, kyk of die blaaier die DOMParser-objek ondersteun, of skep anders 'n ActiveXObject:
Voorbeeld
if (window.DOMParser) {
// code for modern browsers
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
}
else {
// code for old IE browsers
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(text);
}
Meer voorbeelde
Haal kopinligting van 'n hulpbron (lêer) op.
Haal spesifieke kopinligting van 'n hulpbron (lêer) op.
Hoe 'n webblad met 'n webbediener kan kommunikeer terwyl 'n gebruiker karakters in 'n invoerveld tik.
Hoe 'n webblad inligting van 'n databasis kan haal met die XMLHttpRequest-objek.
op Skep 'n XMLHttpRequest om data van 'n XML-lêer af te haal en die data in 'n HTML-tabel te vertoon.