javascript XHR方法

Posted 2021-05-03

let btn = document.querySelector('.btn');
btn.addEventListener('click', loadData);


function loadData(){
    // create xhr object
    const xhr = new XMLHttpRequest();
    // GET tähendab, et tahame faili sisu lugeda
    // seejärel on fail, mida lugeda tahetakse
    xhr.open('GET', 'data.txt', true);
    // Readystate näitab kui kaugel on käsu täitmise ning info tagastamisega
    console.log('READYSTATE', xhr.readyState);

    // Kasutatakse laadimise animatsioonide käiku laskmiseks, kui käsu pärimise protsess on veel käigus
    xhr.onprogress = function(){
        console.log('READYSTATE', xhr.readyState);
    }

    xhr.onload = function(){
        // kui kõik on korras, ehk http status on 200, ok, siis käivita fn
        if(this.status === 200){
            // console.log(this.responseText);
            document.querySelector('#content').innerHTML = this.responseText;
        }

    }
    // send fn on vajalik et asi browseris ka nähtav oleks ning et käsk välja saadetaks

    // Juhul kui miskit on valesti:
    xhr.onerror = function(){
        console.log('request error');
    }

    xhr.send();

    // HTTP statuses
    // 200: OK
    // 403: forbidden
    // 404: not found
};