AJAX XMLHttp obyekti
AJAX ning asosiy toshi XMLHttpRequest obyektidir.
- XMLHttpRequest obyektini yaratish
- Callback funksiyasini aniqlash
- XMLHttpRequest obyektini ochish
- Serverga so‘rov yuborish
XMLHttpRequest obyekti
Barcha zamonaviy brauzerlar XMLHttpRequest obyektini qo‘llab-quvvatlaydi.
XMLHttpRequest obyekti sahna ortidagi veb-server bilan ma’lumotlarni almashish uchun ishlatilishi mumkin. Bu shuni anglatadiki, butun sahifani qayta yuklamasdan, veb-sahifaning qismlarini yangilash mumkin.
XMLHttpRequest obyektini yaratish
Barcha zamonaviy brauzerlarda (Chrome, Firefox, IE, Edge, Safari, Opera) o‘rnatilgan XMLHttpRequest obyekti mavjud.
XMLHttpRequest obyektini yaratish sintaksisi:
variable = new XMLHttpRequest();
Callback funksiyasini aniqlash
Callback funksiyasi boshqa funksiyaga parametr sifatida uzatiladigan funksiyadir.
Bunday holda, callback qilish funksiyasi javob tayyor bo‘lganda bajarilishi kerak bo‘lgan kodni o‘z ichiga olishi kerak.
xhttp.onload = function() {
// What to do when the response is ready
}
So‘rov yuborish
Serverga so‘rov yuborish uchun siz serverning open() va send() usullaridan foydalanishingiz mumkin
XMLHttpRequest Obyekt:
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Misol
// Create an XMLHttpRequest object
const xhttp = new XMLHttpRequest();
// Define a callback function
xhttp.onload = function() {
// Here you can use the Data
}
// Send a request
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
O‘zingiz sinab ko‘ring »
Domenlararo kirish
Xavfsizlik nuqtai nazaridan zamonaviy brauzerlar domenlararo kirishga ruxsat bermaydi.
Bu shuni anglatadiki, veb-sahifa ham, u yuklamoqchi bo‘lgan XML fayli ham bitta serverda joylashgan bo‘lishi kerak.
W3Schools-dagi misollar W3Schools domenida joylashgan barcha ochiq XML fayllari.
Agar siz yuqoridagi misolni o‘zingizning veb-sahifalaringizdan birida ishlatmoqchi bo‘lsangiz, yuklagan XML fayllaringiz o‘z serveringizda joylashgan bo‘lishi kerak.
XMLHttpRequest obyekti metodlari
| Metod | Tavsif |
|---|---|
| new XMLHttpRequest() | Yangi XMLHttpRequest obyektini yaratadi |
| abort() | Joriy so‘rovni bekor qiladi |
| getAllResponseHeaders() | Sarlavha (header) ma’lumotlarini qaytaradi |
| getResponseHeader() | Muayyan sarlavha ma’lumotlarini qaytaradi |
| open(method, url, async, user, psw) | So‘rov usulini belgilaydi: so‘rov turi GET yoki POST url: fayl joylashuvi asinxron: rost (asinxron) yoki noto‘g‘ri (sinxron)foydalanuvchi: ixtiyoriy foydalanuvchi nomipsw: ixtiyoriy parol |
| send() | GET so‘rovlari uchun ishlatiladigan serverga so‘rov yuboradi |
| send(string) | So‘rovni serverga yuboradi. POST so‘rovlari uchun ishlatiladi |
| setRequestHeader() | Yuboriladigan sarlavhaga yorliq/qiymat juftligini qo‘shadi |
XMLHttpRequest obyekti xususiyatlari
| Xususiyat | Tavsif |
|---|---|
| onload | So‘rov qabul qilinganda (yuklanganda) chaqiriladigan funksiyani belgilaydi |
| onreadystatechange | ReadyState xususiyati o‘zgarganda chaqiriladigan funksiyani belgilaydi |
| readyState | XMLHttpRequest holatini ushlab turadi. 0: so‘rov ishga tushmadi 1: serverga ulanish o‘rnatildi 2: so‘rov qabul qilindi 3: so‘rovni qayta ishlash 4: so‘rov tugallandi va javob tayyor |
| responseText | Javob ma’lumotlarini string sifatida qaytaradi |
| responseXML | Javob ma’lumotlarini XML ma’lumotlari sifatida qaytaradi |
| status | So‘rovning holat raqamini qaytaradi200: "OK"403: "Taqiqlangan"404: "Topilmadi" To‘liq list uchun Http xabarlari ma’lumotnomasiga o‘ting |
| statusText | Holat matnini qaytaradi (masalan, "OK" yoki "Topilmadi") |
onload xususiyati
XMLHttpRequest obyekti bilan qachon bajarilishi kerak bo‘lgan callback funksiyasini belgilashingiz mumkin
so‘rov javob oladi.
Funksiya XMLHttpRequest obyektining onload xususiyatida aniqlanadi:
Misol
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
O‘zingiz sinab ko‘ring »
Bir nechta callback funksiya
Agar veb-saytda bir nechta AJAX vazifalari bo‘lsa, siz uchun bitta funksiya yaratishingiz kerak
XMLHttpRequest obyektini bajarish va har biri uchun bittadan callback funksiyasi
AJAX vazifasi.
Funksiya chaqiruvida URL manzili va javob tayyor bo‘lganda qanday funksiya chaqirilishi kerak.
Misol
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {cFunction(this);}
xhttp.open("GET", url);
xhttp.send();
}
function myFunction1(xhttp) {
// action goes here
}
function myFunction2(xhttp) {
// action goes here
}
onreadystatechange xususiyati
readyState xususiyati XMLHttpRequest holatiga ega.
onreadystatechange xossasi readyState o‘zgarganda bajarilishi kerak bo‘lgan callback funksiyasini belgilaydi.
status xususiyati va statusText xossalari XMLHttpRequest obyektining holatini saqlaydi.
| Xususiyat | Tavsif |
|---|---|
| onreadystatechange | ReadyState xususiyati o‘zgarganda chaqiriladigan funksiyani belgilaydi |
| readyState | XMLHttpRequest holatini ushlab turadi. 0: so‘rov ishga tushmadi 1: serverga ulanish o‘rnatildi 2: so‘rov qabul qilindi 3: so‘rovni qayta ishlash 4: so‘rov tugallandi va javob tayyor |
| status | 200: "OK"403: "Taqiqlangan" 404: "Sahifa topilmadi"To‘liq ro‘yxat uchun Http xabarlari ma’lumotnomasiga o‘ting. |
| statusText | Holat matnini qaytaradi (masalan, "OK" yoki "Topilmadi") |
onreadystatechange funksiyasi har doim readyState o‘zgarganda chaqiriladi.
readyState 4 va holati 200 bo‘lsa, javob tayyor bo‘ladi:
Misol
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
}
O‘zingiz sinab ko‘ring »
onreadystatechange hodisasi to‘rt marta (1-4) ishga tushadi — readyState’ning har bir o‘zgarishida bir marta.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!