Milli Eğitim Bakanlığı Eğitek Haydar TUNA Teknik Öğretmen ve Yazar PHP ve Ajax Milli Eğitim Bakanlığı Eğitek Haydar TUNA Teknik Öğretmen ve Yazar Not eklemek için tıklatın

Giriş AJAX Teknolojisi Avantaj ve Dezavantajları Dünyadan Örnek Uygulamalar HTML Form İşleme JavaScript ile Form İşleme DOM Modeli JavaScript ve Ajax PHP ve Ajax ile Örnek Uygulamalar Sununun izleyicilere yararı: Yetişkin öğrenciler, neden ve ne kadar önemli olduğunu bildikleri bir konuyla daha çok ilgilenirler. Sunucunun konudaki uzmanlık düzeyi: Bu alanda kısa kimlik bilgilerini veya katılanların sizi neden dinlemeleri gerektiğini belirtin.

AJAX Teknolojisi Asynchronous JavaScript and XML kısaltması Tek başına bir teknoloji değildir. JavaScript ile CGI dillerine istekte bulunur. XMLHTTPRequest nesnesi yaratılır. GET ya da POST metoduyla parametre gönderilir. CGI Programı cevabı döndürür. JavaScript dönen cevabı işler. Sayfanın istenen yeri güncellenir. Bu güncelleme işlemi DOM ile daha kolay. Örnek hedefler Aşağıdakileri yapabilirsiniz: Ekip Web sunucusuna dosya kaydedebilirsiniz Ekip Web sunucusunda dosyaları farklı konumlara taşıyabilirsiniz Ekip Web sunucusunda dosya paylaşabilirsiniz

Avantaj ve Dezavantajları Bant genişliğini düşürür. Farklı platformlarda çalışır. İstekte gecikmeler meydana gelebilir. Gecikmeler animasyonla gösterilir. XMLHttpRequest nesnesine erişimde farklılıklar. Microsoft.XMLHTTP ve XMLHttpRequest JavaScript ile tarayıcı tespit edilerek çözülür. Tarayıcı History bilgisine işlenmez. Grafik tabanlı web tarayıcılarında çalışır. Lynx gibi metin tabanlı tarayıcılarda çalışmaz. Örnek hedefler Aşağıdakileri yapabilirsiniz: Ekip Web sunucusuna dosya kaydedebilirsiniz Ekip Web sunucusunda dosyaları farklı konumlara taşıyabilirsiniz Ekip Web sunucusunda dosya paylaşabilirsiniz

Dünyadan Örnek Uygulamalar 1 Örnek hedefler Aşağıdakileri yapabilirsiniz: Ekip Web sunucusuna dosya kaydedebilirsiniz Ekip Web sunucusunda dosyaları farklı konumlara taşıyabilirsiniz Ekip Web sunucusunda dosya paylaşabilirsiniz

Dünyadan Örnek Uygulamalar 2 Örnek hedefler Aşağıdakileri yapabilirsiniz: Ekip Web sunucusuna dosya kaydedebilirsiniz Ekip Web sunucusunda dosyaları farklı konumlara taşıyabilirsiniz Ekip Web sunucusunda dosya paylaşabilirsiniz

Dünyadan Örnek Uygulamalar 3 Örnek hedefler Aşağıdakileri yapabilirsiniz: Ekip Web sunucusuna dosya kaydedebilirsiniz Ekip Web sunucusunda dosyaları farklı konumlara taşıyabilirsiniz Ekip Web sunucusunda dosya paylaşabilirsiniz

Dünyadan Örnek Uygulamalar 4 Örnek hedefler Aşağıdakileri yapabilirsiniz: Ekip Web sunucusuna dosya kaydedebilirsiniz Ekip Web sunucusunda dosyaları farklı konumlara taşıyabilirsiniz Ekip Web sunucusunda dosya paylaşabilirsiniz

Dünyadan Örnek Uygulamalar 5 Örnek hedefler Aşağıdakileri yapabilirsiniz: Ekip Web sunucusuna dosya kaydedebilirsiniz Ekip Web sunucusunda dosyaları farklı konumlara taşıyabilirsiniz Ekip Web sunucusunda dosya paylaşabilirsiniz

Dünyadan Örnek Uygulamalar 6 Örnek hedefler Aşağıdakileri yapabilirsiniz: Ekip Web sunucusuna dosya kaydedebilirsiniz Ekip Web sunucusunda dosyaları farklı konumlara taşıyabilirsiniz Ekip Web sunucusunda dosya paylaşabilirsiniz

Dünyadan Örnek Uygulamalar 7 Örnek hedefler Aşağıdakileri yapabilirsiniz: Ekip Web sunucusuna dosya kaydedebilirsiniz Ekip Web sunucusunda dosyaları farklı konumlara taşıyabilirsiniz Ekip Web sunucusunda dosya paylaşabilirsiniz

HTML Form İşleme <form name action method></form> Name formun adı Action formun gönderilecegi adres. Bu adres uzun URL yada lokaldeki CGI adresi Kullanılan method POST yada GET GET ile adres satırında değişkenler gözükür. POST ile adres satırında değişkenler gözükmez. Örnek hedefler Aşağıdakileri yapabilirsiniz: Ekip Web sunucusuna dosya kaydedebilirsiniz Ekip Web sunucusunda dosyaları farklı konumlara taşıyabilirsiniz Ekip Web sunucusunda dosya paylaşabilirsiniz

Form İşleme – GET Metodu Örnek hedefler Aşağıdakileri yapabilirsiniz: Ekip Web sunucusuna dosya kaydedebilirsiniz Ekip Web sunucusunda dosyaları farklı konumlara taşıyabilirsiniz Ekip Web sunucusunda dosya paylaşabilirsiniz

Form İşleme – GET Metodu Örnek hedefler Aşağıdakileri yapabilirsiniz: Ekip Web sunucusuna dosya kaydedebilirsiniz Ekip Web sunucusunda dosyaları farklı konumlara taşıyabilirsiniz Ekip Web sunucusunda dosya paylaşabilirsiniz

Form İşleme – POST Metodu Örnek hedefler Aşağıdakileri yapabilirsiniz: Ekip Web sunucusuna dosya kaydedebilirsiniz Ekip Web sunucusunda dosyaları farklı konumlara taşıyabilirsiniz Ekip Web sunucusunda dosya paylaşabilirsiniz

Form İşleme – POST Metodu Örnek hedefler Aşağıdakileri yapabilirsiniz: Ekip Web sunucusuna dosya kaydedebilirsiniz Ekip Web sunucusunda dosyaları farklı konumlara taşıyabilirsiniz Ekip Web sunucusunda dosya paylaşabilirsiniz

Form Elemanları - Metin Kutu <input type= "text" name= "kullanici" value= " " > Metin girişi için kullanılır. Maxlength özelligi ile girilen karakter sayısı sınırlanır. Örnek hedefler Aşağıdakileri yapabilirsiniz: Ekip Web sunucusuna dosya kaydedebilirsiniz Ekip Web sunucusunda dosyaları farklı konumlara taşıyabilirsiniz Ekip Web sunucusunda dosya paylaşabilirsiniz

Form Elemanları - Metin Kutu <input type= "password" name= "sifre" value= " " > Şifreli metin girişi için kullanılır. Maxlength özelligi ile girilen karakter sayısı sınırlanır. Örnek hedefler Aşağıdakileri yapabilirsiniz: Ekip Web sunucusuna dosya kaydedebilirsiniz Ekip Web sunucusunda dosyaları farklı konumlara taşıyabilirsiniz Ekip Web sunucusunda dosya paylaşabilirsiniz

Form Elemanları - Buton <input type= "submit" name= “b1" value= "Gönder" > Formu göndermeye yarar. Örnek hedefler Aşağıdakileri yapabilirsiniz: Ekip Web sunucusuna dosya kaydedebilirsiniz Ekip Web sunucusunda dosyaları farklı konumlara taşıyabilirsiniz Ekip Web sunucusunda dosya paylaşabilirsiniz

Form Elemanları - Buton <input type= “button" name= “b2" value= “Kontrol" > Genel amaçlı buton. JavaScript fonksiyonu çagırabilir diğerleri gibi. Örnegin onClick=“TestForm();” gibi Örnek hedefler Aşağıdakileri yapabilirsiniz: Ekip Web sunucusuna dosya kaydedebilirsiniz Ekip Web sunucusunda dosyaları farklı konumlara taşıyabilirsiniz Ekip Web sunucusunda dosya paylaşabilirsiniz

Form Elemanları - Buton <input type= “reset" name= “b3" value= “Temizle" > Formu temizler. Örnek hedefler Aşağıdakileri yapabilirsiniz: Ekip Web sunucusuna dosya kaydedebilirsiniz Ekip Web sunucusunda dosyaları farklı konumlara taşıyabilirsiniz Ekip Web sunucusunda dosya paylaşabilirsiniz

Form Elemanları – Radyo Buton <input type= “radio" name= “cinsiyet" value= “E" > Birden fazla seçenekten tekinin seçilmesi. Checked özelliği ile başlangıçta seçili gelme. Örnek hedefler Aşağıdakileri yapabilirsiniz: Ekip Web sunucusuna dosya kaydedebilirsiniz Ekip Web sunucusunda dosyaları farklı konumlara taşıyabilirsiniz Ekip Web sunucusunda dosya paylaşabilirsiniz

Form Elemanları – Onay Kutusu <input type= “checkbox" name= “kitap" value= “roman" > Birden fazla seçenegin aynı anda seçilmesi. Checked özelliği ile başlangıçta seçili gelme. Örnek hedefler Aşağıdakileri yapabilirsiniz: Ekip Web sunucusuna dosya kaydedebilirsiniz Ekip Web sunucusunda dosyaları farklı konumlara taşıyabilirsiniz Ekip Web sunucusunda dosya paylaşabilirsiniz

Form Elemanları – Onay Kutusu <input type= “checkbox" name= “kitap[]" value= “roman" > Dizi şeklinde gönderilirse birden fazla seçenek işlenebilir. Örnek hedefler Aşağıdakileri yapabilirsiniz: Ekip Web sunucusuna dosya kaydedebilirsiniz Ekip Web sunucusunda dosyaları farklı konumlara taşıyabilirsiniz Ekip Web sunucusunda dosya paylaşabilirsiniz

Form Elemanları - Açılır Kutu <select name="kardessayi"> <option value="0" checked>Tek Çocuğum</option> Checked ile başlangıçta seçili gelme. Örnek hedefler Aşağıdakileri yapabilirsiniz: Ekip Web sunucusuna dosya kaydedebilirsiniz Ekip Web sunucusunda dosyaları farklı konumlara taşıyabilirsiniz Ekip Web sunucusunda dosya paylaşabilirsiniz

JavaScript Form İşleme Form elemanlarına document.formadi.nesneadi.ozellik Nesnenin özellik ve metodlarına erişilir. Örnek hedefler Aşağıdakileri yapabilirsiniz: Ekip Web sunucusuna dosya kaydedebilirsiniz Ekip Web sunucusunda dosyaları farklı konumlara taşıyabilirsiniz Ekip Web sunucusunda dosya paylaşabilirsiniz

DOM Modeli Bütün HTML eleman document.getElementById(‘nesneadi’).ozellik Nesnenin metod ve özelliklerine erişilir. Örnek hedefler Aşağıdakileri yapabilirsiniz: Ekip Web sunucusuna dosya kaydedebilirsiniz Ekip Web sunucusunda dosyaları farklı konumlara taşıyabilirsiniz Ekip Web sunucusunda dosya paylaşabilirsiniz

JavaScript ve Ajax Öncelikle Ajax nesnesi yaratılır. Tarayıcıya göre Ajax nesnesi yaratılır. Örnek hedefler Aşağıdakileri yapabilirsiniz: Ekip Web sunucusuna dosya kaydedebilirsiniz Ekip Web sunucusunda dosyaları farklı konumlara taşıyabilirsiniz Ekip Web sunucusunda dosya paylaşabilirsiniz

JavaScript ve Ajax GET istegi Ajax nesnesi ile istekte bulunur. Sonuçların geri döndüreleceği JavaScript fonksiyonu belirlenir. Örnek hedefler Aşağıdakileri yapabilirsiniz: Ekip Web sunucusuna dosya kaydedebilirsiniz Ekip Web sunucusunda dosyaları farklı konumlara taşıyabilirsiniz Ekip Web sunucusunda dosya paylaşabilirsiniz

Ajax İsteği Sonuçları İşlenir readyState = 4 program parçası ile veri alışverişi sona erdi. status = 200 Başarılı bir şekilde istek tamamlandı. Örnek hedefler Aşağıdakileri yapabilirsiniz: Ekip Web sunucusuna dosya kaydedebilirsiniz Ekip Web sunucusunda dosyaları farklı konumlara taşıyabilirsiniz Ekip Web sunucusunda dosya paylaşabilirsiniz

Ajax Nesnesi readyState Durumları Ne anlama geldiği? Program parçası ile veri alışverişi henüz başlamadı. 1 Program parçasına veri gönderiliyor. 2 Program parçasına veri gönderildi. 3 Program parçası ile veri alışverişi devam ediyor. 4 Program parçası ile veri alışverişi sona erdi. Örnek hedefler Aşağıdakileri yapabilirsiniz: Ekip Web sunucusuna dosya kaydedebilirsiniz Ekip Web sunucusunda dosyaları farklı konumlara taşıyabilirsiniz Ekip Web sunucusunda dosya paylaşabilirsiniz

JavaScript ve Ajax POST istegi Ajax nesnesi ile istekte bulunur. send metodunda null yerine değişken isimleri yazılır. Örnek hedefler Aşağıdakileri yapabilirsiniz: Ekip Web sunucusuna dosya kaydedebilirsiniz Ekip Web sunucusunda dosyaları farklı konumlara taşıyabilirsiniz Ekip Web sunucusunda dosya paylaşabilirsiniz

Ajax ile Örnek Uygulamalar Uygulamalı tanıtım aşaması