Milli Eğitim Bakanlığı Eğitek Haydar TUNA Teknik Öğretmen ve Yazar

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

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

Form İşleme – POST Metodu

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

<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

<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ı

Milli Eğitim Bakanlığı Eğitek Haydar TUNA Teknik Öğretmen ve Yazar

Benzer bir sunumlar

... konulu sunumlar: "Milli Eğitim Bakanlığı Eğitek Haydar TUNA Teknik Öğretmen ve Yazar"— Sunum transkripti:

Benzer bir sunumlar

Proje hakkında

Geri bildirim

Giriş

Sosyal ağ üzerinden giriş yapmak:

Milli Eğitim Bakanlığı Eğitek Haydar TUNA Teknik Öğretmen ve Yazar

Benzer bir sunumlar

... konulu sunumlar: "Milli Eğitim Bakanlığı Eğitek Haydar TUNA Teknik Öğretmen ve Yazar"— Sunum transkripti:

Benzer bir sunumlar

Proje hakkında

Geri bildirim