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

ULASHISH

Let AJAX change this text

O‘zingiz sinab ko‘ring »


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 XMLHttpRequest obyekti (veb-serverdan ma’lumot so‘rash uchun)
  • JavaScript va HTML DOM (ma’lumotlarni ko‘rsatish yoki ishlatish uchun)
AJAX - chalg‘ituvchi nom. AJAX ilovalari ma’lumotlarni tashish uchun XML dan foydalanishi mumkin, ammo ma’lumotlarni oddiy matn yoki JSON matn sifatida tashish bir xil darajada keng tarqalgan.

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

AJAX

  • 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!