XHR — browserdan HTTP request yuborish va response olish uchun yaratilgan klassik JavaScript API. To‘liq nomi XMLHttpRequest. Nomida XML mavjud bo‘lsa ham u JSON, text, HTML, binary va boshqa formatlar bilan ishlaydi.
XHR AJAX yondashuvining ommalashishida muhim rol o‘ynagan. Zamonaviy kodda ko‘p holatda Fetch API ishlatiladi, ammo XHR hali ham progress eventlari va legacy tizimlarda uchraydi.
Obyekt yaratish
Request uchun yangi obyekt yaratiladi:
const xhr = new XMLHttpRequest();
Keyin open() bilan method va URL belgilanadi:
xhr.open("GET", "/api/posts");
send() requestni yuboradi.
Asynchronous rejim
XHR odatda asinxron ishlaydi.
Response kelganda event yoki callback bajariladi.
Synchronous XHR main threadni bloklaydi va user interfeysini muzlatishi mumkin.
Zamonaviy browserlarda main thread synchronous request cheklangan yoki nomaqbul hisoblanadi.
Ready state
XHR tarixan readyState orqali request bosqichini ko‘rsatadi.
Qiymatlar:
- 0 — UNSENT;
- 1 — OPENED;
- 2 — HEADERS_RECEIVED;
- 3 — LOADING;
- 4 — DONE.
readystatechange event har o‘zgarishda ishlashi mumkin.
Modern kod ko‘pincha load, error va boshqa aniq eventlardan foydalanadi.
Load event
Request muvaffaqiyatli transport darajasida tugaganda load event ishlaydi.
HTTP status alohida tekshiriladi.
404 response ham loadga kelishi mumkin.
Masalan:
xhr.onload = () => {
if (xhr.status >= 200 && xhr.status < 300) {
// success
}
};
Error event
Network, DNS yoki CORSga oid ayrim muvaffaqiyatsizliklarda error event ishlaydi.
Browser security sabab batafsil sabab har doim JavaScriptga berilmaydi.
Timeout va abort uchun alohida eventlar mavjud.
Response type
responseType response qanday talqin qilinishini belgilaydi.
Variantlar:
- bo‘sh yoki text;
json;blob;arraybuffer;document.
Response type request yuborilishidan oldin o‘rnatiladi.
JSON
JSON response uchun:
xhr.responseType = "json";
yoki textni JSON.parse qilish mumkin.
Server Content-Type: application/json qaytarishi kerak.
Invalid JSON parse xatosiga olib keladi.
Request body
POST requestda body string, FormData, Blob yoki boshqa qo‘llab-quvvatlanadigan type bo‘lishi mumkin.
JSON yuborilganda:
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify(data));
Header open()dan keyin, send()dan oldin beriladi.
Upload progress
XHRning muhim imkoniyatlaridan biri upload progress eventlari.
xhr.upload.onprogress = (event) => {
if (event.lengthComputable) {
const percent = event.loaded / event.total;
}
};
Bu katta file upload interfeysida ishlatiladi.
Download progress
xhr.onprogress response yuklanishini kuzatishi mumkin.
loaded va total qiymatlari mavjud bo‘lishi mumkin.
Server content length bermasa umumiy hajm noma’lum qoladi.
Abort
xhr.abort() requestni client tomonda to‘xtatadi.
abort event ishlaydi.
Server requestni qabul qilib operationni boshlagan bo‘lishi mumkin.
Abort transaction rollbackni avtomatik kafolatlamaydi.
Timeout
xhr.timeout millisekundlarda maksimal kutish vaqtini belgilashi mumkin.
Vaqt tugasa timeout event ishlaydi.
Timeout qiymati environment va request turiga qarab cheklanishi mumkin.
Credentials
Cross-origin requestda cookie yuborish uchun withCredentials ishlatilishi mumkin.
Server CORSda credentialga aniq ruxsat beradi.
Same-origin requestlarda cookie browser policy bo‘yicha yuboriladi.
CORS
XHR same-origin policy’ga bo‘ysunadi.
Cross-origin request uchun server CORS headerlari kerak.
Custom header yoki ma’lum method preflight yaratishi mumkin.
CORS xatosida response scriptga ochilmaydi.
Header
setRequestHeader request header qo‘shadi.
Response header:
getResponseHeader;getAllResponseHeaders
orqali olinadi.
Browser forbidden yoki expose qilinmagan headerlarni yashirishi mumkin.
Event listener
Property callback o‘rniga addEventListener ishlatilishi mumkin.
Bu bir eventga bir nechta listener qo‘shish imkonini beradi.
Cleanup va request lifecycle component unmount holatida boshqariladi.
Memory
Katta response to‘liq memory’da saqlanishi mumkin.
Streaming imkoniyati Fetch va Streams APIga qaraganda cheklangan.
Juda katta file uchun browser download yoki chunk protocol ko‘proq mos bo‘lishi mumkin.
XHR va Fetch
Fetch Promise va Request/Response modelidan foydalanadi.
XHR event-based.
XHR upload progressda qulay.
Fetch streaming va service worker bilan zamonaviyroq integratsiyaga ega.
Legacy librarylar ichkarida XHR ishlatishi mumkin.
FormData
XHR FormData bilan multipart form va file upload yuborishi mumkin. Browser boundary va Content-Typeni o‘zi yaratadi. Developer multipart headerni boundary’siz qo‘lda belgilasa server body’ni parse qila olmaydi.
Legacy integration
Eski widget va librarylar callback hamda readyState modeliga tayanishi mumkin. Ularni Fetchga almashtirishda progress, abort, credentials va error semantikasi bir xil emasligi hisobga olinadi.
Security
XHR orqali olingan HTMLni innerHTMLga to‘g‘ridan-to‘g‘ri qo‘yish XSS xavfini yaratadi. Transport response kelganini kafolatlaydi, content ishonchliligini emas. Server escaping va client sanitization kontekstga mos ishlatiladi.
Reuse
Bitta XMLHttpRequest obyektini parallel ikki request uchun ishlatib bo‘lmaydi. Har mustaqil operation yangi instance oladi. Oldingi request tugamasdan open() qayta chaqirilsa uning lifecycle’i bekor bo‘lishi mumkin.
MIME type
overrideMimeType ayrim legacy holatda response talqinini o‘zgartiradi. Noto‘g‘ri ishlatilsa encoding va binary data buzilishi mumkin.
Status zero
Ayrim network, abort yoki local file holatlarida status nol bo‘lishi mumkin. Bu normal HTTP success sifatida talqin qilinmaydi.
Bog‘liq tushunchalar
XMLHttpRequest, AJAX, Fetch API, HTTP request, Progress event, CORS, FormData, Response type, Browser API, JavaScript