AJAX Inleiding
AJAX 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
Probeer dit self Voorbeelde in elke hoofstuk
In elke hoofstuk kan jy die voorbeelde aanlyn wysig en op 'n knoppie klik om die resultaat te sien.
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() {
var 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", true);
xhttp.send();
}
Die "ajax_info.txt"-lêer wat in die voorbeeld hierbo gebruik word, is 'n eenvoudige tekslêer en lyk soos volg:
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a
technique for accessing web servers from a web page.</p>
<p>AJAX stands for
Asynchronous JavaScript And XML.</p>
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 XMLHttpRequest-objek (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