AJAX veya Ajax, Asenkron JavaScript ve XML'dir. İstemci tarafında tüm web sayfasını yeniden yüklemeden bir sunucu ile veri alışverişi yapmak ve bir web sayfasının bir bölümünü güncellemek için kullanılır. Veri alışverişi ve güncellenmesi sırasında mevcut web sayfasının görüntülenmesi ve davranışı hiç etkilenmez. Ajax ayrıca, işaretlemek, stil vermek ve kullanıcının web sayfasındaki bilgilerle etkileşime girmesine izin vermek için kullanılan HTML, CSS, DOM ve JavaScript'e sahip bir teknoloji grubu olarak kabul edilir. Bu yazıda, Notepad++ kullanarak adım adım Ajax adımlarında basit bir program nasıl yazılır gösterilecektir. HTML, DOM, JavaScript ve yerel bir Web sunucusu veya uzak Web Sunucusu hakkında bazı temel bilgiler gereklidir. Bu makalede bir test için WampServer kullanılmıştır.
adımlar
Yöntem 1/2: Kodlama
Adım 1. Bir Ajax programı yazmak için bir resim hazırlayın
Resmi, Ajax programını görüntüleyen html ve metin dosyalarınızı kaydedeceğiniz klasöre kaydedin. Bu yazıda WampServer'ı kurduğunuz “www” dizini altındaki “wamp” klasörünün içinde “ProgramInAjax” dizini kuruluyor.
Adım 2. Herhangi bir metin düzenleyiciyi açın
Bu makalede metin düzenleyici olarak Notepad++ kullanılmıştır.
Adım 3. Metin düzenleyicide yeni bir dosya oluşturun
Aşağıdakileri yazın:
Ah ah! Sarı çiçek nereye gitti?
Html etiketinin içine istediğinizi yazabilirsiniz.
Adım 4. Dosyayı “ajax-data.txt” adıyla bir metin belgesi olarak kaydedin
” Aslında dosyaya istediğiniz ismi verebilirsiniz ancak bu satırdaki kodlamaya aynı dosya adını girdiğinizden emin olun:
xmlhttp.open("GET", "ajax-data.txt", true);
Ancak, daha büyük ve daha görünmez görünmesi için başlık için HTML etiketi kullanılır.
Adım 5. Bir web sayfası için yeni bir dosya oluşturun
Bu dosya, Ajax programını bir Web tarayıcısında görüntülemek için bir HTML dosyası içindir.
Adım 6. Aşağıdaki kodu kopyalayın:
Benden İlk Ajax Programım Ajax kodunu aşağıya koyun.Çiçeğin kaybolmasını sağlamak için aşağıdaki düğmeyi tıklayın
Adım 7. Dosyayı kaydedin
Menü çubuğundaki kaydet düğmesine tıklayın. "Farklı Kaydet" kutusu açık. Belgeniz için bir ad girin. Bu makalede, dosyanın adı “index” dir.
Adım 8. Dosya uzantısını seçmek için açılır oku tıklayın
"Kayıt türü" alanında, dosya uzantısını seçmek için açılır oku tıklayın.
Adım 9. “Köprü Metni İşaretleme Dili dosyasını seçin
” Parantez içinde “html” olduğundan emin olun. “html”yi seçtikten sonra kaydet'e tıklayın.
Adım 10. HTML dosyasını bir Web tarayıcısında test edin
Web sayfasını bir web tarayıcısında açın. Üst menü çubuğunda "Çalıştır" a gidin. Tıklayın ve “Chrome'da Başlat”ı veya sisteminizde kurulu olan herhangi bir tarayıcıyı seçin. Bu makaledeki testler için Google Chrome kullanılmaktadır. Notepad++ içinde kurulu başka tarayıcılarınız olabilir. Favori tarayıcınızı seçebilirsiniz. Başka bir seçenek olarak, ekranın altındaki görev çubuklarındaki WampServer simgesine tıklayıp “Localhost”u seçebilirsiniz. Dizininizi orada görmeli ve dizin dosyasına tıklamalısınız.
Adım 11. Komut dosyasını test etmek için resmin altındaki düğmeye tıklayın
Adım 12. Son web sayfanız
Web sayfanız başlangıçta metin dosyasına girdiğiniz bilgilerle yenilenmelidir. Çiçek ve başlık, “Oh oh! Sarı çiçek nereye gitti?”
Yöntem 2/2: Kod Açıklama
Adım 1. Gövde bölümü
HTML'nin gövdesinde "div" bölümü ve bir düğme bulunur. Bu bölüm, sunucudan döndürülen bilgileri görüntülemek için kullanılacaktır. Düğme, tıklandığında “loadXMLDoc()” adlı bir işlevi çağırır.
Benden İlk Ajax Programım Ajax programını test etmek için buraya bir resim gelir.Çiçeğin kaybolmasını sağlamak için aşağıdaki düğmeyi tıklayın
Buraya bir düğme geliyor
Adım 2. Baş bölümü
HTML dosyasının baş bölümü, “loadXMLDoc()” işlevini içeren bir komut dosyası etiketine sahiptir.
Benden İlk Ajax Programım Ajax kodunu aşağıya koyun.
Adım 3. Daha Fazla Açıklama
Ajax'ın en önemli özelliği XMLHttpRequest nesnesidir. Sunucuyla veri alışverişi yapmak için kullanılır ve tüm modern tarayıcılar nesneyi destekler.
- Bir XMLHttpRequest() nesnesi oluşturmak için kullanılan sözdizimi değişken=new XMLHttpRequest(); ancak aynı zamanda, bir ActiveX nesnesi kullanan eski Internet Explorer sürümlerini (IE5 ve IE6) oluşturmak için sözdizimi değişken=new ActiveXObject("Microsoft. XMLHTTP"); şeklindedir.
- Tüm modern tarayıcıları işlemek için, tarayıcıların XMLHttpRequest nesnesini destekleyip desteklemediğini kontrol etmesi gerekir. Varsa, bir XMLHttpRequest nesnesi oluşturur. Olmazsa, bunun için bir ActiveX nesnesi yaratacaktır.
- Ardından sunucuya bir istek gönderir. “open()” ve “send()” adlı XMLHttpRequest nesnesinin yöntemi kullanılacaktır. xmlhttp.open("GET", "ajax_info.txt", true); xmlhttp.send();.
İpuçları
- Sonucu önizlemek için başka bir seçenek, favori tarayıcınızı açıp web sayfasını görüntülemek için web adres çubuğuna “localhost/ProgramInAjax” yazabilirsiniz. HTML dosyanızı “index.html” olarak adlandırırsanız web sayfasını görebilmeniz gerekir.
- Çalışmanız sırasında html dosyanızı daha sık kaydedin. Windows kullanıcıları için Ctrl ve S tuşlarına aynı anda basmak daha fazla zaman kazandıracaktır.
- Kaydedilmiş HTML dosyanızı, resim ve veri metin dosyanızın bulunduğu yere eklediğinizden emin olun.
- Bir dosyayı adlandırdığınızda, bu adları koda eklediğinizde büyük/küçük harf duyarlıdır. Örneğin, "myImage", "MyImage" veya "myimage"den farklıdır.
