AJAX so‘rovi
XMLHttpRequest obyekti server bilan ma’lumot almashish uchun ishlatiladi.
Serverga so‘rov yuborish
Serverga so‘rov yuborish uchun XMLHttpRequest obyektining open() va send() metodlaridan foydalanamiz:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
| Metod | Tavsif |
|---|---|
| open(method, url, async) | So‘rov turini belgilaydi method: so‘rov turi: GET yoki POST url: server (fayl) joylashuvi async: true (asinxron) yoki false (sinxron) |
| send() | So‘rovni serverga yuboradi (GET uchun ishlatiladi) |
| send(string) | So‘rovni serverga yuboradi (POST uchun ishlatiladi) |
GET yoki POST?
GET POST’dan soddaroq va tezroq bo‘lib, ko‘p hollarda ishlatilishi mumkin.
Biroq quyidagi hollarda doimo POST so‘rovlaridan foydalaning:
- Keshlangan fayldan foydalanib bo‘lmaganda (serverdagi fayl yoki ma’lumotlar bazasini yangilash).
- Serverga katta hajmdagi ma’lumot yuborilganda (POST’da hajm cheklovlari yo‘q).
- Foydalanuvchi kiritgan ma’lumotlar (noma’lum belgilarni o‘z ichiga olishi mumkin) yuborilganda POST GET’dan ishonchliroq va xavfsizroq.
GET so‘rovlari
Oddiy GET so‘rovi:
Yuqoridagi misolda keshlangan natija olishingiz mumkin. Buning oldini olish uchun URL’ga noyob ID qo‘shing:
Misol
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();
O‘zingiz sinab ko‘ring »
Agar GET metodi bilan ma’lumot yubormoqchi bo‘lsangiz, ma’lumotni URL’ga qo‘shing:
Misol
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();
O‘zingiz sinab ko‘ring »
POST so‘rovlari
Oddiy POST so‘rovi:
Ma’lumotlarni HTML forma kabi POST qilish uchun setRequestHeader() yordamida HTTP sarlavhasini qo‘shing. Yubormoqchi bo‘lgan ma’lumotlarni send() metodida ko‘rsating:
Misol
xhttp.open("POST", "demo_post2.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
O‘zingiz sinab ko‘ring »
| Metod | Tavsif |
|---|---|
| setRequestHeader(header, value) | So‘rovga HTTP sarlavhalarini qo‘shadi header: sarlavha nomini belgilaydi value: sarlavha qiymatini belgilaydi |
url - serverdagi fayl
open() metodining url parametri serverdagi fayl manzilidir:
xhttp.open("GET", "ajax_test.asp", true);
Fayl istalgan turdagi fayl bo‘lishi mumkin, masalan .txt va .xml yoki .asp va .php kabi server skript fayllari (ular javobni qaytarishdan oldin serverda amallar bajarishi mumkin).
Asinxron - true yoki false?
Server so‘rovlari asinxron tarzda yuborilishi kerak.
open() metodining async parametri true qilib o‘rnatilishi kerak:
xhttp.open("GET", "ajax_test.asp", true);
Asinxron yuborishda JavaScript server javobini kutib turishi shart emas, buning o‘rniga u:
- server javobini kutish vaqtida boshqa skriptlarni bajarishi
- javob tayyor bo‘lgandan keyin u bilan ishlashi mumkin
onreadystatechange xususiyati
XMLHttpRequest obyekti yordamida so‘rovga javob kelganda bajariladigan funksiyani belgilashingiz mumkin.
Funksiya XMLHttpRequest obyektining onreadystatechange xususiyatida belgilanadi:
Misol
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 haqida keyingi boblardan birida batafsilroq o‘rganasiz.
Sinxron so‘rov
Sinxron so‘rovni bajarish uchun open() metodidagi uchinchi parametrni false ga o‘zgartiring:
xhttp.open("GET", "ajax_info.txt", false);
Ba’zan async = false tezkor sinov uchun ishlatiladi. Sinxron so‘rovlarni eski JavaScript kodlarida ham uchratasiz.
Kod server ishini tugatishini kutib turgani sababli, onreadystatechange funksiyasiga ehtiyoj yo‘q:
Misol
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
O‘zingiz sinab ko‘ring »
Sinxron XMLHttpRequest (async = false) tavsiya etilmaydi, chunki server javobi tayyor bo‘lguncha JavaScript bajarilishi to‘xtab qoladi. Agar server band yoki sekin bo‘lsa, ilova qotib qoladi yoki to‘xtaydi.
Sinxron XMLHttpRequest veb-standartdan olib tashlanish jarayonida, ammo bu jarayon ko‘p yillar davom etishi mumkin.
Zamonaviy dasturchi vositalariga sinxron so‘rovlardan foydalanish haqida ogohlantirish tavsiya etiladi va bunday holatda ular InvalidAccessError istisnosini (exception) chiqarishi mumkin.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!