Javascript orqali ajax ni ishlatish

Web ilova yaratish asoslari. PHP tili. Web serverlar. Virtual serverlar. “Mijoz-server” texnologiyasi. Javascript orqali AJAX ni ishlatish

Web dasturlash

Reja

• AJAX haqida
• AJAX imkoniyatlari
• AJAX ishlatish jarayoni
• AJAX dan foydalanish
• AJAX obyekti hususiyatlari
• Amaliy mashqlar
• Topshiriq

Terminlarga izoh

• Request
• Response
• Data
• XML
• JSON
• Built-in

AJAX nima

• AJAX = Asynchronous JavaScript And XML.
• Sinxronlashgan JavaScript va XML
• AJAX dasturlash tili emas;
• AJAX shunchaki quyidagialrni kombinatsiyasi:
• XMLHttpRequest obyekti kiritilgan (built-in) brauzer (serverga ma’lumotni yubora olish uchun)
• JavaScript va HTML DOM (serverdan olingan ma’lumotlarni sahifada tasvirlash uchun)
• AJAX – chalg'ituvchi nom. AJAX ilovalari ma'lumotlarni tashish uchun XML dan foydalanishi mumkin, lekin ma'lumotlarni oddiy matn yoki JSON matn sifatida tashish xam keng darajada tarqalgan.

AJAX imkoniyotlari

• Sahifa yuklangandan keyin veb-serverdan ma'lumotlarni o’qish ;
• Sahifani qayta yuklamasdan veb-sahifani yangilash;
• Veb-serverga ma'lumotlarni yuborish – orqa fonda;

AJAX qanday ishlaydi

Xodisa ro’y beradi …

• XMLHTTPRequest obyekti yaratiladi
• HTTPRequest yuboriladi

Internet

• HTTPRequest so’rovi bajariladi
• Javob ma’lumotlari yaratiladi va orqaga brauzerga qaytariladi

Internet

• Qauytgan ma’lumot JavaScriptda ishlanadi
• Sahifa kontenti yangilanadi

AJAX

• 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 ishlash bosqichlari

• 1. Veb-sahifada voqea sodir bo'ladi (sahifa yuklanadi, tugma bosiladi);
• 2. XMLHttpRequest obyekti JavaScript tomonidan yaratilgan;
• 3. XMLHttpRequest obyekti veb-serverga so'rov yuboradi;
• 4. Server so'rovni qayta ishlaydi;
• 5. Server javobni veb-sahifaga yuboradi;
• 6. Javob JavaScript tomonidan o'qiladi;
• 7. Ixtiyoriy xarakat (masalan, sahifani yangilash) JavaScript tomonidan amalga oshiriladi;

AJAXni boshqa varianti

• Zamonaviy brauzerlarda 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 API xuddi shu ishni soddaroq tarzda amalga oshirishi mumkin.

AJAX dan foydalanish

AJAX ishlatish

1

• XMLHttpRequest obyektini yaratiladi

2

• Qayta qo'ng'iroq qilish funktsiyasini aniqlanadi

3

• XMLHttpRequest obyektini oching

4

• Serverga so'rov yuboring

XMLHttpRequest obyektini yaratish:

• XMLHttpRequest obyektini yaratish:

uzgaruvchi = new XMLHttpRequest();

• Callback Funksiyasini yozish
• Callback funktsiyasi boshqa funktsiyaga parametr sifatida uzatiladigan funktsiyadir.
• Bu holda, callback funktsiyasi javob tayyor bo'lganda bajarilishi kerak bo'lgan kodni o'z ichiga olishi kerak.
• xhttp.onload = function() { // Javob tor bulganda bajariladigan kodlar }
• So’rovni yuborish
• Serverga so‘rov yuborish uchun XMLHttpRequest obyektining open() va send() metodlaridan foydalanamiz:
• xhttp.open("GET", “malumot.txt"); xhttp.send();

Domenlararo murojaat

• Xavfsizlik nuqtai nazaridan zamonaviy brauzerlar domenlar bo'ylab kirishga ruxsat bermaydi.
• Bu shuni bildiradiki, veb-sahifa ham, u yuklamoqchi bo'lgan XML fayli ham bitta serverda joylashgan bo'lishi kerak.
• Yuqoridagi misolni o'zingizning veb-sahifalaringizdan birida ishlatmoqchi bo'lsangiz, yuklagan XML fayllaringiz o'z serveringizda joylashgan bo'lishi kerak.

XMLHttpRequest Obyekt Xususiyatlari

Xususiyat	Izoh
onload	So’rov qabul qilinganda chaqiriladigan funksiyani tasvirlash
onreadystatechange	readyState xususiyati o’zgarganda chaqiriladigan funksiyani tasvirlash
readyState	XMLHttpRequest holatlardan birida bo’ladi. 0: so’rov yuklanmadi 1: serverga ulanish amalga oshdi 2: so’rov qabul qilindi 3: so’rov jarayonda 4: so’rov tugallandi va javob tayyor
responseText	Javob ma’lumotini satr shaklida olish
responseXML	Javob ma’lumotini XML shaklida olish
status	So’rovni holatini sonli qaytaradi: 200: "OK" 403: "Forbidden" 404: "Not Found" (to’liq ro’yhat bilan tarnishing)
statusText	Xolatni satrli qaytarish ("OK" yoki "Not Found")

Topshiriq

• HTML teglash yozilish strukturasi
• XML yozilish strukturasi
• JSON yozilish strukturasi

Ushbu 3 ta razmetkali tillarni yozilish strukturalarini tahlil qiling. Ulardagi o’xshashlikni va farqlarni aniqlang.

Last but not least recommendation