Ajax, terimolojik olarak asynchronous javascript and xml; yani javascript ve xml’in eş zamanlı olmayan hareketlerle icra ettiği faaliyete verilen ?simdir.
1. Giri?
Merhabalar efendim. Bu makalemde Ajax hakk?ndaki fikirlerimi ve gördüklerimi sizlerle payla?mak istiyorum. Makalemi do?rudan bir çözüm ?eklinde de?il de, örnekleme metodu ile aktaraca??m. Bu nedenle, makale sonunda verdi?im adreslerin ana betiklerini gözden geçirmenizi tavsiye ederim. Metin boyutlar? em ile belirlendi?inden taray?c?n?z?n menülerinden metin boyutunu büyütebilirsiniz.
2. Ajax nedir?
Ajax, terimolojik olarak Asynchronous Javascript and XML; yani Javascript ve Xml’in e? zamanl? olmayan hareketlerle icra etti?i faaliyete verilen isimdir. Az çok Ajax hakk?nda fikir sahibi arkada?lar?n “ne yani Javascript ve Xml e? zamanl? çal??m?yorlar m??” ?eklindeki sorular?n? duyar gibiyim. Merak etmeyin bu konuya biraz ötede de?inece?im. (Synchronous Javascript and XML -SJAX- olsayd?, bu kadar karizmatik bir terim türetilemezdi dermi?im :))
Ajax, yap?s? itibariyle varl???n? belli kal?plar içinde sürdürmektedir -bir kütühaneye sahip olmasa da halen çe?itli kütüphaneler yaz?lmaktad?r-. Ajax en basit ifadesiyle; DOM -Document Object Model- ya da statik olarak -document.createElement(“img”), <img src=”..” />- 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 ortaya çıkart?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 ortaya çıkart?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 ortaya çıkart?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ükleniyor
2 = yüklendi
3 = etkile?imli
4 = 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. Pratik
Olay?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? 2
DOM 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 <img src=”img.gif” /> 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 ortaya çıkartt???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 ortaya çıkart?yoruz.
Aramay? gerçekle?tiren ve sonuçlar? Xml’e çeviren users.asp dosyam?z;
<data>
<%
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 “<pre>Yürütülen “&strSQLQuery&” sorgusu s?ras?nda bir hata meydana geldi.</pre>”
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&”<user id=”””&objUserList(“id”)&””” name=”””&objUserList(“name”)&”””>”&objUserList(“mail”)&”</user>”&vbCrlf
objUserList.MoveNext
Loop
objUserList.Close()
Set objUserList = Nothing
conGeneral.Close()
Set conGeneral = Nothing
%>
</data>
??lemi gerçekle?tirecek init() fonksiyonumuz;
var Nth = new Object();
Nth.init = function(){
var key = document.getElementById(“inputKey”).value;
function listUser(response){
var rootNode = response.responseXML.documentElement;
var users = rootNode.getElementsByTagName(“user”);
var container = document.getElementById(“resultsArea”);
var containerList = document.createElement(“div”);
containerList.id = “listUsers”;
containerList.innerHTML = “”;
function _selectUserName(){
var name = window.event.srcElement.getAttribute(“name”);
document.getElementById(“inputLoginUsername”).value = name;
container.removeChild(document.getElementById(“listUsers”));
}
for(x = 0; x < users.length; x++){
var listElement = document.createElement(“a”);
listElement.innerHTML = users[x].getAttribute(‘name’)+”<br />”;
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?:
<div id=”container”>Lütfen arama kutusuna bir isim girin;
<div id=”searchBox”>
<input name=”inputKey” type=”text” id=”inputKey” onkeyup=”Nth.init();” />
</div>
<div id=”resultsArea”></div>
</div>
Veritaban? dosyam?z (vt.mdb):
Field name Data type
————————————
id | AutoNumber
name | Text
surname | Text
mail | Text
5. Kaynaklar
1 http://developer.apple.com/internet/webcontent/xmlhttpreq.html
2 http://developer.mozilla.org/en/docs/The_DOM_and_JavaScript
5.1. ?nceleyin
1. netvibes.com, js
2. live.com, js1, js2, js3, js4
3. google.com/ig, js1, js2
4. LiveSearch örne?i, js, .zip
Kaynak www.nothingrows.net/ajax/
Onur KÖSE, Ocak 2006, www.nothingrows.net, Son güncellenme: 05.02.2006 12:29