Türkiye (Türkçe)
Worldwide (English)
0850 780 4800
Bilgi Bankası
Destek Sistemi
Giriş Yap
Hesap Oluştur
Ajax Nedir? Ajaxı Oluşturan Bileşenler Nelerdir?
İçindekiler
- --son-kullan?c?-ekran?na-yans?t?lan-tüm-elemanlara,-yine-dom-ya-da-statik-olarak-atanabilen-komutlarla--attach&detachevent,-onclick="",-onkeyup=""--ça?r?lan-fonksiyonlar-ile-ya-da-di?er-ba?ka-fonksiyonlar-ile,-sunucu-tarafl?-veya-statik-olarak-haz?rlanm??--asp,-php,-xml-vs.--ta??y?c?-rolündeki-dosyalara-sorgu-gönderilmesi-ve-xml-ya-da-text-olarak-al?nan-verilerin-dom-arac?l???yla-yine-kullan?c?-ekran?na-ya-da-i?lemlere-yans?t?lmas?d?r.-tüm-bu-süreç-içerisinde-yeni-bir-url-yüklenmez,-fakat-istemcinin-ya-da-beti?in-komutu-yerine-getirilmi?-olur.3.-yap?ta?lar?gördü?ünüz-üzere-belirtti?imiz-süreç-içerisinde-en-az-üç-ayr?-scripting-dili-kullan?lmaktad?r.-e?er-sonuç-göze-de-hitap-etsin-ve-standartlar?m?z?-koruyal?m-derseniz-bunlara-css-ve-xhtml'yi-de-ekleyebiliriz.1.-javascript,2.-asp,-php-ve-di?erleri-(!)--atlanabilir-,3.-xml. ajax?n-temelinde-xmlhttprequest-nesnesi-yer-al?r.-ajax-uygulamalar?na-tak?lan-"masaüstü-web-uygulamalar?"--ki-bunu-yabanc?-makalelerde-pek-göremezsiniz--lakab?n?n-s?rr?-da,-bu-nesnede-gizlidir.-xmlhttprequest-nesnesi-bize,-kendisiyle-gönderilen-sorgular?,-ba?ka-bir-fonksiyon-içerisinde-yorumlama-imkan?-sa?lar.-bu-demektir-ki-xmlhttprequest-ile-bir-dosyaya-bir-sorgu-gönderilir,-al?nan-sonuç-ba?ka-bir-sayfa-içerisine-yüklenme-ihtiyac?-hissetmeden-kullan?l?r--peki?tirmeniz-aç?s?ndan-bu-sat?r?-dört-kere-okuyun,-bir-deftere-de-otuzbe?-defa-yaz?n-. microsoft-xmlhttprequest-nesnesini-internet-explorer-5-ile-bir-activex-bile?eni-olarak-sundu--bu-nedenle-ajax-beti?i-içeren-dosyalar?-do?rudan-açt???n?zda-güvenlik-uyar?s?-vermektedir-,-mozilla-en-uyumlu-sürümünü-mozilla-1.0'da,-netscape-7.0'da,-apple-ise-safari-1.2-üzerinde-çal??t?rabildi.-?irketlerin-hepsi-amerika'da-oldu?u-halde-oralarda-"kom?u-kom?unun-külüne-muhtaçt?r"-?eklinde-bir-atasözü-bulunmamas?ndan-belki,-el-birli?i-yap?pta-tek-bir-nesne-etraf?nda-toplanamad?lar.-bu-nedenle-sayd???m-taray?c?larda-xmlhttprequest-nesnesini-çe?itli-metodlarla-kullanabilmekteyiz--asl?nda-o-kadar-çok-de?iller-abart?yorum-biraz-. 3.1.-metodlar-1 mozilla-ve-safari-için;var-req-=-new-xmlhttprequest(); activex-için-(ms-ie);var-req-=-new-activexobject("microsoft.xmlhttp"); ?eklinde-xmlhttprequest-nesnesini-olu?turabilmekteyiz.-k?ll???-gördü?ünüz-üzere-illaki-bir-farkl?l?k-kompleksi-ortada-öylece-durmaktad?r.-nesne-metodlar?-?u-?ekilde;
metod
aç?klama
abort()
geçerli-iste?i-iptal-eder.
getallresponseheaders()
tüm-kar??l?k-ba?l?k-etiketilerini-ve-de?erlerini-string-olarak-elde-eder.
getresponseheader("ba?l?ketiketi")
verilen-ba?l?k-etiketinin-ta??d???-de?eri-string-olarak-elde-eder.
open("metod",-"adres"[,-asyncflag[,"username"[,-"password"]]])
sorgu-gönderilmeden-önce,-sorgunun-gönderilece?i-adresi,-gönderi-metodunu-ve-di?er-seçime-ba?l?-netilkleri-belirler.
send(içerik)
sorguyu-gönderir.-seçime-ba?l?-olarak-gönderilebilen-verileri-ve-dom-ile-yarat?lm??-verileri-de-gönderebilir.
setrequestheader("etiket",-"de?er")
gönderilen-sorguya-bir-etiket/de?er-ba?l???n?-ili?tirir.
tabloda-gösterilen-"metod"-verileri-çekmekte-kullanaca??m?z-http-metodunu-ifade-etmektedir.-bildi?iniz-gibi-html-ile-dosyalara-sorgu-gönderirken-iki-ayr?-yöntem-izliyoruz.-bunlardan-birincisi-do?rudan-sayfa-ad?n?-ça??r?ken-kulland???m?z-test.html?id=1234567890,-di?eri-ise-form-verilerini-göndermek-için-kulland???m?z-get-ve-post-metodlar?.-xmlhttprequest-nesnesi-ile-dosyalar?m?za-sorgu-gönderirken-de-yine-get-ve-post-metodlar?ndan-istedi?imiz-bir-tanesini-kullanmak-durumunday?z.-get-genellikle-dosyalara-do?rudan-sorgulama-maksad?yla-kullan?l?r.-Örne?in-bir-blog-uygulamas?nda-makaleler.asp?id=123-?eklindeki-sorguyu-get-kullanarak-gönderebiliriz.-fakat-sunucuya-veri-gönderece?imiz-ve-gönderdi?imiz-verilerin-toplam-boyutunun-512-byte'dan-fazla-oldu?u-zamanlarda-post-metodu-bizim-için-daha-uygun-olacakt?r.-post-metodunda-da-sayfa-adresine,-get-kullan?rkenki-gibi-fazladan-bir-sorgu-ekleyebiliriz. sorgunun-gönderime-haz?rlanmas?-durumunu--open(...)--belirten-metodun-üçüncü-özelli?i,-yani-asyncflag-gönderilen-i?in-e?-zamanl?-olmay???n?-belirler.-bu-özelli?in-de?eri-boolean,-yani-ya-true,-ya-da-false-olarak-belirlenir. geçerli-de?eri-de-olan-true-seçilirse-yap?lan-i?-e?-zamans?z-olarak-yürütülür.-e?er-bu-de?er-false-olarak-belirlenirse;-betik,-gönderdi?i-sorgunun-sunucu-taraf?ndan-yorumlanmas?n?-ve-bir-kar??l?k-verilmesini-bekler,-do?al-olarak-ta-yap?lan-hareketin,-mutlaka-istek-cevap-?ekline-dönü?türülmesi-sa?lan?r. bu-mant?kta-herhangi-bir-problem-görülmemesine-ra?men--do?al-olan?-bu-de?il-mi-i?te?-istemci-istek-gönderir,-sunucu-cevap-verir,-istemci-de-i?lemine-devam-edebilmek-için-sunucunun-cevab?n?-bekler--bu-metodun-kullan?lmas?-?ebeke-veya-sunucu-hatalar?-olu?umundaki-risk-pay?n?-artt?rmaktad?r.-bu-nedenle-yap?lan-i?in-e?-zamanl?-olmamas?-ve-istem-nesnesinin-onreadystatechange--halihaz?rdaki-durum-de?i?ti?inde...--hareketi-ile-kontrol-edilmesi-daha-güvenlidir. a?a??daki-genel-fonksiyon;-nesne-yarat?m?n?,-hareket-yöneticisinin-belirlenmesini-ve-bir-get-metodunun-kullan?lmas?n?-içeriyor.-fonksiyonda-genel-de?i?ken-olarak-kullan?lan-req-,-nesne-yarat?m?ndan-sonra--req.send()-sonras?--sunucunun-gönderdi?i-cevab?-da-yükleniyor.-burada-genel-bir-de?i?ken-kullanmam?z-bize,-sorgulaman?n-sonunda-elde-edilen-verileri,-beti?in-herhangi-bir-yerindeki-di?er-ba?ka-bir-fonksiyon-içerisinde-de-kullanabilme-imkan?-sa?l?yor.-nesneye-atanan-req.onreadystatechange-=-processreqchange;-özelli?i-ise,-istem-nesnesinin-halihaz?rdaki-durumunun-de?i?mesi-sonucunda--sunucunun-bir-cevap-vermesi-halihaz?rdaki-durumu-de?i?tirir--elde-edilen-de?i?iklikleri-processreqchange()-fonksiyonu-içerisinde-kullanabilmemize-olanak-tan?r.
var-req;function-loadxmldoc(url)-{ -req-=-false; -//-branch-for-native-xmlhttprequest-object -if(window.xmlhttprequest)-{ - -try-{ - - -req-=-new-xmlhttprequest(); -}-catch(e)-{ - - -req-=-false; -} -//-branch-for-ie/windows-activex-version -}-else-if(window.activexobject)-{ - -try-{ - -req-=-new-activexobject("msxml2.xmlhttp"); - -}-catch(e)-{ - -try-{ - - -req-=-new-activexobject("microsoft.xmlhttp"); - -}-catch(e)-{ - - -req-=-false; - -} - -} -} -if(req)-{ - -req.onreadystatechange-=-processreqchange; - -req.open("get",-url,-true); - -req.send(""); -}}
not:-genel-bir-?art-olarak,-cevap-veren-dosyan?n-content-type-de?erinin-text/xml-olmas?-gerekir.-bu-de?erin-text/plain-ya-da-text/html-olarak-gelmesi-durumunda-elde-edilen-veriler-responsetext-özelli?i-ile-al?narak-kullan?labilir.3.2.-Özellikler?stem-gönderilmeyi-müteakip;-betik,-uygulamaya-devam-etmek-için-gelen-cevap-üzerinde-bir-kaç-özelli?e-eri?ebilir.-bu-özellikler-de?i?tirilemez.
Özellik
aç?klama
onreadystatechange
halihaz?rdaki-durum-de?i?ikliklerini-i?ler.
readystate
nesne-durumunu-numerik-olarak-belirtir-:0-=-ba?lat?lamad?1-=-yükleniyor2-=-yüklendi3-=-etkile?imli4-=-tamamland?
responsetext
sunucu-cevab?n?-metin-olarak-elde-eder.
responsexml
sunucu-cevab?n?-dom-ile-etkile?imli-kullan?lmas?n?-sa?layacak-?ekilde-elde-eder--xml-verileri-
status
sunucu-cevab?-numaras?d?r.-"sayfa-bulunamad?"-hatas?-için-404-ya-da-sayfan?n-sorunsuz-yüklendi?ini-belirtmek-için-200-gibi.
statustext
numerik-olarak-elde-edilen-nesne-durumu-ile-beraber-gelen-metindir.
readystate-özelli?i-durum-de?i?ikli?i-fonksiyonu-içerisinde-kullan?larak,-sunucu-cevab?n?n-nesneye-yükledi?i--yani-nesne-durumu-sunucu-cevab?-ile-do?rudan-alakal?--durum-numaras?-ile-yap?lacak-i?lemlere-yön-verilir.-readystate-de?eri-sorgu-ve-sonuç-elde-etme-i?lem-devam-etmekte-iken-1'e,-i?lem-tamamland???nda-ise-4'e-e?itlenir.-bu-durumlar?n-incelenmesi-k?sm?na-processreqchange()-fonksiyonunda-iyice-de?inece?iz. bir-sonuç-elde-etti?imizden-emin-olabilmemiz-için-hala-bir-kaç-do?rulamaya-daha-ihtiyac?m?z-var.-Çünkü-her-ne-kadar-i?lem-tamamland?ktan-sonra-readystate-özelli?i-4'e-e?it-olsa-da,-bu-i?lemde-bir-hatan?n-meydana-gelip-gelmede?ini-ifade-etmez--belki-sql-sorgumuz-bir-hataya-sebep-oldu-ve-sayfa-http-500-iç-sunucu-hatas?-verdi-.-Çünkü-bu-durum-numaras?-sadece-sayfan?n-yüklenme-i?lemini-ifade-etmektedir.-??in-bu-k?sm?nda-status-ve-statustext-devreye-girer-ve-hiçbir-hata-meydana-gelmemi?se-status-özelli?i-200'e,-statustext-ise-ok'e--string--e?it-olur. sunucunun-gönderdi?i-sonuçlar-responsetext-ve-responsexml-özellikleri-ile-i?lemeye-haz?r-halde-elde-edilir.-responsetext-özelli?i,-al?nan-verinin-sadece-metin-olarak-bir-de?eri-oldu?unu-ifade-eder.-fakat-responsexml-ile-daha-güçlü-ve-zengin-bir-veri-ak???-sa?lan?r--verileri-responsexml-özelli?i-ile-alabilmek-için-cevap-veren-pozisyonundaki-dosyan?n-content-type-de?erinin-text/xml-olmas?-gerekir.-dosyalar?n-en-üstüne-php-için-header('content-type:-text/xml');,-asp-için-response.contenttype-=-"text/xml"-yaz?larak-ç?kt?n?n-xml'e-dönü?türülmesi-sa?lanabilir.-tabi-ki-hiyerar?inin-de-xml-dosyalar?na-uygun-düzenlenmesi-gerekir-. s?radaki-fonksiyonumuz-daha-önce-belirtti?im-gibi-onreadystatechange-ile-ça??rd???m?z-processreqchange()-fonksiyonudur.-burada-readystate-ve-status-özelliklerinin-ikisini-de-kullanarak-döküman?m?z?n-önce-yüklendi?ini,-sonra-da-sorunsuz-olarak-yüklendi?ini-sorguluyoruz.
function-processreqchange()-{ -//-readystate-de?eri-sayfan?n-yüklendi?ini-bildirmi?se... -if-(req.readystate-==-4)-{ -//-sayfa-sorunsuz-olarak-yüklenmi?se... -if-(req.status-==-200)-{ -//-...i?lemin-sorunsuz-olarak-tamamlanmas?-durumunda-yap?lmas?-istenen-i?lemler... -}-else-{ -alert("xml-verilerinin-al?nmas?-s?ras?nda-bir-hata-meydana-geldi:n"-+ -req.statustext); -} -}}
?ayet-sunucunuzun-cevap-verme-süresi-konusunda-endi?eleriniz-varsa-loadxmldoc()-fonksiyonunu-güncelleyerek-send()-metoduna-genel-bir-zaman-belirleyici-ekleyeblir,-processreqchange()-içerisinde-ba?lang?ç-zaman?ndan-sonra-halen-cevap-verilmemi?-süreyi-göz-önüne-alarak,-kendi-belirledi?iniz-bir-süre-zarf?n?-müteakip-req.abort()-metodunu-ça??rarak-i?lemi-durdurabilir-ve-ziyaretçiyi-i?lemin-gerçekle?emedi?i-konusunda-uyarabilirsiniz--bkz.-http://forum.zoque.net/showthread.php?t=20560&highlight=google-.4.-pratikolay?n-temelini-de?il-de,-ajax-denilen-?eyin-bu-kadar-ufak-olmas?n?-beklemiyordunuz-umar?m.-temeli-bu-kadar-ufak-olsa-dahi,-bu-önceleri-sadece-bir-nesne-olarak-ortaya-ç?kart?lan-yöntemin-neler-yapabilece?ini-bugün-canl?-canl?-görebiliyoruz.-bugün-ajax,-dom'un-html-üzerindeki-büyük-etkisi-sayesinde-çok-büyük-i?ler-ba?arabilmektedir--ki-geçenlerde-zimbra.com'u-gördüm-nutkum-tutuldu-.-?imdi-bunu-nas?l-yapt???na-de?inece?im.4.1.-dom-nedir?-2dom-denilen-?ey-asl?nda-o-kadarda-ürkütücü-bir?ey-de?ildir--doom'u-ça?r??t?rd???ndan-ürkütebildi?ini-gördüm-.-ak?llarda-bir-soru-i?areti-var.-javascript-ve-dom-tam-olarak-ayr?-?ey-de?iller.-bunu-k?sa-bir-örnekle-aç?klamak-istiyorum.
1.window.onload-=-function-{2. -var-links-=-document.getelementsbytagname("a");3. -var-containerlinks-=-document.createelement("div");4. -var-linkslister-=-document.createelement("ul");5.6. -for-(var-i=0;-i-<-links.length;-i++){7. - -var-linkitem-=-document.createelement("li");8. - - -linkitem.innerhtml-=-links[i].getattribute("href");9. - -linkslister.appendchild(linkitem);10. -}11. 12. -containerlinks.appendchild(linkslister);13.}
1.-window.onload-=-function(){-:-burada-window-nesnesinin-onload-hareketine-bir-fonksiyon-at?yoruz.-yani-pencerenin-yüklenmesiyle-birlikte-d??ar?dan-bir-etki-beklenmeden-bu-fonksiyonumuz-çal??maya-ba?layacak.2.-var-links-=-:-burada-links-ad?nda-bir-de?i?ken-tan?ml?yoruz.2.-document.getelementsbytagname("a")-:-document--d-ve-d-fark?-öenmlidir--arayüzü,-dom1-çekirde?i-ile-tan?mlanan-ilk-arayüzdür-ve-document,-nesne-uygulamas?nda-document-arayüzünde-nesne-yüklenicisi-pozisyonundad?r.-dom1-çekirde?inde-getelementsbytagname()-metodu-da-yine-document-arayüzü-üzerinde-tan?mlan?r.-getelementsbytagname()-ile-istenen-tag-ad?,-tüm-döküman-üzerinde-taran?r--nodelist-.-burada-"a"-ile-döküman-kaynak-kodundaki-tüm-ba?lant?lar?-elde-etmi?-oluyoruz.3.-document.createelement("div")-:-document-arayüzünde-tan?mlanm??-createelement-metodu-ile-döküman-üzerinde-istenen-tag-olu?turulabilir.6.-for-(var-i=0;-i-<-:-tipik-"for".."next"-döngüsü.6.-links.length-:-dom1-çekirde?i-ile-tan?mlanm??-bir-di?er-özellik-ise-lenght'dir.-bu-özellik-sayesinde-daha-önceden-elde-edilen-nodelist'lerin-bar?nd?rd???-eleman-say?lar?-elde-edilebilmektedir--javascript,-array-kullan?m?nda-lenght-özelli?ine-zaten-sahiptir-.8.-linkitem.innerhtml-=-:-element-arayüzünde-tan?mlanan-innerhtml-metodu-ile-elemanlar?n-bütün-içerik-metinleri-string-olarak-elde-edilir.-bir-de?ere-e?itlendi?i-taktirde-eleman-içeri?i-yeni-de?erle-de?i?ir.--linkitem.innerhtml-=-linkitem.innerhtml+"test"-ile-içeri?e-yeni-metin-eklenebilir-8.-links[i].getattribute("href")-:-element-arayüzünde-tan?mlanan-getattribute-metodu-ile-verilen-eleman?n-istenen-özelli?ine-atanan-de?er-elde-edilir.--Örne?in-
yürütülen-"&strsqlquery&"-sorgusu-s?ras?nda-bir-hata-meydana-geldi.
" - - - -response.end() - - -end-if - -end-function - - -strkey-=-trim(request.querystring("key")) - - -if-(-strkey-=-""-)-then-strkey-=-"abcdefgijklmnoprstuvyz" - - -call-openrec(objuserlist,"select-*-from-users-where-(name-like-'%"&strkey&"%'-or-surname-like-'%"&strkey&"%'-or-mail-like-'%"&strkey&"%');") - - -do-until-objuserlist.eof - - - -response.write-vbtab&""; - - - -listelement.setattribute("name",users[x].getattribute('name')); - - - -listelement.setattribute("href","javascript:;"); - - - -listelement.setattribute("onclick","document.getelementbyid('inputkey').value-=-this.name;"+ - - - -"document.getelementbyid('listusers').style.display-=-'none';"); - - -containerlist.appendchild(listelement); - -} - -if(document.getelementbyid("listusers")) - - -container.removechild(document.getelementbyid("listusers")); - -if(key!="")container.appendchild(containerlist); -} -request.sendget("users.asp?key="+key,-listuser)} arama-alan?:
içerisindeki src özelli?inin de?eri img.gif'tir-9. linksLister.appendChild(linkItem) : appendChild metodu ile verilen bir eleman içeri?inin en sonuna yeni bir eleman eklenir. Burada linkItem de?i?kenine tan?mlad???m?z document.createElement("li") eleman?n?, linksLister de?i?kenine tan?mlad???m?z document.createElement("ul") eleman? içerisine ekliyoruz.12. containerLinks.appendChild(linksLister) : Yine ayn? metod ile döngü esnas?nda tüm linkItem de?i?kenlerini kendisine ekledi?imiz linksLister de?i?kenini ana ta??y?c?m?z olarak belirledi?imiz containerLinks de?i?kenine ekliyoruz. Sonuç olarak hiyerar?i Div > Ul > Li ?eklini al?yor. Bu k?sa ama yorucu DOM kursundan sonra san?r?m DOM ve Javascript'in birle?tikleri ve ayr?ld?klar? noktalar? kavrayabilmi?sinizdir. Javascript bize altyap?y? sa?larken, DOM ile onun sa?lad??? zeminde güzel ?eyler in?a edebiliyoruz. Zemin güzel, hava güzel, peki hakemin durumu nedir? Hakemden kast?m tabiki Ajax burada :) 4.2. XMLHttpRequest ve DOM bir gün bulu?mu?lar...Derken XMLHttpRequest ve Dom bir gün bulu?mu?, oturup konu?mu?lar uzun uzun. Sonunda "ortak bir i? çevirelim" demi? XMLHttpRequest. Dom ise "bak karde?i ben anlamam senin yapt???n i?lerden, var git i?ine eyleme beni" diye eklemi?. Bu sefer XMLHttpRequest ?srar etmi? ve "sen fazla bir?ey yapmayacaks?n zaten, sendeki olan? kullanal?m yeter oras? bana" diyerek kand?rm?? Dom'u orac?kta. Derken Xml'i de bu i?e ortak etmi?ler ve ordan geçen Amerikal?n?n biri demi?ki "e Javascript var, Xml var, XMLHttpRequest var, ne duruyorsun Dom?" diyerekten vermi? gaz? Dom'a. ??te tam burada sadetimizin meyvesi Ajax dünyaya gelmi?.4.3. Çal??ma zaman?Bu kadar anlat?mdan sonra elle tutulur bir?eyler yapmak laz?md?r herhalde. ?lk fonksiyonumuz; XMLHttpRequest' i GET ve POST metodlar?yla kolayca kullanmam?z? sa?layacak, kendi yaratt???m?z Request nesnesine tutturdu?umuz sendGET() ve sendPOST().
var Request = new Object();Request.send = function(url, method, callback, data){ var req; if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); } req.onreadystatechange = function() { if (req.readyState == 4) { if (req.status < 400) { (method=="POST") ? callback(req) : callback(req,data); } else { alert("Verilerin yüklenmesi s?ras?nda bir hata meydana geldi :n" + req.status+ "/" + req.statusText+"n"+url); } } } if (method=="POST") { req.open("POST", url, true); req.send(data); } else { req.open("GET", url, true); req.send(null); } return req;};Request.sendPOST = function(url, data, callback){ Request.send(url, "POST", callback, data);};Request.sendGET = function(url, callback){ return Request.send(url, "GET", callback);};
Burada, Yap?ta?lar? ba?l???nda bir örne?ini verdi?im XMLHttpRequest nesnesinin kullan?lmas?na ait, ayn? mant?kta; sadece biraz daha kolayla?t?r?lm?? bir fonksiyonu görmektesiniz -yaz?m?n? kastetmiyorum, kullan?m olarak kolay :)- Bu fonksiyonlar kümesini iki de?i?ik ?ekilde kullanabiliriz.1. Request.sendGET("user.asp?do=list", listUser) : Request.sendGET fonksiyonu gönderinin GET metodu ile yap?lmas?n?, "user.asp?do=list" de?eri user.asp dosyas?na ?do=list ?eklinde bir QueryString gönderilmesini, listUser ise sonuç al?nmas? durumunda -sonuç, veri ile ayn? ?ey de?ildir- sonucun yorumlanmas?n? sa?layacak fonksiyon ad?n? ifade eder.2. Request.sendPOST("user.asp?do=import", "email="+userEmail, welcomeMessage) : Request.sendPOST fonksiyonu gönderinin POST metodu ile yap?lmas?n?, "user.asp?do=import" de?eri verilerin gönderilece?i dosyay?, "email="+userEmail de?eri email ad?nda bir Request.Form de?erinin gönderilece?ini ve bu form eleman?n?n daha önceden userEmail de?i?kenine atanan bir de?er oldu?unu, welcomeMessage ise sonuç al?nmas? durumunda sonucun yorumlanmas?n? sa?layacak fonksiyon ad?n? ifade eder. Art?k sorgulama yapabildi?imize göre bir live search örne?i ile devam edelim. Bu örnekte ziyaretçi kullan?c? giri?i s?ras?nda e-posta adresini ilgili alana girerken, veritaban?m?zdaki users tablosundaki name, surname ve mail alanlar?nda arama yaparak e?le?en kay?tlar? s?ralat?p bir auto-complete aksiyonu yarat?yoruz. Aramay? gerçekle?tiren ve sonuçlar? Xml'e çeviren users.asp dosyam?z;<% Response.ContentType = "text/xml" Session.Codepage = 1254 Session.LcId = 1055 Session.TimeOut = 155 Response.Buffer = True Response.Expires = -1 Response.ExpiresAbsolute = Now() - 2 Response.AddHeader "pragma","no-cache" Response.AddHeader "cache-control","private" Dim strDSNQuery, conGeneral, strKey strDSNQuery = "Provider='Microsoft.Jet.OLEDB.4.0'; Data Source='"&Server.MapPath("vt.mdb")&"';" Set conGeneral = Server.CreateObject("ADODB.Connection") conGeneral.Open strDSNQuery Function openRec(strObjName, strSQLQuery) On Error Resume Next Set strObjName = Server.CreateObject("ADODB.Recordset") strObjName.CursorType = 1 strObjName.CursorLocation = 3 strObjName.LockType = 1 strObjName.Open strSQLQuery, conGeneral, 1, 3 If Err Then Response.Write "Yürütülen "&strSQLQuery&" sorgusu s?ras?nda bir hata meydana geldi." Response.End() End If End Function strKey = Trim(Request.QueryString("key")) If ( strKey = "" ) Then strKey = "abcdefgijklmnoprstuvyz" Call openRec(objUserList,"SELECT * FROM users WHERE (name LIKE '%"&strKey&"%' OR surname LIKE '%"&strKey&"%' OR mail LIKE '%"&strKey&"%');") Do Until objUserList.EOF Response.Write vbTab&"
"; listElement.setAttribute("name",users[x].getAttribute('name')); listElement.setAttribute("href","Javascript:;"); listElement.setAttribute("onclick","document.getElementById('inputKey').value = this.name;"+ "document.getElementById('listUsers').style.display = 'none';"); containerList.appendChild(listElement); } if(document.getElementById("listUsers")) container.removeChild(document.getElementById("listUsers")); if(key!="")container.appendChild(containerList); } Request.sendGET("users.asp?key="+key, listUser)} Arama alan?:
Lütfen arama kutusuna bir isim girin;
Veritaban? dosyam?z (vt.mdb):Field name Data type------------------------------------id | AutoNumbername | Textsurname | Textmail | Text 5. Kaynaklar1 http://developer.apple.com/internet/webcontent/xmlhttpreq.html2 http://developer.mozilla.org/en/docs/The_DOM_and_JavaScript 5.1. ?nceleyin1. netvibes.com, js2. live.com, js1, js2, js3, js43. google.com/ig, js1, js24. LiveSearch örne?i, js, .zip