Observemos a estrutura do código:
var xhttp = new XMLHttpRequest()
xhttp.onreadystatechange = function() {
// code that takes care of the server response
}
xhttp.open('GET', '/data.json', true)
xhttp.send()
Observe que a requisição para o servidor é enviada na última linha do código, mas o código de resposta é encontrado acima
Na linha
xhttp.onreadystatechange = function () {
um event handler para o evento onreadystatechange é definido para o objeto xhttp que realiza a requisição.
Quando o estado do objeto é alterado, o navegador realiza a chamada da função event handler
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// code that takes care of the server response
}
}
A função checa se readyState é igual à 4 e o status code do HTTP é possue resposta 200.
O mecanismo de chamada de event handlers é muito comum em JavaScript
Event Handlers functions são chamadas de callback functions
O código da aplicação não invoca a função, mas o ambiente - o navegador, invoca a função em um momento específico, quando o evento ocorre (e por isso event handler)
Podemos representar uma página HTML como uma estrutura implícita de árvore
html
head
link
script
body
div
h1
div
ul
li
li
ul
form
input
input
O funcionamento do navegador é baseado nesta ideia, de que a estruturação da linguagem de marcação HTML se decorre em formato de árvore
DOM é uma API que habilita modificação de programação dos elementos de árvore correspondentes à páginas web