Ajax ve XML: Beş adet genel Ajax kalıbı

0

tongucyumruk
24 Temmuz 2007 , 30 dakika okuma süresi

IBM Türkiye ve Fazlamesai.net işbirliği ile dilimize kazandırılan yeni bir IBM developerWorks makalesi ile karşınızdayız. Diğer makalelere buradan ulaşabilirsiniz.

Makalenin özgün haline bu adresten ulaşabilirsiniz.

Ajax ve XML: Beş adet genel Ajax kalıbı

Kullanabileceğiniz yararlı Ajax tasarım kalıpları

Düzey: Orta

Jack D Herrington (jherr@pobox.com), Kıdemli Yazılım Mühendisi, Leverage Software Inc.

06 Mart 2007

Zamanuyumsuz JavaScript + XML (Ajax), 2006'nın kesinlikle en çok duyulan teknoloji terimiydi ve 2007'de de en az geçen yıl kadar ya da daha fazla konuşulacak gibi görünüyor. Ancak bu, uygulamanız için gerçekte ne anlama geliyor? Ve Ajax uygulamalarında yaygın olarak kullanılan genel mimari kalıpları nelerdir? Kendi çalışmalarınız için temel olarak kullanabileceğiniz beş adet yaygın Ajax tasarım kalıbını keşfedin.

Ajax, herkesin kendi sitesiyle ilişkilendirmek istediği bir Web 2.0 terimidir. Ancak, gerçekte bu ne anlama geliyor? Ve mühendisler, bunu siteleriyle mimari düzeyde nasıl bütünleştiriyorlar? Bu makalede, Ajax'ın temellerini anlatacağım ve Web 2.0 geliştirmesiyle en iyi uygulama oldukları kanıtlanan bazı Ajax tasarım kalıplarını göstereceğim.

Başlangıç olarak, Ajax, Dinamik HTML (DHTML) ve XMLHTTPRequest nesnesi de dahil, bir bizi teknolojiyi kapsayan bir terimdir. DHTML, üç öğenin birleşiminden oluşur: HTML (Bağlantılı Metin Biçimleme Dili), JavaScript kodu ve CSS (Cascading Style Sheets; Basamaklı Stil Sayfaları). Bir Web sayfasında JavaScript kodunu kullanarak, içerik eklemek, kaldırmak ya da değiştirmek üzere sayfayı dinamik bir şekilde değiştirebilirsiniz. Bu, DHTML'nin dinamik kısmıdır. JavaScript kodu, XMLHTTPRequest nesnesini, sayfa yüklendikten sonra sunucudan veri istemek için kullanır.

Bu iki öğenin birleşimi -- sunucudan anında veri isteme ve sayfayı verileri kullanacak şekilde değiştirme -- Ajax'ın temelini ve Web 2.0 sitelerinin dinamik doğasını oluşturur.

Ancak bu, size bu özelliklerin gerçek dünyada nasıl kullanıldığını ve bunları, sitenizde nasıl kullanmanız gerektiğini anlatmaz. Bunun için, bir dizi basit tasarım kalıplarına gereksinim duyarsınız. Bu terime yabancıysanız, bunun aynı adı taşıyan harika bir kitaptan (Design Patterns) geldiğini belirtelim (bkz. Kaynaklar). Bu kitap, mühendislerin yaygın olarak gerçekleştirdikleri görevler için bir dizi uygulama kalıbı sağlamıştır. Bu kitap, yalnızca sistem tasarımı konusunda en iyi uygulamaları değil, aynı zamanda mühendislerin, kendi kodlarıyla ilgili olarak konuşmak için kullanabilecekleri bir terminoloji de sağlamıştır.

Bu makale, yaygın olarak kullanılan beş adet Ajax tasarım kalıbı sunar. Bunlar, sunucudan veri almak için HTML, XML ve JavaScript kodunu kullanma açısından farklılık gösterirler. Ben en basit kalıp olan, sayfanızın sunucudan yeni HTML ile güncellenmesiyle başlayacağım.

Kalıp 1. HTML kesimlerinin değiştirilmesi

Belki de en yaygın Ajax görevi, sunucudan güncellenmiş HTML isteğinde bulunmak ve sayfanın bir kısmını bu verilerle güncellemektir. Bunu belirli aralıklarla gerçekleştirebilirsiniz -- örneğin, hisse senedi fiyatlarını güncellemek için. Ya da gerektiğinde güncelleme yapabilirsiniz -- örneğin, bir arama isteğine yanıt olarak.

Liste 1 içindeki kod, sunucudan bir sayfa ister ve bu içeriği, sayfanın gövdesindeki bir <div> biçim imine (tag) yerleştirir.

Liste 1. Pat1_replace_div.html

<html>
<script>
var req = null;
function processReqChange() {
  if (req.readyState == 4 && req.status == 200 ) {
    var dobj = document.getElementById( 'htmlDiv' );
    dobj.innerHTML = req.responseText;
  }
}

function loadUrl( url ) {
  if(window.XMLHttpRequest) {
    try { req = new XMLHttpRequest();
    } catch(e) { req = false; }
  } 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('');
  }
}

var url = window.location.toString();
url = url.replace( /pat1_replace_div.html/, 'pat1_content.html' );
loadUrl( url );

</script>
<body>
Dynamic content is shown between here:<br/>
<div id="htmlDiv" style="border:1px solid black;padding:10px;">
</div>
And here.<br/>
</body>
</html>

Liste 2 içinde, kodun istediği içerik gösterilmektedir.

Liste 2. Pat1_content.html

     
HTML encoded content goes here.

Canlı bir ortamda bunun nasıl görüneceğini görmek için, pat1_replace_div.html sayfasının çevrimiçi sürümünü görüntüleyin.

Sayfayı Firefox içinde açtığımda, Şekil 1'de gösterilen sonuçları gördüm.

Şekil 1. Değiştirilmiş <div> biçim imiyle sayfa
Değiştirilen biçim imiyle sayfa

Liste 1'deki koda geri dönün ve birkaç şeye göz atın. Dikkat edilmesi gereken ilk şey, sunucudan bir URL isteyen loadUrl() işlevidir. Bu işlev, sunucuya yeni içerik olup olmadığını sormak için XMLHTTPRequest nesnesini kullanır. Ayrıca, tarayıcı içeriği aldığında çağrılan bir geri arama işlevi (bu durumda, processReqChange) belirler.

processReqChange işlevi, isteğin tamamlanıp tamamlanmadığını görmek için nesneyi inceler. İstek tamamlandıysa, işlev sayfadaki <div> biçim iminin innerHTML değerini yanıt metnine ayarlar.

Dinamik içerik için yer tutucu olarak <div> biçim iminin kullanılması, Ajax kodunun başlıca öğesidir. Bu biçim imleri görünmezler (benim yaptığım gibi sınırlar ve benzeri şeyler eklemezseniz), ancak içeriğin nereye yerleştirilmesi gerektiğiyle ilgili iyi bir işaretçi olarak çalışırlar. Mühendisler de, daha sonra göstereceğim şekilde, <span> biçim imini değiştirilebilir kesimler için kullanırlar. <div> ve <span> biçim imleri arasındaki fark, ilkinin bir satır sonunu uygularken (paragraf gibi), ikincisinin satır içi metnin bir kısmını betimlemesidir.

Bir anlığına processReqChange işlevine dönersek, işlevin status ve readyState değerini denetlemesi önem taşır. Bazı tarayıcılar yalnızca istek tamamlandığında işlevi çağırırken, diğer tarayıcılar, koda isteğin çalışmaya devam ettiğini bildirmek için kodu sürekli olarak geri ararlar.

Sekmeli görüntü değişkeni

Bu kalıbın başka bir değişkeni, sekmeli bir görüntüleme stili yaratmaktır. Liste 3 içinde, basit bir sekmeli Ajax arabirimi gösterilmektedir.

Liste 3. Pat1_tabs.html

<html>

<script>
var req = null;
function processReqChange() {
  if (req.readyState == 4 && req.status == 200 ) {
    var dobj = document.getElementById( 'tabDiv' );
    dobj.innerHTML = req.responseText;
  }
}

function loadUrl( tab ) {
  var url = window.location.toString();
  url = url.replace( /pat1_tabs.html/, tab );
  ...
}

function tab1() { loadUrl( 'pat1_tab1_content.html' ); }
function tab2() { loadUrl( 'pat1_tab2_content.html' ); }
tab1();
</script>
<body>
<a href="javascript: void tab1();">Tab 1<a> 
<a href="javascript: void tab2();">Tab 2<a>

<div id="tabDiv" style="border:1px solid black;padding:10px;">
</div>
</body>
</html>

Liste 4'te ilk sekmenin içeriği gösterilir.

Liste 4. Pat1_tab1_content.html


Tab 1 content

Liste 5 içinde ikinci sekmenin içeriği gösterilmektedir.

Liste 5. Pat1_tab2_content.html

Tab 2 content

Canlı bir ortamda bunun nasıl görüneceğini görmek için pat1_tabs.html sayfasının çevrimiçi sürümünü görüntüleyin.

Tarayıcımda bu sayfayı açtığımda, ilk sekmeyi Şekil 2'de gösterildiği şekilde gördüm.

Şekil 2. Birinci sekmenin içeriği
Birinci sekmenin
içeriği

Daha sonra, ikinci sekmenin bağlantısını tıklattım. Tarayıcı, ikinci sekmenin içeriği aldı ve sekmeyi, sekme alanında Şekil 3'teki gibi gösterdi.

Şekil 3. İkinci sekmenin içeriği
İkinci sekmenin
içeriği

Bu, bu tasarım kalıbının en iyi kullanım örneğidir -- kullanıcıdan istekleri alma ve yeni malzemeyle görüntünün bir kısmını güncelleme; bu durumda, sekmeli bir görüntü yanılsaması yaratma. Uygulama açısından yararı, müşterilere daha hafif bir sayfa yükleyebilmeniz; böylece müşterilerin, istedikleri malzemelere gerektiğinde erişebilmeleridir.

Ajax'tan önce yaygın teknik, sayfada her iki sekmenin de bulunması ve gerektiğinde bunların saklanması ya da gösterilmesiydi. Bu, hiçbir zaman görüntülenmeyecek olsa bile ikinci sekmenin HTML kodunun yaratılacağı ve hem sunucu süresinin, hem de bant genişliğinin harcanması anlamına geliyordu. Bu yeni Ajax yöntemiyle, ikinci sekmenin HTML'si yalnızca kullanıcı istekte bulunduğunda yaratılır.

Read more (Daha fazlası) değişkeni

Canlı bir ortamda bunun nasıl görüneceğini görmek için pat1_readmore.html sayfasının çevrimiçi sürümünü görüntüleyin.

Bu temadaki başka bir değişiklik de Şekil 4'te gösterilen Read more (Daha fazlası) bağlantısıdır.

Şekil 4. Sıkıcı Web günlüğü girişimdeki 'Read more' bağlantısı
Read more
bağlantısı

Köpekle yaptığım yürüyüşün devam eden maceralarıyla ilgili daha fazla şey okumak istediğimi varsayalım. Read more bağlantısını tıklatabilir ve bağlantının, Şekil 5'te gösterilen tam öyküye dönüşmesini sağlayabilirim.

Şekil 5. 'Read more' bağlantısını tıklattıktan sonra sayfanın görünümü
Read more bağlantısını tıklattıktan
sonra

Müşteriler için değerli olan nokta, sayfanın yenilenmesine gerek kalmadan daha fazla malzemeyi kesintisiz olarak almalarıdır.

Liste 6 içinde bu sayfaya ilişkin kod gösterilmektedir.

Liste 6. Pat1_readmore.html

<html>

<script>
var req = null;
function processReqChange() {
  if (req.readyState == 4 && req.status == 200 ) {
    var dobj = document.getElementById( "moreSpan" );
    dobj.innerHTML = req.responseText;
  }
}

function loadUrl( url ) { ... }

function getMore()
{
  var url = window.location.toString();
  url = url.replace( /pat1_readmore.html/, 'pat1_readmore_content.html' );
  loadUrl( url );
}
</script>
<body>
<h1>Walking the dog</h1>
I took my dog for a walk today. 
<span id="moreSpan">
<a href="javascript: void getMore()">Read more...</a>

</span>
</body>
</html>

Liste 7 içinde "Read more" kesiminin içeriği gösterilmektedir.

Liste 7. Pat1_readmore_content.html

It was a nice day out. Warm and sunny. My dog liked getting out for a stretch.

Bu kod, <div> biçim imi yerine <span> biçim iminin kullanımını göstermektedir. Kullandığınız yaklaşım, kullanıcı arabiriminizin (UI) gereksinimlerine bağlıdır. Ancak, görebileceğiniz gibi her iki yaklaşımı kullanmak da kolaydır.

Sayfa için yeni HTML alınması bir önemlidir, ancak sayfa üzerindeki JavaScript kodunun verilerle akıllı bir şey yapmasını isterseniz ne olacak? Verileri tarayıcıya yapısal bir şekilde nasıl alacaksınız? Tabii XML ile.

Kalıp 2. XML verilerinin okunması

Bazı nedenlerle Ajax, XML ile eşanlamlı hale gelmiştir, ancak XML kullanmak zorunlu değildir. Yukarıdaki örneklerden de görebileceğiniz gibi düz metin ya da HTML -- ya da Genişletilebilir HTML (XHTML) -- kodu parçaları döndürebilirsiniz. Ancak XML göndermenin bazı ödülleri de olabilir.

Liste 8 içinde, sunucudan kitaplarla ilgili kayıtları isteyen ve daha sonra, bu verileri sayfa içindeki bir tabloda görüntüleyen Ajax kodu gösterilmektedir.

List 8. Pat2_xml.html

<html>
<head>
<script>

var req = null;
function processReqChange() {
  if (req.readyState == 4 && req.status == 200 && req.responseXML ) {
    var dtable = document.getElementById( 'dataBody' );
    var nl = req.responseXML.getElementsByTagName( 'book' );
    for( var i = 0; i < nl.length; i++ ) {
      var nli = nl.item( i );
      var elAuthor = nli.getElementsByTagName( 'author' );
      var author = elAuthor.item(0).firstChild.nodeValue;
      var elTitle = nli.getElementsByTagName( 'title' );
      var title = elTitle.item(0).firstChild.nodeValue;

      var elTr = dtable.insertRow( -1 );

      var elAuthorTd = elTr.insertCell( -1 );
      elAuthorTd.innerHTML = author;

      var elTitleTd = elTr.insertCell( -1 );
      elTitleTd.innerHTML = title;
} } }

function loadXMLDoc( url ) {
  if(window.XMLHttpRequest) {
    try { req = new XMLHttpRequest();
    } catch(e) { req = false; }
  } 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('');
  }
}

var url = window.location.toString();
url = url.replace( /pat2_xml.html/, 'pat2_xml_data.xml' );
loadXMLDoc( url );
</script>
</head>
<body>
<table cellspacing="0" cellpadding="3" width="100%">
<tbody id="dataBody">

<tr>
  <th width="20%">Author</th>
  <th width="80%">Title</th>
</tr>
</tbody>
</table>

</body>
</html>

Liste 9'da sayfaya ilişkin veriler gösterilir.

Liste 9. Pat2_xml_data.xml

<books>
  <book>

    <author>Jack Herrington</author>
    <title>Code Generation in Action</title>
  </book>
  <book>
    <author>Jack Herrington</author>

    <title>Podcasting Hacks</title>
  </book>
  <book>
    <author>Jack Herrington</author>
    <title>PHP Hacks</title>

  </book>
</books>

Canlı bir ortamda bunun nasıl görüneceğini görmek için pat2_xml.html sayfasının çevrimiçi sürümünü görüntüleyin.

Sayfayı tarayıcıma yüklediğimde, Şekil 6'da gösterilen sonucu gördüm.

Şekil 6. XML görüntüleme sayfası
XML görüntüleme
sayfası

Bu sayfa ile önceki kalıbın sayfaları arasındaki büyük fark processReqChange işlevidir. Şimdi responseText özelliğine bakmak yerine, yalnızca sunucu yanıtı doğru bir şekilde kodlanmış XML ise kullanılabilen bir XML Belge Nesnesi Modeli (DOM) olan responseXML özelliğine bakıyorsunuz.

responseXML özelliğini kullanarak, XML belgesinden <book> biçim imlerinin listesini istedim. Daha sonra, her birinden <title> ve <author> öğelerini aldım. Sonra, her bir kitap için tabloya bir satır ve her bir satıra yazar ve başlık verilerini içerecek hücreler ekledim.

Bu, XML verilerinin çok basit bir kullanımıdır. Daha karmaşık JavaScript kodu, döndürülen verilere dayalı olarak istemci tarafında sıralama ve arama gerçekleştirebilir.

Ne yazık ki, XML verilerinin aktarılmasının olumsuz tarafı tarayıcının XML belgesini ayrıştırmasının biraz zaman almasıdır. Ayrıca, XML içindeki verileri bulmak için hazırlanan JavaScript kodu da karmaşık olabilir (Liste 8'deki gibi). Diğer bir yöntem, JavaScript kodunu sunucudan istemektir.

Kalıp 3. JavaScript verilerinin okunması

Sunucudan JavaScript verileri isteme, sık sık JavaScript Object Notation (JSON) kod adı ile birlikte kullanılan bir tekniktir. JavaScript verilerini döndürmenin yararı, tarayıcının kullanması çok daha kolay olan JavaScript veri yapılarına ayrıştırma ve yaratma işlemlerini daha verimli kılmasıdır.

Sunucudan JavaScript verilerini okumak için XML verilerini okuyan Liste 8'deki kodu gözden geçirelim. Bu yeni kod Liste 10'da gösterilmiştir.

Liste 10. Pat3_js.html

<html><head><script>
var req = null;
function processReqChange() {
  if (req.readyState == 4 && req.status == 200 ) {
    var dtable = document.getElementById( 'dataBody' );
    var books = eval( req.responseText );
    for( var b in books ) {
      var elTr = dtable.insertRow( -1 );

      var elAuthorTd = elTr.insertCell( -1 );
      elAuthorTd.innerHTML = books[b].author;

      var elTitleTd = elTr.insertCell( -1 );
      elTitleTd.innerHTML = books[b].title;
} } }

...

HTML kodunun tamamı aynı kalır. processReqChange işlevi, sunucudan döndürülen JavaScript verilerinin bir eval işlevini okuyacak şekilde değiştirilmesidir. İşlev, daha sonra, veri kaynağı olarak eval işlevinden çıkan ve tabloya eklenen JavaScript nesnelerini kullanır.

Liste 11'de sunucudan döndürülen JavaScript verileri gösterilmektedir.

Liste 11. Pat3_js_data.js

[ { author: 'Jack Herrington', title: 'Code Generation in Action' },
{ author: 'Jack Herrington', title: 'Podcasting Hacks' },
{ author: 'Jack Herrington', title: 'PHP Hacks' }
]

Canlı bir ortamda bunun nasıl görüneceğini görmek için pat3_js.html sayfasının çevrimiçi sürümünü görüntüleyin.

Birçok Ajax uygulama mühendisinin, verileri kodlamak için XML kullanmak yerine JavaScript kodunu tercih etmelerinin nedenini görmek hiç de zor değildir. JavaScript kodunu tarayıcının işleme kolaylığının yanı sıra, JavaScript kodunu okumak ve yönetmek de daha kolaydır.

Tüm bu veri alma ve görüntüleme işlevlerinde, Ajax'ın temelinde güncel verilerin görüntülenmesinin yattığını görebilirsiniz -- burada, önemli olan verilerin güncel olmasıdır. Dolayısıyla, sunucudan her zaman yeni verileri aldığınızdan nasıl emin olursunuz?

Kalıp 4. Tarayıcı önbelleğinden kaçınma

Tarayıcılar Web trafiğini optimize etmeye çalışır; bu nedenle, aynı URL için ikinci kez bir istekte bulunduğunuzda, sayfayı yeniden istemek yerine tarayıcınız, tarayıcı önbelleğinde saklanan sayfayı kullanır. Bu nedenle, Ajax uygulamalarında kullanılan başka bir yaygın kalıp, URL'de, tarayıcının önbelleğe alınmış bir sonucu döndürmemesini sağlayacak, rastgele düzenleyici bir öğenin kullanılmasıdır.

En sevdiğim teknik, URL'ye geçerli saatin sayısal değerini eklemektir. Liste 12'de bu teknik gösterilmektedir.

Liste 12. Pat4_cache.html

<html>
<script>
...

function loadUrl( url ) {
  url = url + "?t="+((new Date()).valueOf());
  ...
}

...

Canlı bir ortamda bunun nasıl görüneceğini görmek için pat4_cache.html sayfasının çevrimiçi sürümünü görüntüleyin.

Bu, Liste 1'deki koddur, ancak URL dizesine JavaScript metin kullanımı eklenmiştir. URL'nin sonuna, saat değerini taşıyan yeni bir t parametresi ekledim. Sunucunun bu değeri tanıyıp tanımaması önemli değildir. Bu yalnızca, tarayıcının, URL tabanlı sayfa önbelleğini dikkate almamasını sağlayan bir yöntemdir.

Kalıp 5. Birden çok HTML kesiminin değiştirilmesi

Göstereceğim son kalıp ilk kalıbın gelişmiş bir sürümüdür: <div> biçim iminin sunucudan gelen içerikle değiştirilmesi. Web uygulamalarındaki genel bir sorun, kullanıcı girişine verilen yanıtlarda görüntülenen bazı alanların güncellenmesinin gerekmesidir. Örneğin, hisse senedi fiyatı uygulamasında, görüntülenen değerin bir kısmı en son fiyatı gösterirken, başka bir kısmı en son değerlerin bir listesini gösterebilir.

Görüntülenen birden çok alanı güncellemek için sunucudan, her iki kesim için de veriler içeren bir XML yanıtı kullandım. Daha sonra, yanıttan bağımsız kesimleri ayırmak için düzenli bir ifade kullandım. Liste 13'te bu teknik gösterilmektedir.

Liste 13. Pat5_multi_segment.html

<html>
<head>
<script>
var req = null;
function processReqChange() {
  if (req.readyState == 4 && req.status == 200 ) {
    var one = req.responseText.match( /\<one\>(.*?)\<\/one\>/ );
    document.getElementById( 'divOne' ).innerHTML = one[1];
    var two = req.responseText.match( /\<two\>(.*?)\<\/two\>/ );
    document.getElementById( 'divTwo' ).innerHTML = two[1];
} }

function loadXMLDoc( url ) { ... }

var url = window.location.toString();
url = url.replace( /pat5_multi_segment.html/, 'pat5_data.xml' );
loadXMLDoc( url );

</script>
</head>
<body>

This is the content for segment one:<br/>
<div id="divOne" style="border:1px solid black;padding:10px;">
</div>
And segment two:<br/>

<div id="divTwo" style="border:1px solid black;padding:10px;">
</div>

</body>
</html>

Liste 14'te sunucudan döndürülen veriler gösterilmektedir.

Liste 14. Pat5_data.xml


<segments>
  <one>Content for segment one</one>
  <two>Content for segment <b>two</b></two>
</segments>

Canlı bir ortamda bunun nasıl görüneceğini görmek için pat5_multi_segment.html sayfasının çevrimiçi sürümünü görüntüleyin.

Bu kodu tarayıcıma yüklediğimde, Şekil 7'de gösterilen sonucu gördüm.

Şekil 7. Sunucudan gelen verilerle güncellenmiş iki kesimli görüntü
İki kesimli
görüntü

Sunucudan döndürülen malzeme geçerli XML olduğundan, sayfa kodunda XML yanıtını kullanabilirdim. Ancak, XML kodundaki ayrı ayrı kesimleri parçalamak yerine düzenli ifadeler kullanmak daha kolaydı.

Sonuç

Ajax, yanlış anlaşıldığı ve yanlış kullanıldığı kadar güçlü bir araçtır. Bu makalede gösterdiğim kalıplar, Web uygulamanızda Ajax kullanımı konusunda iyi bir sıçrama noktası sağlayabilir. Ancak, burada sağlanan kodu kullanmaya ek olarak, Web 2.0 devrimiyle birlikte gelen harika Ajax ve Web UI kitaplıklarına da bir göz atmanızı öneririm. Bu kitaplıkların içinde en büyük olanı Prototype.js kitaplığıdır ve Web sayfası içeriğini güncellemeye ilişkin farklı tarayıcılara uyumlu yöntemlerin yanı sıra, sunucuya ve sunucudan veri aktarmak için kolay yöntemler de sağlar. Bu kitaplıkların kullanılmasındaki değer, özel olarak bu konuda çalışan mühendislerin bunları çok çeşitli tarayıcılarda ve platformlarda sağlamaları ve test etmelerinden kaynaklanır ve bu da sizi birçok çalışma ve sorundan kurtarır.

Nereden bakarsanız bakın, bu makaledeki kalıplarla gösterildiği şekilde Ajax, uygulamalarınıza dinamik davranış eklemek için göz atmanız gereken bir olanaktır.

Yükleme

Açıklama	Ad	Boyut	Yükleme yöntemi
Bu makaledeki örnek Ajax kalıbı dosyaları	x-ajaxxml2_ajax_patterns.zip	7KB	HTTP

Kaynaklar

Bilgi Edinme

developerWorks XML zone sitesi : developerWorks XML zone sitesinden XML ile ilgili her şeyi öğrenebilirsiniz.
Prototype.js: Tarayıcılar arası uyumlu Ajax ve DHTML nesneleri sağlayan iyi tasarlanmış ve iyi uygulanmış bir JavaScript kitaplığı olan Prototype.js kitaplığını deneyebilirsiniz. Kendi Ajax JavaScript kodunuzu yazmak yerine Prototype.js'nin kullanımına göz atmak size zaman kazandıracaktır.
Design Patterns (Erich Gamma ve diğerleri, Addison-Wesley, 1995): Yazılım mühendisliğinde kalıpların kullanılmasına ilişkin yeni ufuklar açan bu kitabı okuyabilirsiniz.
IBM XML sertifikası : XML ve ilgili teknolojilerde nasıl bir IBM Sertifikalı Geliştirici olabileceğinizi öğrenebilirsiniz.
XML teknik kitaplığı: Çok çeşitli teknik makaleler ve ipuçları, senaryolar, standartlar ve IBM Redbook yayınları için developerWorks XML Zone sitesine bakabilirsiniz.
developerWorks teknik içerikli etkinlikler ve Web yayınları: Bu oturumlardaki teknolojiyi takip edebilirsiniz.
Ajaxian : Bu harika kaynakla, Ajax ve bunu kullanan ön uç pencere bileşenlerle ilgili gelişmeleri izleyebilirsiniz.

Ürün ve teknoloji edinme

Yahoo! UI kitaplığı: Web uygulamalarınızda Ajax ile kullanabileceğiniz bir Web UI takımı olan Yahoo! UI kitaplığını bu siteden edinebilirsiniz.
ATLAS kitaplığı: Microsoft'un Ajax tarayıcı uyumluluğu katmanı çalışması olan ATLAS kitaplığını deneyebilirsiniz. Kitaplığı kullanmak için Microsoft® ASP.NET ürününü kullanmanıza gerek yoktur.
Scriptaculous: Prototype.js kitaplığını kullanan bu tarayıcılar arası etki ve pencere bileşeni kitaplığını yükleyebilirsiniz.
Moo.fx: Prototype.js kitaplığına dayalı bu basit pencere bileşeni kitaplığını edinebilirsiniz.

Tartışma

Tartışma forumuna katılabilirsiniz.
XML bölgesi tartışma forumları: XML merkezli birkaç forumdan herhangi birine katılabilirsiniz.

Yazar hakkında

Jack D. Herrington, 20 yıldan fazla deneyime sahip, kıdemli bir yazılım mühendisidir. Yazmış olduğu üç kitap vardır: Code Generation in Action, Podcasting Hacks ve PHP Hacks. Ayrıca, 30'dan fazla makale de yazmıştır. Jack Herrington'a jherr@pobox.com adresinden erişebilirsiniz.

IBM developerWorks