Pedidos GET

Os pedidos GET são mais simples e rápidos e podem ser usados sempre que queremos obter dados do servidor, seja na forma de um ficheiro, seja na forma json, xml ou texto.

Exemplo 1:

No exemplo a seguir, carregamos um ficheiro de texto a partir do servidor, e mostramos o seu conteúdo numa div.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial
scale=1.0"> 
<meta http-equiv="X-UA-Compatible" content="ie=edge"> 
<title>Pedido GET</title>
 <script> 
    //Cria uma instância do objeto XMLHttpRequest:
    var xhr xhr=new XMLHttpRequest();  
 
    function showfile(){  
        if (xhr.readyState == 4 && xhr.status == 200) { 
            document.getElementById("div1").innerHTML = xhr.responseText; 
        } 
    } 
 
    function loadfile(){ 
        //define a função que vai receber e tratar a resposta: 
        xhr.onreadystatechange = showfile; 
        //define o pedido GET assincrono: 
        xhr.open("GET", "intro_ajax.txt", true); 
        //envia o pedido: 
        xhr.send(); 
    } 
    </script> 
</head> 
<body> 
    <div id="div1"></div> 
 
    <button onclick="loadfile()">Carregar texto</button> 
</body> 
</html>

Exemplo 2:

Neste exemplo, chama um script de PHP (getAlunos.php) que devolve um array de alunos em formato JSON

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial
scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>Pedido GET</title> 
    <script> 
           var xhr=new XMLHttpRequest();  
         
            function showalunos(){  
                if (xhr.readyState == 4 && xhr.status == 200) { 
         
                     //converte objetos em JSON  para objetos Javascript: 
                    var alunos = JSON.parse(xhr.responseText); 
 
                    //actualiza o DOM com os dados da resposta: 
                    var div1 = document.getElementById("div1"); 
 
                      
                    html = '<table>'; 
                    html += 
'<tr><th>Nome</th><th>Morada</th><th>Turma</th></tr>'; 
                    for(var i=0; i < alunos.length; i++){ 
                        html += '<tr>'; 
                        html += '<td>' + alunos[i].nome + '</td>'; 
                        html += '<td>' + alunos[i].morada + '</td>'; 
                        html += '<td>' + alunos[i].turma + '</td>'; 
                        HTMLCanvasElement += "</tr>"; 
                    } 
                    html += '</table>'; 
                    div1.innerHTML = html; 
  
                } 
            } 
         
            function loadalunos(){ 
                //define a função que vai receber e tratar a resposta: 
                xhr.onreadystatechange = showalunos; 
                //define o pedido:
                xhr.open("GET", "getAlunosJson.php", true); 
                //envia o pedido: 
                xhr.send(); 
            } 
            </script> 
</head> 
<body> 
    <div id="div1"></div> 
    <button onclick="loadalunos()">Alunos</button>   
</body> 
</html>