szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:javascript:javascript_ajax|< AJAX]]

====== AJAX GET kérés ======

  * **Szerző:** Sallai András
  * Copyright (c) 2015, Sallai András
  * Szerkesztve: 2015, 2021, 2024
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]]
  * Web: https://szit.hu

===== Fájl olvasása =====

<code javascript>
let loadButton = document.getElementById('loadButton');

loadButton.addEventListener('click', function() {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "adat.txt");
    xhr.send();
    xhr.onload = function() {
        if(xhr.readyState === xhr.DONE) {
            if(xhr.status === 200) {
                console.log(xhr.responseText);
            }
        }
    }
});
</code>


===== GET küldés =====

<code javascript>
httpRequest.open("GET","feldolgoz.php?vnev=Nagy&knev=Joska", true);
httpRequest.send();
</code>


===== Dolgozók lekérdezése REST API-ból =====

<code javascript>
function getEmployees() {
    let url = 'http://localhost:8000/employees';
    let http = new XMLHttpRequest();
    http.open('get', url, true);
    http.onload = function() {
        console.log(http.responseText)
    }
    http.send();
}

getEmployees();
</code>

==== Állapotok lekérdezése ====

<code javascript>
function getEmployees() {
    let url = 'http://localhost:8000/employees';
    let http = new XMLHttpRequest();
    http.open('get', url, true);
    http.onload = function() {
        if(http.readyState === http.DONE) {
            if(http.status === 200) {
                console.log(http.responseText)        
            }
        }        
    }
    http.send();
}

getEmployees();
</code>


===== Promise használata =====

Ha nem helyben szeretnénk felhasználni a lekérés eredményét, akkor
Promise készítése a megoldás.

<code javascript app.js>

getEmployees().then( response => {
    console.log(JSON.parse(response))
})
.catch(function(error) {
    console.error(error);
})


function getEmployees() {
    return new Promise(function(resolve, reject) {
        let url = "http://localhost:8000/api/employees";
        let http = new XMLHttpRequest();
        http.open('get', url, true);
        http.send();
        http.onload = function() {
            if(http.status == 200) {
                resolve(http.responseText);
            }else {
                reject('Hiba! A lekérés sikertelen!')
            }
        }
        http.onerror = function() {
            reject('Hiba! A hálózat nem elérhető!')
        }
    }) 
}
</code>


===== Forrás =====

  * https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/open (2021)
  * https://reqbin.com/code/javascript/car0zbiq/javascript-xmlhttprequest-example (2024)
szit

Felhasználói eszközök

Eszközök a webhelyen

Eszközök az oldalon
