Wat is AJAX?


HTML

AJAX is 'n ontwikkelaar se droom, want jy kan:

  • Lees data vanaf 'n webbediener - nadat 'n webblad 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() {
  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();
}


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

AJAX

  • 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

Volledige AJAX-tutoriaal

Dit was 'n kort beskrywing van AJAX.

Vir 'n volledige AJAX-tutoriaal gaan na W3Schools AJAX-tutoriaal .

Vir meer AJAX voorbeelde gaan na W3Schools AJAX Voorbeelde .