Tarmoq so'rovlari

XMLHttpRequest

XMLHttpRequest (qisqacha XHR) — bu tarmoq so'rovlarini yuborishning eski, ammo hali ham amalda uchraydigan usuli. Bugungi kunda fetch afzal ko'riladi, lekin XHR'ni bilish muhim: eski loyihalarda uchraydi va u fetchda yo'q ba'zi imkoniyatlarga (masalan, upload progress) ega.

"XML" nomiga qaramay, XHR har qanday turdagi ma'lumot bilan ishlaydi — JSON, matn, binar va boshqalar. Bu nom shunchaki tarixiy sabablarga ko'ra qolgan.

XHR nima uchun kerak?

Zamonaviy koda deyarli har doim fetch ishlatiladi. Ammo XHR'ni o'rganishning sabablari bor:

Asosiy sintaksis: open va send

XHR bilan so'rov yuborish uch bosqichdan iborat: obyekt yaratish, sozlash (open) va yuborish (send):

// 1) Obyekt yaratamiz
let xhr = new XMLHttpRequest();

// 2) So'rovni sozlaymiz
xhr.open('GET', 'https://example.com/data', true);

// 3) Yuboramiz
xhr.send();

xhr.open(method, url, async) parametrlari:

Muhim: open so'rovni yubormaydi, faqat sozlaydi. Haqiqiy so'rov send() chaqirilganda boshlanadi.

Hodisalar: onload, onerror, onprogress

XHR asinxron ishlagani uchun natijani hodisalar (events) orqali olamiz. Eng muhimlari:

let xhr = new XMLHttpRequest();
xhr.open('GET', '/data.json', true);

xhr.onload = function () {
  if (xhr.status >= 200 && xhr.status < 300) {
    // Muvaffaqiyat
    let data = JSON.parse(xhr.responseText);
    console.log('Ma'lumot: ', data);
  } else {
    // HTTP xatolik (404, 500 va h.k.)
    console.log('HTTP xatolik: ' + xhr.status);
  }
};

xhr.onerror = function () {
  // Tarmoq xatoligi
  console.log('So'rov bajarilmadi (tarmoq xatoligi)');
};

xhr.send();
Xuddi fetchdagidek, onload HTTP xatoliklarda (404, 500) ham chaqiriladi — chunki server javob bergan. Shuning uchun xhr.statusni o'zimiz tekshiramiz. onerror esa faqat tarmoq umuman ishlamaganda ishlaydi.

Javob xossalari

So'rov tugagach javobni quyidagi xossalar orqali olamiz:

xhr.responseType = 'json'; // brauzer JSON'ni avtomatik tahlil qiladi

xhr.onload = function () {
  // Endi xhr.response — tayyor obyekt (JSON.parse shart emas)
  console.log(xhr.response.name);
};

Progressni kuzatish

XHR'ning kuchli tomoni — u ham yuklab olish, ham yuklab jo'natish progressini kuzata oladi:

let xhr = new XMLHttpRequest();
xhr.open('GET', '/big-file', true);

// Yuklab olish progressi
xhr.onprogress = function (event) {
  if (event.lengthComputable) {
    let percent = Math.round((event.loaded / event.total) * 100);
    console.log('Yuklandi: ' + percent + '%');
  } else {
    console.log('Yuklandi: ' + event.loaded + ' bayt (umumiy hajm noma'lum)');
  }
};

xhr.send();

progress hodisasining obyekti quyidagi maydonlarga ega:

Upload progress

Fayl yuklab jo'natishda (upload) progressni kuzatish uchun xhr.upload obyektidan foydalanamiz — bu aynan fetchda yo'q imkoniyat:

let xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);

// Yuklab jo'natish progressi
xhr.upload.onprogress = function (event) {
  let percent = Math.round((event.loaded / event.total) * 100);
  console.log('Jo'natildi: ' + percent + '%');
};

xhr.upload.onload = function () {
  console.log('Fayl to'liq jo'natildi');
};

let formData = new FormData();
formData.append('file', fileInput.files[0]);
xhr.send(formData);
Agar sizga fayl yuklashda progress-bar kerak bo'lsa, bugungi kunda ham ko'pincha XHR ishlatiladi, chunki fetch upload progressini qo'llab-quvvatlamaydi.

Sinxron vs asinxron

openning uchinchi argumenti false bo'lsa, so'rov sinxron bajariladi — ya'ni send() javob kelguncha kodni bloklaydi:

let xhr = new XMLHttpRequest();
xhr.open('GET', '/data', false); // sinxron!

xhr.send(); // bu yerda kod javob kelguncha KUTADI (bloklanadi)

console.log(xhr.responseText); // javob tayyor
Sinxron so'rovlardan qochish kerak! Ular butun brauzerni (sahifani) javob kelguncha muzlatib qo'yadi — foydalanuvchi hech narsa qila olmaydi. Ko'p brauzerlar ularni eskirgan deb belgilagan. Doim asinxron (true) ishlating.

XHR va fetch: solishtirish

Ikki usulni qiyoslaymiz:

// Bir xil so'rov, ikki usul:

// fetch bilan (zamonaviy):
let response = await fetch('/data.json');
let data = await response.json();

// XHR bilan (eski):
let xhr = new XMLHttpRequest();
xhr.open('GET', '/data.json', true);
xhr.responseType = 'json';
xhr.onload = function () {
  let data = xhr.response;
};
xhr.send();

Xulosa