Ko‘u r s a t k i ch l a r
|
Maks.ball
|
Guruh ishi natijalarining bahosi
|
1
|
2
|
3
|
4
|
Ma’lumotning to‘liqligi
|
1,0
|
|
|
|
|
Taqdimot (ma’lumotning chizmali tarzda taqdim etilishi)
|
0,6
|
|
|
|
|
Guruhning faollik darajasi (qo’shimchalar kiritish, savol-javoblar berish)
|
0,4
|
|
|
|
|
Ballarning maksimal xajmi
|
2
|
|
|
|
|
2-ilova Mavzu bo’yicha asosiy holatlar
Mavzu: Hodisalar bilan ishlashning turli usullari, serverga ma’lumotlarni jo‘natishni JavaScript -kod yordamida ma’lumotlar almashishni tashkil etish
Reja:
1. Zamonaviy veb-saytlar va ilovalar
2. Hodisalar bilan ishlash
3. Ma’lumotlar almashishni tashkil etish
Zamonaviy veb-saytlar va ilovalardagi yana bir keng tarqalgan vazifa, butunlay yangi sahifani yuklamasdan veb-sahifa bo'limlarini yangilash uchun serverdan alohida ma'lumotlar elementlarini olishdir. Kichkina tuyulgan bu tafsilot saytlarning ishlashi va xatti-harakatlariga katta ta'sir ko'rsatdi, shuning uchun ushbu maqolada biz kontseptsiyani tushuntiramiz va buni amalga oshirishga imkon beradigan texnologiyalarni ko'rib chiqamiz: xususan, Fetch API .
Old shartlar:
|
JavaScript asoslari (qarang: birinchi qadamlar , qurilish bloklari , JavaScript ob'ektlari ), mijoz tomoni API asoslari
|
Maqsad:
|
Serverdan ma'lumotlarni olish va undan veb-sahifa mazmunini yangilash uchun foydalanishni o'rganish.
|
Bu yerda muammo nimada?
Veb-sahifa HTML-sahifadan va (odatda) uslublar jadvallari, skriptlar va tasvirlar kabi turli xil boshqa fayllardan iborat. Veb-sahifani yuklashning asosiy modeli shundan iboratki, brauzeringiz sahifani ko'rsatish uchun zarur bo'lgan fayllar uchun serverga bir yoki bir nechta HTTP so'rovlarini yuboradi va server so'ralgan fayllar bilan javob beradi. Agar siz boshqa sahifaga kirsangiz, brauzer yangi fayllarni so'raydi va server ular bilan javob beradi.
Ushbu model ko'plab saytlar uchun juda yaxshi ishlaydi. Ammo ma'lumotlarga asoslangan veb-saytni ko'rib chiqing. Masalan, Vankuver jamoat kutubxonasi kabi kutubxona veb-sayti . Boshqa narsalar qatorida, shunga o'xshash saytni ma'lumotlar bazasiga foydalanuvchi interfeysi sifatida qarashingiz mumkin. Bu sizga ma'lum bir kitob janrini qidirish imkonini berishi yoki avvalroq o'zlashtirilgan kitoblaringiz asosida sizga yoqadigan kitoblar bo'yicha tavsiyalarni ko'rsatishi mumkin. Buni qilganingizda, u sahifani ko'rsatish uchun yangi kitoblar to'plami bilan yangilashi kerak. Ammo shuni yodda tutingki, sahifa tarkibining aksariyat qismi, jumladan, sahifa sarlavhasi, yon panel va altbilgi kabi elementlar bir xil bo'lib qoladi.
Bu yerda anʼanaviy model bilan bogʻliq muammo shundaki, biz sahifaning faqat bir qismini yangilashimiz kerak boʻlsa ham, butun sahifani olishimiz va yuklashimiz kerak boʻladi. Bu samarasiz va yomon foydalanuvchi tajribasiga olib kelishi mumkin.
Shunday qilib, an'anaviy model o'rniga, ko'plab veb-saytlar serverdan ma'lumotlarni so'rash va sahifani yuklamasdan sahifa mazmunini yangilash uchun JavaScript API'laridan foydalanadi. Shunday qilib, foydalanuvchi yangi mahsulotni qidirganda, brauzer faqat sahifani yangilash uchun zarur bo'lgan ma'lumotlarni so'raydi - masalan, ko'rsatiladigan yangi kitoblar to'plami.
Bu erda asosiy API Fetch API hisoblanadi . Bu ma'lum resurslarni olish uchun serverga HTTP so'rovini yuborish uchun sahifada ishlaydigan JavaScript-ni yoqadi . Server ularni taqdim etganda, JavaScript odatda DOM manipulyatsiyasi API laridan foydalanib sahifani yangilash uchun maʼlumotlardan foydalanishi mumkin . So'raladigan ma'lumotlar ko'pincha JSON bo'lib, u tuzilgan ma'lumotlarni uzatish uchun yaxshi formatdir, lekin HTML yoki shunchaki matn ham bo'lishi mumkin.
Bu Amazon, YouTube, eBay va boshqalar kabi ma'lumotlarga asoslangan saytlar uchun keng tarqalgan namunadir. Ushbu model bilan:
Sahifani yangilash ancha tezroq va sahifa yangilanishini kutishingiz shart emas, ya'ni sayt tezroq va sezgirroq bo'ladi.
Har bir yangilanishda kamroq ma'lumotlar yuklab olinadi, bu kamroq o'tkazish qobiliyatini anglatadi. Bu keng polosali ulanishda ish stolida unchalik katta muammo bo'lmasligi mumkin, lekin bu mobil qurilmalarda va hamma joyda tezkor internet xizmati mavjud bo'lmagan mamlakatlarda katta muammo.
Eslatma: Dastlabki kunlarda ushbu umumiy texnika asinxron JavaScript va XML ( Ajax ) nomi bilan tanilgan, chunki u XML ma'lumotlarini so'rashga moyil edi. Odatda bu kunlarda bunday emas (siz JSON so'rash ehtimoli ko'proq), lekin natija hali ham bir xil va "Ajax" atamasi hali ham texnikani tasvirlash uchun ishlatiladi.
Vaziyatni yanada tezlashtirish uchun ba'zi saytlar foydalanuvchining kompyuterida aktivlar va ma'lumotlar birinchi marta so'ralganda saqlaydi, ya'ni keyingi tashriflarda sahifa har safar yuklanganda yangi nusxalarni yuklab olish o'rniga mahalliy versiyalardan foydalanadi. Kontent serverdan faqat yangilangandan keyin qayta yuklanadi.
Fetch API
Keling, Fetch API-ning bir nechta misollarini ko'rib chiqaylik.
Matn kontenti olinmoqda
Bu misol uchun biz bir nechta turli matnli fayllardan maʼlumotlarni soʻraymiz va ulardan kontent maydonini toʻldirish uchun foydalanamiz.
Ushbu fayllar seriyasi bizning soxta ma'lumotlar bazasi sifatida ishlaydi; Haqiqiy dasturda ma'lumotlar bazasidan ma'lumotlarni so'rash uchun PHP, Python yoki Node kabi server tomonidagi tildan foydalanish ehtimoli ko'proq bo'ladi. Biroq, bu erda biz buni sodda saqlashni va mijoz tomoniga e'tibor qaratmoqchimiz.
Ushbu misolni boshlash uchun fetch-start.html ning mahalliy nusxasini va to'rtta matnli faylni - verse1.txt , verse2.txt , verse3.txt va verse4.txt ni kompyuteringizdagi yangi katalogga yarating. Ushbu misolda, ochiladigan menyuda tanlangan she'rning boshqa bandini (siz buni yaxshi bilishingiz mumkin) keltiramiz.
Element ichida
|
