AJAX — web sahifani to‘liq qayta yuklamasdan serverga request yuborish va kelgan ma’lumot asosida interfeysning bir qismini yangilash usuli. To‘liq nomi Asynchronous JavaScript and XML.
Nomida XML mavjud bo‘lsa ham zamonaviy AJAX requestlar ko‘pincha JSON, HTML fragment, text yoki boshqa formatdan foydalanadi.
Asinxron aloqa
Klassik web form submit qilinganda browser yangi document yuklaydi.
AJAXda JavaScript request yuboradi va response kelganda mavjud DOMni yangilaydi.
User shu vaqt ichida sahifaning boshqa qismlari bilan ishlashda davom etishi mumkin.
Tarixiy model
AJAX atamasi XMLHttpRequest orqali serverdan data olib, DOMni dinamik yangilaydigan web applicationlarni ifodalash uchun ommalashgan.
Keyinchalik Fetch API, Promise va component frameworklar ayni yondashuvni zamonaviy ko‘rinishda davom ettirdi.
Request
AJAX request quyidagilarni saqlashi mumkin:
Server odatiy HTTP endpoint sifatida javob beradi.
AJAX alohida transport protokoli emas.
Response format
Keng tarqalgan formatlar:
Client response header va expected formatga mos parse qiladi.
Noto‘g‘ri format error handlingga olib keladi.
JSON
Zamonaviy web API’larda JSON keng ishlatiladi.
JavaScript objectga parse qilingach UI state yangilanadi.
Server user input va outputni schema asosida tekshiradi.
JSON ichidagi HTML string bevosita DOMga qo‘yilsa XSS xavfi yuzaga kelishi mumkin.
HTML fragment
Server tayyor HTMLning kichik qismini qaytarishi mumkin.
Client uni page ichiga joylashtiradi.
Bu server template va progressive enhancement bilan qulay.
Ishonchsiz content serverda escape qilinadi, client insertion contexti ham xavfsiz bo‘lishi kerak.
Event loop
Network request browserda background bajariladi.
Response tayyor bo‘lganda callback, Promise yoki async function davom etadi.
JavaScript main thread uzoq hisoblash bilan band bo‘lsa response callback darhol bajarilmasligi mumkin.
Loading holati
AJAX operation uchun UI:
- loading;
- success;
- empty;
- validation error;
- network error;
- timeout;
- retry
holatlarini ko‘rsatishi mumkin.
Faqat tugmani o‘chirib qo‘yish operation natijasini tushuntirmaydi.
Form submit
JavaScript formning submit eventini ushlab, data’ni AJAX orqali yuborishi mumkin.
Server validation xatolarini structured formatda qaytaradi.
Client fieldlar yonida error ko‘rsatadi.
Server-side validation baribir majburiy.
Partial update
Response’dan keyin faqat kerakli elementlar o‘zgartiriladi:
Bu to‘liq reloadga nisbatan yumshoq user tajribasi beradi.
Race condition
User tez-tez search input yozsa bir nechta request parallel ketadi.
Eski request kechroq kelib yangi natijani almashtirishi mumkin.
Sequence, request ID yoki AbortControllerga o‘xshash cancellation ishlatiladi.
Debounce
Input har harfda request yubormasligi uchun qisqa kutish qo‘llanadi.
User yozishni to‘xtatgach request ketadi.
Debounce network va server loadini kamaytiradi.
Throttle esa ma’lum intervalda maksimal chaqiriq sonini cheklaydi.
CORS
AJAX boshqa originga request yuborsa browser CORS policy’ni qo‘llaydi.
Server allowed origin, method, header va credentialni response headerlarda ko‘rsatadi.
CORS authenticationning o‘rnini bosmaydi.
Server har request permissionini tekshiradi.
Same-origin policy
Browser scriptning boshqa origin response’ini o‘qishini cheklaydi.
Bu malicious sayt userning boshqa xizmatdagi private data’sini olishiga to‘sqinlik qiladi.
CORS serverga nazoratli istisno berish imkonini beradi.
CSRF
Cookie avtomatik yuboriladigan state-changing AJAX request CSRF xavfiga ega bo‘lishi mumkin.
Himoya:
AJAX ishlatilishi CSRFni avtomatik yo‘q qilmaydi.
Cache
GET AJAX response browser yoki intermediary cache’da saqlanishi mumkin.
Query, header va cache-control freshnessga ta’sir qiladi.
Sensitive user response public cache’da saqlanmaydi.
Mutationdan keyin client local cache’ni invalidatsiya qiladi.
AJAX va Fetch
AJAX — umumiy yondashuv.
Fetch va XMLHttpRequest esa uni amalga oshiradigan browser API’lar.
Framework query librarylari ichkarida Fetch yoki XHRdan foydalanishi mumkin.
Optimistic UI
Client server javobini kutmasdan interfeysni vaqtincha muvaffaqiyatli deb yangilashi mumkin. Server xato qaytarsa oldingi holat tiklanadi. Operation ID va conflict handling bo‘lmasa parallel update’lar noto‘g‘ri UI yaratishi mumkin.
Accessibility
Partial DOM update screen readerga avtomatik tushunarli bo‘lmasligi mumkin. Status message uchun live region, focus boshqaruvi va button state ishlatiladi. AJAX form xatosi qaysi fieldga tegishli ekanini programmatik ko‘rsatadi.
Browser history
AJAX orqali asosiy view o‘zgarsa URL va history ham mos yangilanadi. Aks holda back tugmasi kutilmagan sahifaga olib boradi va view’ni bookmark qilish mumkin bo‘lmaydi.
Duplicate submit
User tugmani bir necha marta bosishi yoki network retry sabab operation takrorlanishi mumkin. Client pending holatda buttonni boshqaradi, server esa idempotency yoki unique constraint bilan duplicate side effectni cheklaydi.
Server rendering bilan birga
MPA sahifasi dastlab serverda render qilinib, keyingi filter va pagination AJAX bilan yangilanishi mumkin. Bu hybrid yondashuvdir.
Response order
Parallel requestlar yuborilgan tartibda qaytishi shart emas. Client har response’ni o‘z request IDsi yoki state versiyasi bilan bog‘laydi.
Bog‘liq tushunchalar
Asynchronous JavaScript and XML, Fetch API, XMLHttpRequest, JSON, HTTP request, DOM update, CORS, Same-origin policy, Promise, Client-side rendering