AJAX Inleiding
AJAX is 'n ontwikkelaar se droom, want jy kan:
- Lees data vanaf 'n webbediener - nadat die bladsy gelaai is
- Dateer 'n webblad op sonder om die bladsy te herlaai
- Stuur data na 'n webbediener - in die agtergrond
AJAX voorbeeld
Let AJAX change this text
AJAX Voorbeeld verduidelik
HTML-bladsy
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>Let AJAX change this text</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
</body>
</html>
Die HTML-bladsy bevat 'n <div>-afdeling en 'n <knoppie>.
Die <div>-afdeling word gebruik om inligting vanaf 'n bediener te vertoon.
Die <knoppie> roep 'n funksie op (as dit geklik word).
Die funksie versoek data van 'n webbediener en vertoon dit:
Funksie loadDoc()
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
Wat is AJAX?
AJAX = 'n Sinchroniese J avaScript A nd X ML.
AJAX is nie 'n programmeertaal nie.
AJAX gebruik net 'n kombinasie van:
- 'n Blaaier-ingeboude
XMLHttpRequestvoorwerp (om data van 'n webbediener aan te vra) - JavaScript en HTML DOM (om die data te vertoon of te gebruik)
AJAX is 'n misleidende naam. AJAX-toepassings kan XML gebruik om data te vervoer, maar dit is ewe algemeen om data as gewone teks of JSON-teks te vervoer.
AJAX laat webbladsye asynchroon bygewerk word deur 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.
Hoe AJAX werk
- 1. 'n Gebeurtenis vind plaas in 'n webblad (die bladsy is gelaai, 'n knoppie word geklik)
- 2. 'n XMLHttpRequest-objek word deur JavaScript geskep
- 3. Die XMLHttpRequest-objek stuur 'n versoek na 'n webbediener
- 4. Die bediener verwerk die versoek
- 5. Die bediener stuur 'n antwoord terug na die webblad
- 6. Die antwoord word deur JavaScript gelees
- 7. Behoorlike aksie (soos bladsyopdatering) word deur JavaScript uitgevoer
Moderne blaaiers (Haal API)
Moderne blaaiers kan Fetch API gebruik in plaas van die XMLHttpRequest Object.
Die Fetch API-koppelvlak laat webblaaier toe om HTTP-versoeke aan webbedieners te rig.
As jy die XMLHttpRequest Object gebruik, kan Fetch dieselfde op 'n eenvoudiger manier doen.