Ajaxda necə proqramlaşdırılır (şəkillərlə)

Mündəricat:

Ajaxda necə proqramlaşdırılır (şəkillərlə)
Ajaxda necə proqramlaşdırılır (şəkillərlə)

Video: Ajaxda necə proqramlaşdırılır (şəkillərlə)

Video: Ajaxda necə proqramlaşdırılır (şəkillərlə)
Video: 5- Paragraf Ayarları (Girinti, Aralık, Satır Aralığı, Hizalama) 2024, Aprel
Anonim

AJAX və ya Ajax asinxron JavaScript və XML -dir. Bir server ilə məlumat mübadiləsi və bütün səhifəni müştəri tərəfində yenidən yükləmədən veb səhifənin bir hissəsini yeniləmək üçün istifadə olunur. Məlumat mübadiləsi və yenilənməsi zamanı mövcud veb səhifənin görünüşünə və davranışına heç bir müdaxilə edilmir. Ajax, istifadəçinin veb səhifədəki məlumatlar ilə ünsiyyət qurmasına, tərtib etməsinə və istifadəsinə imkan verən HTML, CSS, DOM və JavaScript -ə malik bir qrup texnologiya hesab olunur. Bu yazıda, Notepad ++ istifadə edərək addımlarla Ajax -da sadə bir proqramın necə yazılacağını göstərəcək. HTML, DOM, JavaScript və yerli bir Web server və ya uzaq Web Server haqqında bəzi əsas biliklər tələb olunur. Bu yazıda test üçün WampServer istifadə olunur.

Addımlar

Metod 1 /2: Kodlaşdırma

3929304 1
3929304 1

Addım 1. Ajax proqramı yazmaq üçün şəkil hazırlayın

Şəkli, Ajax proqramını əks etdirən html və mətn fayllarınızı saxlayacağınız qovluqda saxlayın. Bu yazıda, "ProgramInAjax" qovluğu, "wamp" qovluğunun içərisində WampServer qurduğunuz "www" qovluğunun altında qurulur.

3929304 2
3929304 2

Addım 2. Hər hansı bir mətn redaktorunu açın

Notepad ++ bu məqalədə mətn redaktoru kimi istifadə olunur.

3929304 3
3929304 3

Addım 3. Mətn redaktorunda yeni bir fayl yaradın

Aşağıdakıları yazın:


Oh oh! Sarı çiçək hara getdi?

İstədiyiniz hər şeyi html tagına yaza bilərsiniz.

3929304 4
3929304 4

Addım 4. Dosyanı “ajax-data.txt

” Əslində, istədiyiniz hər hansı bir faylı adlandıra bilərsiniz, ancaq bu faylın kodlaşdırılmasına eyni fayl adını daxil etdiyinizə əmin olun:

xmlhttp.open ("GET", "ajax-data.txt", doğru);

Bununla birlikdə, HTML etiketləri başlıq üçün istifadə olunur ki, daha böyük və görünməz görünsün.

3929304 5
3929304 5

Addım 5. Bir veb səhifəsi üçün yeni bir fayl yaradın

Bu fayl Ajax proqramını veb brauzerdə görmək üçün bir HTML faylı üçündür.

3929304 6
3929304 6

Addım 6. Aşağıdakı kodu kopyalayın:

  Mənim ilk Ajax Proqramım Aşağıya Ajax kodunu qoyun.  


Çiçəyin yox olması üçün aşağıdakı düyməni basın

3929304 7
3929304 7

Addım 7. Faylı qeyd edin

Menyu çubuğunda saxla düyməsini basın. "Kimi Saxla" qutusu açıqdır. Sənədiniz üçün bir ad daxil edin. Bu yazıda, faylın adı "indeks" dir.

3929304 8
3929304 8

Addım 8. Fayl uzantısını seçmək üçün açılan oxu basın

"Tür olaraq qeyd et" sahəsində, fayl uzantısını seçmək üçün açılan oxu vurun.

3929304 9
3929304 9

Addım 9. "Hyper Text Markup Language file" seçin

” Mötərizədə "html" olduğuna əmin olun. "Html" seçdikdən sonra saxla düyməsini basın.

3929304 10
3929304 10

Addım 10. HTML faylını veb brauzerdə sınayın

Veb səhifəni veb brauzerdə açın. Üst menyu çubuğunda "Çalış" a gedin. Bunun üzərinə vurun və "Chrome -da Başlat" ı və ya sisteminizdə quraşdırılmış hər hansı bir brauzeri seçin. Bu yazıda test üçün Google Chrome istifadə olunur. Notepad ++ içərisində başqa bir brauzeriniz ola bilər. Sevdiyiniz brauzeri seçə bilərsiniz. Başqa bir seçim, ekranın altındakı tapşırıq çubuğundakı WampServer simgesini vurub "Localhost" u seçə bilərsiniz. Kataloğunuzu orada görməli və indeks faylını tıklamalısınız.

Addım 11. Ssenarini sınamaq üçün şəklin altındakı düyməni basın

3929304 12
3929304 12

Addım 12. Son veb səhifəniz

Veb səhifəniz əvvəlində mətn faylına daxil etdiyiniz məlumatlarla yenilənməlidir. Çiçək və başlıq “Oh oh! Sarı çiçək hara getdi?”

Metod 2 /2: Kod izahı

3929304 13
3929304 13

Addım 1. Bədən hissəsi

HTML gövdəsində "div" bölməsi və bir düymə var. Bu bölmə serverdən qaytarılmış məlumatları göstərmək üçün istifadə olunacaq. Düymə tıklandığında "loadXMLDoc ()" adlı bir funksiyanı çağırır.

   Mənim ilk Ajax Proqramım   Ajax proqramını sınamaq üçün bura bir şəkil gedir.

Çiçəyin yox olması üçün aşağıdakı düyməni basın

Bura bir düymə gedir

3929304 14
3929304 14

Addım 2. Baş hissəsi

HTML faylının baş hissəsində "loadXMLDoc ()" funksiyasını ehtiva edən bir skript etiketi var.

 Mənim ilk Ajax Proqramım Aşağıya Ajax kodunu qoyun. 

Addım 3. Ətraflı İzahat

Ajax -ın ən vacib xüsusiyyəti XMLHttpRequest obyektidir. Server ilə məlumat mübadiləsi üçün istifadə olunur və bütün müasir brauzerlər obyekti dəstəkləyir.

  • XMLHttpRequest () obyekti yaratmaq sintaksisi dəyişkəndir = yeni XMLHttpRequest (); eyni zamanda ActiveX obyektindən istifadə edən Internet Explorer -in köhnə versiyalarını (IE5 və IE6) yaratmaq sintaksisi dəyişkəndir = yeni ActiveXObject ("Microsoft. XMLHTTP");
  • Bütün müasir brauzerləri idarə etmək üçün brauzerlərin XMLHttpRequest obyektini dəstəklədiyini yoxlamaq lazımdır. Bunu edərsə, bir XMLHttpRequest obyekti yaradır. Biri bunu etməzsə, bunun üçün bir ActiveX obyekti yaradacaq.
  • Sonra serverə bir sorğu göndərəcək. XMLHttpRequest obyektinin "open ()" və "send ()" adlı üsulu istifadə ediləcək. xmlhttp.open ("GET", "ajax_info.txt", doğru); xmlhttp.send ();

İpuçları

  • Nəticəni gözdən keçirmək üçün başqa bir seçim, sevdiyiniz brauzerinizi aça və veb səhifəsini göstərmək üçün veb adres çubuğuna "localhost/ProgramInAjax" yaza bilərsiniz. HTML faylınızı "index.html" adlandırsanız veb səhifəsini görə bilməlisiniz.
  • İşiniz zamanı html faylınızı daha tez -tez qeyd edin. Pəncərə istifadəçiləri üçün Ctrl və S düymələrinə eyni vaxtda basmaq daha çox vaxta qənaət edəcək.
  • Kaydedilmiş HTML faylınızı şəkil və məlumat mətn sənədinizin olduğu yerə əlavə etməyinizə əmin olun.
  • Bir faylı adlandırdığınızda, bu adları koda əlavə etdiyiniz zaman böyük hərflərə həssasdır. Məsələn, "myImage" "MyImage" və ya "myimage" dən fərqlidir.

Tövsiyə: