Pe această tehnologie funcționează toate aplicațiile moderne cu o singură pagină.
Pentru aceasta, se utilizează XMLHttpRequest. De la numele său s-ar putea să credeți că nu poate funcționa decât cu xml, dar nu este. Poate funcționa cu orice date.
Pentru a accesa serverul pentru date, hai să creăm un API cu date de testare folosind serviciul mocky.io.
Aici am date JSON
Îl lipim în corpul solicitării și selectăm modul în avans
Pentru ca orice domeniu să acceseze acest API.
Faceți clic pe Generați răspuns și obțineți un link către API-ul nostru.
În primul rând, trebuie să creați o nouă instanță XMLHttpRequest.
Acum configurați adresa URL pe care dorim să o primim
Pentru aceasta, pe xhr, numim metoda open prin trecerea tipului de solicitare, url și cererii asincrone. Bineînțeles că vrem asincron. Nu utilizați niciodată solicitări sincrone, deoarece aceasta blochează continuarea scriptului. În 99 cazuri din 100 acest lucru nu este necesar.
Nu credeți că xhr.open execută interogarea. Deși numele pare a fi. El o configurează doar. Pentru a trimite o cerere, utilizați xhr.send
Cererea noastră a fost trimisă, dar nu am procesat primirea datelor în nici un fel. În acest mod vom folosi o metodă specială onreadystatechange
În cadrul metodei, trebuie să verificăm gata de lucru la 4 pentru a înțelege momentul în care cererea a fost terminată. În timp ce ReadyState este sub cele patru, cererea nu este completă. Se întâmplă începutul cererii, obținerea antetului, încărcarea corpului și numai atunci când cererea este finalizată.
Acum, să adăugăm un control de eroare și să scoatem rezultatele la consola
După cum vedem, rezultatul este afișat ca un șir, deci trebuie să îl analizăm și în JSON
Care sunt principalele dezavantaje ale XMLHttpRequest și de ce toată lumea folosește ajax în jQuery pentru a recupera date sau biblioteci separate pentru acest exemplu superagent sau axios.
Primul negativ este, desigur, valoarea codului. În oricare dintre bibliotecile auxiliare, metoda de lucru cu cererile http este mult laconică.
A doua este lipsa de promisiuni atunci când se lucrează cu XMLHttpRequest. Nu putem scrie. Apoi, trimiteți un apel invers acolo și efectuați ceea ce vrem atunci când cererea este finalizată. Prin urmare, este incomod să lucrați cu acest cod.
Al treilea este compatibilitatea cu browserele încrucișate. Chiar și în IE 10-11 XMLHttpRequest nu funcționează ca în alte browsere.
Cu toate acestea, înțelegeți și amintiți-vă că o faceți pe plan intern, deși este puțin probabil să o utilizați în forma sa pură.
Articole similare
Trimiteți-le prietenilor: