AJAX javobi
onreadystatechange xususiyati
readyState xususiyati XMLHttpRequest holatini saqlaydi.
onreadystatechange xususiyati readyState o‘zgarganda bajariladigan funksiyani belgilaydi.
status va statusText xususiyatlari XMLHttpRequest obyektining holatini saqlaydi.
| Xususiyat | Tavsif |
|---|---|
| onreadystatechange | readyState xususiyati o‘zgarganda chaqiriladigan funksiyani belgilaydi |
| readyState | XMLHttpRequest holatini saqlaydi. 0: so‘rov ishga tushirilmagan 1: server bilan ulanish o‘rnatilgan 2: so‘rov qabul qilingan 3: so‘rov qayta ishlanmoqda 4: so‘rov yakunlangan va javob tayyor |
| status | 200: "OK" 403: "Forbidden" 404: "Page not found" To‘liq ro‘yxat uchun Http xabarlari ma’lumotnomasiga o‘ting |
| statusText | Holat matnini qaytaradi (masalan, "OK" yoki "Not Found") |
onreadystatechange funksiyasi readyState har safar o‘zgarganda chaqiriladi.
readyState 4 ga va status 200 ga teng bo‘lganda javob tayyor bo‘ladi:
Misol
function loadDoc() {
var 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", true);
xhttp.send();
}
O‘zingiz sinab ko‘ring »
Yuqoridagi misolda ishlatilgan "ajax_info.txt" fayli oddiy matnli fayl bo‘lib, quyidagicha ko‘rinadi:
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a technique for accessing web servers from a web page.</p>
<p>AJAX stands for Asynchronous JavaScript And XML.</p>
onreadystatechange hodisasi to‘rt marta (1-4) — readyState’dagi har bir o‘zgarish uchun bir martadan ishga tushadi.
Callback funksiyasidan foydalanish
Callback funksiyasi — boshqa funksiyaga parametr sifatida uzatiladigan funksiya.
Agar veb-saytda bir nechta AJAX vazifasi bo‘lsa, XMLHttpRequest obyektini bajarish uchun bitta funksiya va har bir AJAX vazifasi uchun bittadan callback funksiyasi yaratishingiz kerak.
Funksiya chaqiruvi URL’ni va javob tayyor bo‘lganda qaysi funksiyani chaqirish kerakligini o‘z ichiga olishi kerak.
Misol
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function myFunction1(xhttp) {
// action goes here
}
function myFunction2(xhttp) {
// action goes here
}
O‘zingiz sinab ko‘ring »
Server javobi xususiyatlari
| Xususiyat | Tavsif |
|---|---|
| responseText | javob ma’lumotlarini string sifatida olish |
| responseXML | javob ma’lumotlarini XML ma’lumotlari sifatida olish |
Server javobi metodlari
| Metod | Tavsif |
|---|---|
| getResponseHeader() | Server resursidan muayyan sarlavha (header) ma’lumotini qaytaradi |
| getAllResponseHeaders() | Server resursidan barcha sarlavha (header) ma’lumotlarini qaytaradi |
responseText xususiyati
responseText xususiyati server javobini JavaScript stringi sifatida qaytaradi va undan shunga mos ravishda foydalanishingiz mumkin:
responseXML xususiyati
XML HttpRequest obyektida o‘rnatilgan XML parser mavjud.
responseXML xususiyati server javobini XML DOM obyekti sifatida qaytaradi.
Bu xususiyat yordamida javobni XML DOM obyekti sifatida tahlil qilishingiz (parse) mumkin:
Misol
cd_catalog.xml faylini so‘rang va javobni tahlil qiling (parse):
xmlDoc = xhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
xhttp.open("GET", "cd_catalog.xml", true);
xhttp.send();
O‘zingiz sinab ko‘ring »
XML DOM haqida ushbu darslikning DOM boblarida ancha ko‘proq narsalarni o‘rganasiz.
getAllResponseHeaders() metodi
getAllResponseHeaders() metodi server javobidagi barcha sarlavha (header) ma’lumotlarini qaytaradi.
Misol
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.getAllResponseHeaders();
}
};
O‘zingiz sinab ko‘ring »
getResponseHeader() metodi
getResponseHeader() metodi server javobidagi muayyan sarlavha (header) ma’lumotini qaytaradi.
Misol
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.getResponseHeader("Last-Modified");
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!