Tutorial

Bantuan Pencarian :

Home

Artikel

Web Programming

JavaScript

Dasar tabel dengan Ajax

(14 votes)

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