AJAX İle Öneri

AJAX Öneri Örneği
Aşağıdaki ajax örneğinde, bir kullanıcı standart bir HTML formuna
veri girerken web sayfasının sunucu ile nasıl iletişim kurabileceğini
göreceğiz.

Bir isim girin

İsim:

Öneriler:

Örneğin açıklaması - HTML Formu

Yukarıdaki form aşağıdaki HTML koduyla oluşturulmuştur:

<form> İsim:<input type="text" id="txt1"onkeyup="showHint(this.value)"></form>
<p>Öneriler: <span id="txtHint"></span></p>

Gördüğünüz gibi bu "txt1" adında bir giriş alanı içeren basit bir HTML formudur.
Giriş alanı için tanımlanan olay niteliği onkeyup olayı (basılı olan
bir tuş bırakıldığında) tarafından tetiklenmek üzere bir işlev tanımlar.
Formun altındaki paragraf imi "txtHint" adında bir span imi içerir.
Bu im sunucudan gelen veri için bir yer tutucu olarak kullanılmaktadır.
Kullanıcı veri girişi yaptığında "showHint()" adında bir işlev
çalıştırılır. Bu işlevin çalıştırılması "onkeyup" olayı tarafından
tetiklenir. Başka bir deyişle: Kullanıcı giriş alanındayken klavyedeki
bir tuştan parmağını her kaldırdığında showHint işlevine çağrı yapılır.

Örneğin açıklaması - showHint() İşlevi

showHint() , sayfanın <head> bölümünde tanımlanmış çok basit bir Javascript işlevidir.
İşlev aşağıdaki kodu içerir:

function showHint(str){if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; }xmlHttp=GetXmlHttpObject();if (xmlHttp==null) { alert ("Your browser does not support AJAX!"); return; } var url="gethint.asp";url=url+"?q="+str;url=url+"&sid="+Math.random();xmlHttp.onreadystatechange=stateChanged;xmlHttp.open("GET",url,true);xmlHttp.send(null);}

Bu işlev giriş alanına her karakter girildiğinde çalışır.
Eğer metin alanında herhangi bir giriş varsa (str.length > 0) işlev aşağıdakileri yapar:

Sunucuya göndermek üzere url 'yi (dosya adını) tanımlar
Url 'ye giriş alanının değerini içeren bir parametre (q) ekler
Sunucunun önbelleğe alınmış bir sayfayı kullanmasını önlemek için rastgele bir sayı ekler
Bir XMLHTTP nesnesi oluşturur ve nesneye, herhangi bir değişiklik
tetiklendiğinde stateChanged adındaki bir işlevi çalıştırmasını söyler.
Verilen url ile XMLHTTP nesnesini açar.
Sunucuya bir HTTP isteği gönderir

Eğer giriş alanı boşsa, işlev txtHint alanının içeriğini temizler.

Örneğin açıklaması - GetXmlHttpObject() İşlevi

Yukarıdaki örnek GetXmlHttpObject() adında bir işlevi çağırır.
İşlevin amacı farklı tarayıcılar için farklı XMLHTTP nesneleri oluşturma problemini çözmektir.
İşlev aşağıda gösterilmektedir:

function GetXmlHttpObject(){var xmlHttp=null;try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); }catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } }return xmlHttp;}

Örneğin açıklaması - stateChanged() İşlevi

stateChanged() işlevi aşağıdaki kodu içerir:

function stateChanged() { if (xmlHttp.readyState==4){ document.getElementById("txtHint").innerHTML=xmlHttp.responseText;}}

XMLHTTP nesnesinin durumunun her değişmesinde stateChanged() işlevi çalışır.
Durum 4 ("işlem tamam") olduğunda txtHint yer tutucusunun içeriği responseText ile doldurulur.

Favorilerine al ya da arkadaşlarınla paylaş:

Yeni yorum gönder

solidedit · xmlhttprequest · grad · CSS · ajax php örneği · ajax asp örneği · null · CAM · oxygen xml editor · ajax-tr · ex · ajax ve xml\'e giriş · ajax html sayfası · planesurf · http istemleri · ajax tarayıcı desteği · ajax ile sunucuya istek göndermek · asenkron · statechanged · xmlhttprequest nedir · javascript · senkron · katı model · http · ajax nedir · xml ile çalışmak · activexobject · em · css birimleri · ajax puanlama uygulaması ·

Anket

Son Konular

2012-04-10 00:53 - Chrome Pili daha çabuk bitiriyor
2012-03-22 19:47 - Geliştirdiğin kodları satmak ister misin
2012-02-12 23:21 - SMF forumu vbulletin foruma aktarmak
2011-12-14 21:50 - Motorlu araçlar otomobil vergisi sorgulama
2011-12-14 21:47 - Sorgulamalar
2011-12-11 14:33 - Ben az önce ne arayacaktım
2011-09-10 22:51 - DSLR Fotograf Makinası sınıflandırması
2011-09-09 17:33 - ‘Crop Factor’ Nedir, hakkında bilgi
2011-09-09 17:30 - Fotograf Rehberi
2011-08-20 21:30 - Samsung LEDTV'lerde .SRF ve XFS süprizi
2011-08-19 00:45 - 2011 yılının web tasarım trendleri
2011-04-09 20:18 - Alan adları gerçek isim sahiplerine verilecek!
2011-01-13 01:43 - SEO İçin Dikkat Edilmesi Gereken Hususlar
2011-01-13 01:42 - Meta tag SEO Optimization
2011-01-13 01:41 - Google Adsense Hakkında Detaylı Bilgi
2011-01-13 01:40 - Soru Ve Cevaplar ile Google Adsense
2011-01-13 01:39 - Arama motoru Google ve Pagerank
2011-01-13 01:38 - Seo Sözlüğü
2011-01-13 01:37 - Google Arama Özellikleri
2011-01-13 01:36 - Adsense Reklam Yerleşimi
2011-01-13 01:35 - Robots.txt Dosyası Kullanım Robotları Yölendirme Kontrol
2011-01-13 01:34 - Sitenizin Google ve Web deki Yeri
2011-01-13 01:33 - Arama Motoru Bilgi ve İpuçları
2011-01-13 01:31 - Arama Motorları Teknikleri
2011-01-13 01:29 - Google Pagerank Detaylı Anlatım
2011-01-13 01:27 - Sitenize Ziyaretçiler En Çok Hangi Kelimeler İle Gelmiş
2011-01-13 01:25 - Pagerank Nedir?
2011-01-13 01:19 - Fireworks Shadow and Glow
2011-01-13 01:18 - Fireworks Sharpen
2011-01-13 01:16 - Fireworks Other
2011-01-13 01:13 - Fireworks Blur
2011-01-13 01:09 - Fireworks Bevel and Emboss
2011-01-13 01:05 - Fireworks Adjust Color
2011-01-13 01:03 - Fireworks Save as Style
2011-01-13 00:58 - Fireworks Text Menüsü
2011-01-13 00:54 - Fireworks Select Menüsü
2011-01-13 00:54 - Fireworks Modify Menüsü
2011-01-13 00:51 - Fireworks View Menüsü
2011-01-13 00:18 - Fireworks Edit Menüsü
2011-01-13 00:16 - Fireworks File Menüsü
2011-01-13 00:05 - İnternet - Web Tarayıcılar (Browser)
2011-01-13 00:04 - İnternet - Web Server Yazılımları
2011-01-13 00:03 - İnternet ve Web İlişkisi
2011-01-13 00:02 - İnternette Kullanılan Protokoller
2011-01-13 00:01 - İnternet - World Wide Web (WWW) Nedir?
2011-01-13 00:00 - İnternet - URL nedir?
2011-01-12 23:43 - İnternet Backorder Nedir?
2011-01-12 23:34 - İnternet - Virüs Nedir?
2011-01-12 23:32 - İnternet Paypal nedir? Nasıl Kullanılır?
2011-01-12 23:31 - İnternet - DNS Nedir?

Günün Konuları

c# . javascript . C . xmlhttprequest . xml . xmlhttprequest nedir . c# ile yazma . c# kod çalıştırma . while . c# kodları . integer . c# string . c# tipler . value . type . reference type . console . const . decimal . boolean . writelene . printf . include . scanf . ajax nedir . http . http istemleri . ajax örneği . ajax tarayıcı desteği . activexobject . ajax ile sunucuya istek göndermek . null . showhint . getxmlhttpobject . statechanged . ajax php örneği . ajax asp örneği . ajax html sayfası . c# doğuşu . c# programlama sanatı . c# atama işlemleri . c# kuralları . c# türlerin tanımlanması . int . programlama . c# program kodları . c# döngü . c# ile ekrana yazı yazdırmak . c# aritmetik . c# operatörler . c# int . casting . byte . c# console . c# konsoldan veri girişi . static void main . c# decimal veri tipi . c# kayar nokta verileri . IEEE . c# yazı biçimlendirme . currency . general . c# char . compareTo . equals . c# while döngüsü . c# for döngüsü . c# foreach döngüsü . döngüler . hata yakalama . catch . pperatörler . .net framework . delphi . c++ builder . write . c# deki string dönüşümler . C nedir . C fonkisyonlar . getch .