Ajaxda qanday dasturlash kerak (rasmlar bilan)

Mundarija:

Ajaxda qanday dasturlash kerak (rasmlar bilan)
Ajaxda qanday dasturlash kerak (rasmlar bilan)

Video: Ajaxda qanday dasturlash kerak (rasmlar bilan)

Video: Ajaxda qanday dasturlash kerak (rasmlar bilan)
Video: Ayol ...aloqadan qoniqqanini qanday bilish mumkin 2024, Aprel
Anonim

AJAX yoki Ajax - bu asenkron JavaScript va XML. Bu server bilan ma'lumotlar almashish va veb -sahifaning bir qismini mijoz tomonida qayta yuklamasdan yangilash uchun ishlatiladi. Ma'lumot almashish va yangilashda mavjud veb -sahifaning ko'rinishi va xatti -harakatlariga hech qanday to'sqinlik qilinmaydi. Ajax, shuningdek, HTML, CSS, DOM va JavaScript -ga ega bo'lgan texnologiyalar guruhi hisoblanadi, ular foydalanuvchini veb -sahifadagi ma'lumotlar bilan ishlash, uslublash va o'zaro muloqot qilish imkonini beradi. Ushbu maqolada, sizga Notepad ++ yordamida bosqichma -bosqich Ajax -da oddiy dasturni qanday yozishni ko'rsatib beradi. HTML, DOM, JavaScript va mahalliy veb -server yoki masofaviy veb -server haqida ba'zi asosiy bilimlar talab qilinadi. WampServer ushbu maqolada test uchun ishlatiladi.

Qadamlar

2 -usul 1: kodlash

3929304 1
3929304 1

Qadam 1. Ajax dasturini yozish uchun rasm tayyorlang

Ajax dasturini ko'rsatadigan html va matnli fayllarni saqlaydigan rasmni o'sha papkada saqlang. Ushbu maqolada, "ProgramInAjax" katalogi "wamp" papkasida, siz WampServer o'rnatgan "www" katalogi ostida o'rnatiladi.

3929304 2
3929304 2

Qadam 2. Har qanday matn muharririni oching

Notepad ++ ushbu maqolada matn muharriri sifatida ishlatiladi.

3929304 3
3929304 3

Qadam 3. Matn muharririda yangi fayl yarating

Quyidagilarni kiriting:


Oh oh! Sariq gul qaerga ketdi?

Siz xohlagan narsani html tagiga yozishingiz mumkin.

3929304 4
3929304 4

Qadam 4. Faylni "ajax-data.txt" nomi bilan matnli hujjat sifatida saqlang

” Aslida, siz xohlagan faylga nom berishingiz mumkin, lekin shu satrda kodlash uchun bir xil fayl nomini kiritganingizga ishonch hosil qiling:

xmlhttp.open ("GET", "ajax-data.txt", to'g'ri);

Biroq, HTML taglari sarlavha uchun ishlatiladi, shunda u kattaroq va ko'rinmas ko'rinadi.

3929304 5
3929304 5

Qadam 5. Veb -sahifa uchun yangi fayl yarating

Bu fayl HTML brauzerida Ajax dasturini veb -brauzerda ko'rish uchun mo'ljallangan.

3929304 6
3929304 6

Qadam 6. Quyidagi kodni nusxa ko'chiring:

  Mening birinchi Ajax dasturim Quyida Ajax kodini kiriting.  


Gulni yo'q qilish uchun quyidagi tugmani bosing

3929304 7
3929304 7

Qadam 7. Faylni saqlang

Menyu satrida saqlash tugmasini bosing. "Saqlash" qutisi ochiq. Hujjatingiz uchun nom kiriting. Ushbu maqolada fayl nomi "indeks" dir.

3929304 8
3929304 8

Qadam 8. Fayl kengaytmasini tanlash uchun ochiladigan o'qni bosing

"Turi sifatida saqlash" maydonida, kengaytmani tanlash uchun ochiladigan o'qni bosing.

3929304 9
3929304 9

Qadam 9. "Hyper Text Markup Language file" -ni tanlang

” Qavs ichida "html" borligiga ishonch hosil qiling. "HTML" ni tanlagandan so'ng saqlashni bosing.

3929304 10
3929304 10

10 -qadam. HTML -faylni veb -brauzerda tekshiring

Veb -sahifani veb -brauzerda oching. Yuqori menyu satrida "Ishga tushirish" -ga o'ting. Uni bosing va "Chrome -da ishga tushirish" -ni yoki tizimingizda o'rnatilgan brauzerni tanlang. Ushbu maqolada Google Chrome sinov uchun ishlatiladi. Notepad ++ da boshqa brauzerlar o'rnatilgan bo'lishi mumkin. Siz o'zingiz yoqtirgan brauzerni tanlashingiz mumkin. Boshqa variant, siz ekranning pastki qismidagi vazifalar panelidagi WampServer belgisini bosishingiz va "Localhost" ni tanlashingiz mumkin. U erda siz katalogni ko'rishingiz va indeks faylini bosishingiz kerak.

Qadam 11. Skriptni sinash uchun rasm ostidagi tugmani bosing

3929304 12
3929304 12

12 -qadam. Sizning oxirgi veb -sahifangiz

Sizning veb -sahifangiz boshida matnli faylga kiritilgan ma'lumotlar bilan yangilanishi kerak. Gul va sarlavhani "Oh oh!" Deb nomlangan yangi sarlavha bilan almashtirish kerak. Sariq gul qaerga ketdi?”

2 -ning 2 -usuli: Kodni tushuntirish

3929304 13
3929304 13

Qadam 1. Tana qismi

HTML -da "div" bo'limi va bitta tugma mavjud. Bu bo'lim serverdan qaytarilgan ma'lumotlarni ko'rsatish uchun ishlatiladi. Agar tugma bosilsa, "loadXMLDoc ()" funktsiyasini chaqiradi.

   Mening birinchi Ajax dasturim   Bu erda Ajax dasturini sinab ko'rish uchun rasm bor.

Gulni yo'q qilish uchun quyidagi tugmani bosing

Bu erda tugma bosiladi

3929304 14
3929304 14

Qadam 2. Bosh qismi

HTML faylining bosh qismida "loadXMLDoc ()" funktsiyasini o'z ichiga olgan skript yorlig'i mavjud.

 Mening birinchi Ajax dasturim Quyida Ajax kodini kiriting. 

Qadam 3. Batafsil tushuntirish

Ajax -ning eng asosiysi bu XMLHttpRequest obyekti. Bu server bilan ma'lumotlar almashish uchun ishlatiladi va barcha zamonaviy brauzerlar ob'ektni qo'llab -quvvatlaydi.

  • XMLHttpRequest () ob'ektini yaratish sintaksisi o'zgaruvchan = yangi XMLHttpRequest (); lekin ayni paytda ActiveX ob'ektidan foydalanadigan Internet Explorer eski versiyalarini (IE5 va IE6) yaratish sintaksisi o'zgaruvchan = yangi ActiveXObject ("Microsoft. XMLHTTP");.
  • Barcha zamonaviy brauzerlarni boshqarish uchun brauzerlar XMLHttpRequest ob'ektini qo'llab -quvvatlayotganligini tekshirish kerak. Agar shunday bo'lsa, u XMLHttpRequest ob'ektini yaratadi. Agar yo'q bo'lsa, u ActiveX ob'ektini yaratadi.
  • Keyin u serverga so'rov yuboradi. XMLHttpRequest ob'ektining "open ()" va "send ()" deb nomlangan usuli ishlatiladi. xmlhttp.open ("Oling", "ajax_info.txt", to'g'ri); xmlhttp.send ();.

Maslahatlar

  • Natijani oldindan ko'rishning yana bir varianti, siz sevimli brauzeringizni ochib, veb -sahifani ko'rsatish uchun veb -manzil satriga "localhost/ProgramInAjax" yozishingiz mumkin. Agar siz HTML faylingizni "index.html" deb nomlasangiz, siz veb -sahifani ko'rishingiz kerak.
  • Ish paytida html faylini tez -tez saqlang. Oyna foydalanuvchilari uchun Ctrl va S ni bir vaqtning o'zida bosish ko'proq vaqtni tejaydi.
  • O'zingizning saqlangan HTML faylingizni rasm va ma'lumotlar matnli fayli joylashgan joyga qo'shganingizga ishonch hosil qiling.
  • Faylni nomlaganingizda, bu nomlarni kodga qo'shsangiz, bu katta -kichik harflarga bog'liq. Masalan, "myImage" "MyImage" yoki "myimage" dan farq qiladi.

Tavsiya: