XMLHttpRequest — հին դպրոց, ինչպես է աշխատում և օգտագործման օրինակներ

XMLHttpRequest (XHR) API-ն հանդիսանում է JavaScript-ում HTTP հարցումներ կատարելու առաջին և հիմնական ներկառուցված մեթոդը, որը հայտնվել է դեռևս 2000-ականների սկզբներին Ajax տեխնոլոգիայի հետ միասին։ Այն թույլ է տալիս բրաուզերային ծրագրերին կատարել asynchronous (ոչ խափանող) և synchronous (խափանող) HTTP հարցումներ՝ առանց ամբողջ էջի ռեֆրեշի:

XHR-ը իրականացնում է ցանցային հաղորդակցությունը ներքևի մակարդակով՝ օգտագործելով բրաուզերի ներքին ցանցային stack-ը, և ապահովում է մանրակրկիտ վերահսկողություն հարցման վրա՝ ներառյալ՝

• HTTP մեթոդների ընտրություն (GET, POST, PUT, DELETE, և այլն)
• Հեդերների ավելացում կամ փոփոխություն
• Հարցման բոդիի կարգավորում (օրինակ՝ JSON, FormData, Blob)
• Հաղորդակցման վիճակի ստուգում (readystatechange իրադարձություն)
• Հարցման առաջընթացի վերահսկում (progress event)

Սակայն XHR API-ն ունի նաև որոշ սահմանափակումներ՝

• Երկար և դժվարին կոդ, հատկապես ասինխրոն հարցումների դեպքում (callbacks-ը կարող է հանգեցնել callback hell-ի)
• Պատասխանների մշակումը հաճախ պետք է ձեռքով արվի՝ JSON.parse և այլն
• Ներառված Promise կամ async/await սինթաքս չունի, որը ժամանակակից JavaScript-ում պահանջված է կոդի պարզության և հստակության համար

Այժմ դիտարկենք մի պարզ օրինակ, թե ինչպես կարելի է XHR-ով կատարել GET հարցում և ստանալ JSON պատասխան՝

 const xhr = new XMLHttpRequest();
    xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1");

    xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status >= 200 && xhr.status < 300) {
                try {
                    const response = JSON.parse(xhr.responseText);
                    console.log("Response data:", response);
                } catch (e) {
                    console.error("Failed to parse JSON:", e);
                }
            } else {
                console.error("Request failed with status:", xhr.status);
            }
        }
    };

    xhr.onerror = function() {
        console.error("Network error occurred");
    };

    xhr.send();

Պարզաբանումներ՝

• open() մեթոդը բացում է հարցման տեսակը և URL-ը
• onreadystatechange օպերատորը հետևում է հարցման տարբեր վիճակներին՝ readyState-ին
• status սերվերի պատասխանների ստատուս կոդն է (200-299 կարգի՝ հաջողված)
• responseText պարունակում է սերվերից ստացված տվյալները որպես տեքստ
• send() իրականացնում է հարցումը

Եզրակացություն՝

• XMLHttpRequest-ն առաջարկում է մանրակրկիտ, բայց համեմատաբար բարդ API, որը լիովին վերահսկում է HTTP հարցման բոլոր ասպեկտները
• Այն դեռևս լայնորեն օգտագործվում է հին բրաուզերներում և որոշ հատուկ դեպքերում, որտեղ պահանջվում է մանրամասների բարձր կառավարում
• Սակայն ժամանակակից նախագծերում առաջարկվում է օգտագործել Fetch API՝ ավելի մաքուր, Promise-հիմնված API-ի համար