AJAX — XMLHttpRequest obyekti

AJAX-ning asosi XMLHttpRequest obyekti hisoblanadi.

1. XMLHttpRequest obyektini yarating.
2. Qayta aloqa funksiyasini (callback function) belgilang.
3. XMLHttpRequest obyektini oching.
4. Serverga so'rov yuboring.

---

XMLHttpRequest obyekti

Barcha zamonaviy brauzerlar XMLHttpRequest obyektini qo'llab-quvvatlaydi. XMLHttpRequest obyekti sahifa ortida veb-server bilan ma'lumot almashish uchun ishlatilishi mumkin. Bu butun sahifani qayta yuklamasdan, veb-sahifaning ayrim qismlarini yangilash imkonini beradi.

---

XMLHttpRequest obyektini yaratish

Barcha zamonaviy brauzerlar (Chrome, Firefox, IE, Edge, Safari, Opera) o'rnatilgan XMLHttpRequest obyektiga ega.

Obyektni yaratish sintaksisi:

variable = new XMLHttpRequest()

---

Qayta aloqa funksiyasini belgilash

Qayta aloqa funksiyasi (callback function) — bu boshqa funksiyaga parametr sifatida uzatiladigan funksiyadir. Bunda qayta aloqa funksiyasi javob tayyor bo'lganda bajariladigan kodni o'z ichiga olishi kerak.

xhttp.onload = function () {
  // Javob tayyor bo'lganda bajariladigan amal
}

---

So'rov yuborish

Serverga so'rov yuborish uchun XMLHttpRequest obyektining open() va send() metodlaridan foydalanishingiz mumkin:

xhttp.open('GET', 'ajax_info.txt')
xhttp.send()

Misol

// 1. XMLHttpRequest obyektini yaratish
const xhttp = new XMLHttpRequest()

// 2. Qayta aloqa funksiyasini belgilash
xhttp.onload = function () {
  // Bu yerda olingan ma'lumotlardan foydalanishingiz mumkin
  document.getElementById('demo').innerHTML = this.responseText
}

// 3. So'rovni tayyorlash va yuborish
xhttp.open('GET', 'ajax_info.txt')
xhttp.send()

---

Domenlararo kirish (Access Across Domains)

Xavfsizlik nuqtai nazaridan zamonaviy brauzerlar domenlararo kirishga ruxsat bermaydi. Bu shuni anglatadiki, veb-sahifa ham, u yuklamoqchi bo'lgan fayl ham bitta serverda joylashgan bo'lishi kerak.

---

XMLHttpRequest obyektining metodlari

Metod	Tavsif
new XMLHttpRequest()	Yangi XMLHttpRequest obyektini yaratadi
abort()	Joriy so'rovni bekor qiladi
getAllResponseHeaders()	Barcha sarlavha (header) ma'lumotlarini qaytaradi
getResponseHeader()	Maxsus sarlavha ma'lumotlarini qaytaradi
open(method, url, async, user, psw)	So'rovni belgilaydi method: so'rov turi GET yoki POST url: fayl manzili async: asinxron (true) yoki sinxron (false)
send()	So'rovni serverga yuboradi (GET uchun)
send(string)	So'rovni serverga yuboradi (POST uchun)
setRequestHeader()	Yuboriladigan sarlavhaga yorliq/qiymat juftligini qo'shadi

---

XMLHttpRequest obyektining xususiyatlari

Xususiyat	Tavsif
onload	So'rov qabul qilinganda (yuklanganda) chaqiriladigan funksiyani belgilaydi
onreadystatechange	readyState xususiyati o'zgarganda chaqiriladigan funksiyani belgilaydi
readyState	So'rov holatini saqlaydi: 0: so'rov ishga tushirilmadi 1: server bilan aloqa o'rnatildi 2: so'rov qabul qilindi 3: so'rov qayta ishlanmoqda 4: so'rov tugadi va javob tayyor
responseText	Javob ma'lumotlarini matn (string) sifatida qaytaradi
responseXML	Javob ma'lumotlarini XML sifatida qaytaradi
status	So'rovning holat raqamini qaytaradi (200: "OK", 404: "Not Found")
statusText	Holat matnini qaytaradi (masalan, "OK" yoki "Not Found")

---

onreadystatechange xususiyati

readyState xususiyati har safar o'zgarganda onreadystatechange funksiyasi chaqiriladi. readyState 4 va status 200 bo'lganda, javob tayyor hisoblanadi:

xhttp.onreadystatechange = function () {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById('demo').innerHTML = this.responseText
  }
}

Eslatma

onreadystatechange hodisasi to'rt marta (1 dan 4 gacha), ya'ni readyState har safar o'zgarganda ishga tushadi.