AJAX bilan tanishuv
AJAX - bu ishlab chiquvchining orzusi, chunki siz:
- Veb-serverdan ma’lumotlarni o‘qing - sahifa yuklangandan keyin
- Veb-sahifani qayta yuklamasdan yangilash
- Veb-serverga ma’lumotlarni yuborish - fonda
AJAX misoli tushuntirmasi
HTML sahifa
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>Let AJAX change this text</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
</body>
</html>
HTML sahifasida <div> bo‘limi va <button> mavjud.
<div> bo‘limi server ma’lumotlarini ko‘rsatish uchun ishlatiladi.
<button> (bosilganda) funksiyani chaqiradi.
Funksiya veb-serverdan ma’lumotlarni so‘raydi va ularni ko‘rsatadi:
loadDoc() funksiyasi
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
AJAX nima?
AJAX = Asynchronous JavaScript And XML.
AJAX dasturlash tili emas.
AJAX shunchaki quyidagilarning birikmasidan foydalanadi:
- Brauzerga o‘rnatilgan
XMLHttpRequestobyekti (veb-serverdan ma’lumot so‘rash uchun) - JavaScript va HTML DOM (ma’lumotlarni ko‘rsatish yoki ishlatish uchun)
AJAX veb-sahifalarni sahna ortidagi veb-server bilan ma’lumotlarni almashish orqali asinxron ravishda yangilanishiga imkon beradi. Bu shuni anglatadiki, butun sahifani qayta yuklamasdan, veb-sahifaning qismlarini yangilash mumkin.
AJAX qanday ishlaydi

- 1. Veb-sahifada hodisa yuz beradi (sahifa yuklanadi, tugma bosiladi)
- 2. XMLHttpRequest obyekti JavaScript tomonidan yaratilgan
- 3. XMLHttpRequest Object veb-serverga so‘rov yuboradi
- 4. Server so‘rovni qayta ishlaydi
- 5. Server javobni veb-sahifaga yuboradi
- 6. Javob JavaScript tomonidan o‘qiladi
- 7. JavaScript tegishli amalni (masalan, sahifani yangilash) bajaradi
Zamonaviy brauzerlar (Fetch API)
Zamonaviy brauzerlar XMLHttpRequest obyekti o‘rniga Fetch API dan foydalanishi mumkin.
Fetch API interfeysi veb-brauzerga veb-serverlarga HTTP so‘rovlarini yuborish imkonini beradi.
Agar siz XMLHttpRequest obyektidan foydalansangiz, Fetch xuddi shu ishni soddaroq tarzda amalga oshirishi mumkin.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!
