Tutorial

Dasar tabel dengan Ajax

Ditulis Oleh oscorp

Sunday, 30 August 2009

Demonstrasi pertama saya membangun tabel dengan Ajax adalah melalui penggunaan XML request ke server melalui Ajax. Nilai dari teknik ini adalah dua kali lipat. Pertama, banyak data request dan dapat diperbarui di tempat, yang membuat pengguna senang. Kedua, teknik memerlukan sumber data XML, yang berharga bukan hanya untuk kode Ajax tetapi untuk semua klien yang mengkonsumsi data anda melalui XML.

Listing 1 menunjukkan contoh XML-driven table.

Listing 1. index.html

<html>
<head>
<script src="prototype.js"></script>
</head>
<body>
<table id="books">
</table>
<script>
new Ajax.Request( 'books.xml', { 
  method: 'get',
  onSuccess: function( transport ) {
    var bookTags = transport.responseXML.getElementsByTagName( 'book' );
 
    for( var b = 0; b < bookTags.length; b++ ) {
      var author = bookTags[b].getElementsByTagName('author')[0].firstChild.nodeValue;
      var title = bookTags[b].getElementsByTagName('title')[0].firstChild.nodeValue;
      var publisher = 
          bookTags[b].getElementsByTagName('publisher')[0].firstChild.nodeValue;
 
      var elTR = $('books').insertRow( -1 );
      var elTD1 = elTR.insertCell( -1 );
      elTD1.innerHTML = author;
      var elTD2 = elTR.insertCell( -1 );
      elTD2.innerHTML = title;
      var elTD3 = elTR.insertCell( -1 );
      elTD3.innerHTML = publisher;
    }
  }
} );
</script>
</body>
</html>

onSuccess handler dari Ajax.Request memecah data XML dengan terlebih dahulu untuk mendapatkan masing-masing elemen. Kemudian, ia mendapatkan author title dan publisher yang bersarang, nilai-nilai dari tag.. Kemudian itu akan menambahkan data ke tabel menggunakan insertRow dan insertCell untuk setiap buku.

Listing 2 menunjukkan kode XML untuk contoh ini.

Listing 2. books.xml

                
<books>
  <book>
    <author>Jack Herrington</author>
    <title>Code Generation In Action</title>
    <publisher>O'Reilly</publisher>
  </book>
  <book>
    <author>Jack Herrington</author>
    <title>Podcasting Hacks</title>
    <publisher>O'Reilly</publisher>
  </book>
  <book>
    <author>Jack Herrington</author>
    <title>PHP Hacks</title>
    <publisher>O'Reilly</publisher>
  </book>
</books>

Gambar 1 menunjukkan file yang dihasilkan DHTML.

Gambar 1 XML-driven table page

Contoh ini baik untuk hasil kecil set, tapi bagaimana untuk sesuatu yang lebih besar?

Untuk melihat versi live nya klik disini
Baca di edisi Berikutnya.... (",)

» 5 Comments

5"kyiqxfwe" by kyiqxfwe at Monday, 19 July 2010 10:04

[URL=http://vpyhoiww.com]izqrvcaa[/URL] kykymvqu hovigoqn http://amrmklip.com yxktkyrp ywtbpydh

4"rgrgregege" by erregreg at Friday, 07 May 2010 03:08

newscybertechnology.com

3"a" by dedekusn at Tuesday, 29 September 2009 21:44

Salam kenal!

2"a" by dedekusn at Tuesday, 29 September 2009 21:40

Nice.....
sayang symah OOt Suroot....

1"yxUmaWfqjtdQ" by llamavvukt at Sunday, 13 September 2009 20:17

x4Of1j kgdxgpakpanv, [url=http://uegszwyvrbut.com/]uegszwyvrbut[/url], [link=http://fgfugkehdohv.com/]fgfugkehdohv[/link], http://vmrvwgkqduzv.com/

» Post Comment