MohirDox

Ko'rinishi

AJAX — Kirish ​

AJAX — bu dasturchining orzusi, chunki siz:

  • Sahifa yuklangandan so'ng veb-serverdan ma'lumotlarni o'qishingiz;
  • Sahifani qayta yuklamasdan veb-sahifani yangilashingiz;
  • Fonda veb-serverga ma'lumotlarni yuborishingiz mumkin.

AJAX Misoli ​

html
<div id="demo">
  <h2>AJAX ushbu matnni o'zgartirsin</h2>
  <button type="button" onclick="loadDoc()">Tarkibni o'zgartirish</button>
</div>

<script>
  function loadDoc() {
    const xhttp = new XMLHttpRequest()
    xhttp.onload = function () {
      document.getElementById('demo').innerHTML = this.responseText
    }
    xhttp.open('GET', 'ajax_info.txt')
    xhttp.send()
  }
</script>

AJAX Misoli Tushuntirishi ​

HTML sahifasida <div> bo'limi va <button> (tugma) mavjud.

  • <div> bo'limi serverdan olingan ma'lumotlarni ko'rsatish uchun ishlatiladi.
  • Tugma bosilganda funksiyani (loadDoc()) chaqiradi.
  • Funksiya veb-serverdan ma'lumot so'raydi va uni ko'rsatadi.

AJAX nima? ​

AJAX = Asynchronous JavaScript And XML (Asinxron JavaScript va XML).

AJAX dasturlash tili emas. AJAX shunchaki quyidagilarning birikmasidan foydalanadi:

  • Brauzerning o'rnatilgan XMLHttpRequest obyekti (veb-serverdan ma'lumot so'rash uchun).
  • JavaScript va HTML DOM (ma'lumotlarni ko'rsatish yoki ishlatish uchun).

Eslatma

AJAX nomi chalg'ituvchi bo'lishi mumkin. AJAX ilovalari ma'lumotlarni tashish uchun XML-dan foydalanishi mumkin, ammo ma'lumotlarni oddiy matn (plain text) yoki JSON matni sifatida tashish ham xuddi shunday keng tarqalgan.

AJAX veb-sahifalarni sahifa ortida (behind the scenes) veb-server bilan ma'lumot almashish orqali asinxron yangilash imkonini beradi. Bu butun sahifani qayta yuklamasdan, veb-sahifaning ayrim qismlarini yangilash mumkinligini anglatadi.

AJAX qanday ishlaydi ​

  1. Veb-sahifada voqea sodir bo'ladi (sahifa yuklanadi, tugma bosiladi).
  2. JavaScript orqali XMLHttpRequest obyekti yaratiladi.
  3. XMLHttpRequest obyekti veb-serverga so'rov yuboradi.
  4. Server so'rovni qayta ishlaydi.
  5. Server veb-sahifaga javob yuboradi.
  6. Javob JavaScript tomonidan o'qiladi.
  7. JavaScript orqali tegishli amal (masalan, sahifani yangilash) bajariladi.

Zamonaviy brauzerlar (Fetch API) ​

Zamonaviy brauzerlar XMLHttpRequest obyekti o'rniga Fetch API-dan foydalanishlari mumkin. Fetch API interfeysi veb-brauzerga veb-serverlarga HTTP so'rovlarini yuborish imkonini beradi. Agar siz XMLHttpRequest obyektidan foydalanayotgan bo'lsangiz, Fetch ham xuddi shu ishni soddaroq usulda bajara oladi.