AJAX - Die XMLHttpRequest Object
Die sluitsteen van AJAX is die XMLHttpRequest-objek.
- Skep 'n XMLHttpRequest-objek
- Definieer 'n terugbelfunksie
- Maak die XMLHttpRequest-objek oop
- Stuur 'n versoek na 'n bediener
Die XMLHttpRequest-objek
Alle moderne blaaiers ondersteun die XMLHttpRequestvoorwerp.
Die XMLHttpRequestvoorwerp kan gebruik word om data met 'n webbediener agter die skerms uit te ruil. Dit beteken dat dit moontlik is om dele van 'n webblad op te dateer, sonder om die hele bladsy te herlaai.
Skep 'n XMLHttpRequest-objek
Alle moderne blaaiers (Chrome, Firefox, IE, Edge, Safari, Opera) het 'n ingeboude XMLHttpRequestvoorwerp.
Sintaksis vir die skep van 'n XMLHttpRequestvoorwerp:
variable = new XMLHttpRequest();
Definieer 'n terugbelfunksie
'n Terugbelfunksie is 'n funksie wat as 'n parameter na 'n ander funksie oorgedra word.
In hierdie geval moet die terugbelfunksie die kode bevat om uit te voer wanneer die antwoord gereed is.
xhttp.onload = function() {
// What to do when the response is ready
}
Stuur 'n versoek
Om 'n versoek na 'n bediener te stuur, kan jy die oop() en stuur() metodes van die
XMLHttpRequestobjek gebruik:
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Voorbeeld
// Create an XMLHttpRequest object
const xhttp = new XMLHttpRequest();
// Define a callback function
xhttp.onload = function() {
// Here you can use the Data
}
// Send a request
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Toegang oor domeine heen
Om sekuriteitsredes laat moderne blaaiers nie toegang oor domeine heen 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.
XMLHttpRequest-objekmetodes
| Method | Description |
|---|---|
| new XMLHttpRequest() | Creates a new XMLHttpRequest object |
| abort() | Cancels the current request |
| getAllResponseHeaders() | Returns header information |
| getResponseHeader() | Returns specific header information |
| open(method, url, async, user, psw) | Specifies the request method: the request type GET or POST url: the file location async: true (asynchronous) or false (synchronous) user: optional user name psw: optional password |
| send() | Sends the request to the server Used for GET requests |
| send(string) | Sends the request to the server. Used for POST requests |
| setRequestHeader() | Adds a label/value pair to the header to be sent |
XMLHttpRequest Object Properties
| Property | Description |
|---|---|
| onload | Defines a function to be called when the request is recieved (loaded) |
| onreadystatechange | Defines a function to be called when the readyState property changes |
| readyState | Holds 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 |
| responseText | Returns the response data as a string |
| responseXML | Returns the response data as XML data |
| status | Returns the status-number of a request 200: "OK" 403: "Forbidden" 404: "Not Found" For a complete list go to the Http Messages Reference |
| statusText | Returns the status-text (e.g. "OK" or "Not Found") |
Die laai Eiendom
Met die XMLHttpRequestvoorwerp kan jy 'n terugbelfunksie definieer wat uitgevoer moet word wanneer die versoek 'n antwoord ontvang.
Die funksie word gedefinieer in die onloadeienskap van die XMLHttpRequestobjek:
Voorbeeld
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Veelvuldige terugbelfunksies
As jy meer as een AJAX-taak op 'n webwerf het, moet jy een funksie skep om die XMLHttpRequestobjek uit te voer, en een terugbelfunksie vir elke AJAX-taak.
Die funksie-oproep moet die URL bevat en watter funksie om te roep wanneer die antwoord gereed is.
Voorbeeld
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {cFunction(this);}
xhttp.open("GET", url);
xhttp.send();
}
function myFunction1(xhttp) {
// action goes here
}
function myFunction2(xhttp) {
// action goes here
}
Die onreadystatechange Eiendom
Die readyStateeiendom hou die status van die XMLHttpRequest.
Die onreadystatechangeeiendom definieer 'n terugbelfunksie wat uitgevoer moet word wanneer die readyState verander.
Die statuseiendom en die statusTexteienskappe hou die status van die XMLHttpRequest-objek.
| Property | Description |
|---|---|
| onreadystatechange | Defines a function to be called when the readyState property changes |
| readyState | Holds 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" 403: "Forbidden" 404: "Page not found" For a complete list go to the Http Messages Reference |
| statusText | Returns the status-text (e.g. "OK" or "Not Found") |
Die onreadystatechangefunksie word geroep elke keer as die readyState verander.
Wanneer readyState4 is en status 200 is, is die antwoord gereed:
Voorbeeld
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
}
Die onreadystatechangegebeurtenis word vier keer geaktiveer (1-4), een keer vir elke verandering in die readyState.