(10 votes, average: 3.90 out of 5)
Loading ...Pada dasarnya javascript telah support metode-metode untuk melakukan parsing XML dengan format DOM standar. Namun cara penterjemahan ini kadang-kadang cukup membuat pusing para developer, coba perhatikan contoh script di bawah ini…
20 21 22 23 24 25 26 27 28 29 | var titleNodes = http.responseXML .getElementsByTagName("title"); var descriptionNodes = http.responseXML .getElementsByTagName("description"); var linkNodes = http.responseXML .getElementsByTagName("link"); for(var i =1;i<titleNodes.length;i++) { var newtext = document .createTextNode(titleNodes[i] .childNodes[0].nodeValue); var newpara = document.createElement('p'); var para = document.getElementById('news') .appendChild(newpara); newpara.appendChild(newtext); newpara.className = "title"; |
Script diatas adalah contoh parsing XML dengan format DOM standar, di beberapa bahasa pemrograman juga menganut cara yang hampir sama. Namun akhir-akhir ini karena saya selalu dihadapkan pada kasus parsing XML, maka saya harus mencari cara agar parsing XML terasa lebih mudah dan manusiawi. hehehe
Ternyata jQuery mempunyai kelebihan dalam hal manipulasi DOM dibanding prototype. Prototype tidak support manipulasi DOM pada responseXML yang dikembalikan pada request Ajax. Akhirnya saya beralih ke jQuery yang mempunyai kemampuan manipulasi DOM di XML layaknya manipulasi DOM di HTML. Berikut contohnya….
Pertama siapkan data XML sederhana seperti ini.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <HasilUjian MataKuliah="Bahasa Pemrograman 5"> <data> <NIM>0311500110</NIM> <Nama>Chandra Jatnika</Nama> <Nilai Grade="A">98</Nilai> </data> <data> <NIM>0411500461</NIM> <Nama>Sinta Valentina</Nama> <Nilai Grade="B">78</Nilai> </data> <data> <NIM>9911500110</NIM> <Nama>Orang Tua</Nama> <Nilai Grade="D">48</Nilai> </data> </HasilUjian> |
Lalu kita ambil data XML tersebut dengan Ajax. Berikut cara request XML di jQuery berikut cara parsing XML tersebut dengan manipulasi DOM gaya jQuery.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <html> <head> <title>Test XML</title> <script language="javascript" src="jquery.js"></script> <script language="javascript"> $(function(){ /* $(function(){ ...perintah... }) = fungsi dari jQuery yang menandakan baris-baris perintah di bawahnya akan dieksekusi setelah halaman ini selesai di loading */ $('#btnLoad').click(function(){ // deklarasi event click setelah element dengan id 'btnLoad' $.ajax({ type: 'POST', // gunakan post agar data dari xml akan selalu up-to-date url: 'data.xml', dataType: 'xml', // pastikan data hasil request berupa XML success: function(xml){ // variable xml otomatis mengandung DOM dari hasil request XML var str = 'Hasil Ujian Mata Kuliah: '+$(xml).find('HasilUjian').attr('MataKuliah'); // gunakan method find() untuk mengambil data DOM dari node yang diinginkan $(xml).find('data').each( // fungsi each digunakan untuk mengambil data node yang berupa array function(){ str += '<hr />NIM: '+$(this).find('NIM').text(); // method text untuk mendapatkan isi dari node str += '<br />Nama: '+$(this).find('Nama').text(); var nilai = $(this).find('Nilai'); // DOMdarinode.attr('attribut_yang_diinginkan') fungsinya untuk mengambil string dari atribut str += '<br />Nilai: '+nilai.text()+' (grade: '+nilai.attr('Grade')+')'; } ); $('#divResult').html(str); // masukan hasil parsing xml ke element dengan id 'divResult' } }); }); }); </script> </head> <body> <input type="button" id="btnLoad" value="Load" /> <div id="divResult" style="border:1px solid #006"></div> </body> </html> |
Hasilnya adalah:
Kesimpulannya adalah jQuery berhasil meminimaliasasi jumlah script dan performance dalam penterjemahan XML. Ditambah lagi developer yang terbiasa dengan manipulasi DOM di HTML tidak harus mempelajari lagi cara-cara manipulasi DOM XML di javascript karena dengan jQuery manipulasi DOM XML sama saja seperti menghandle DOM di HTML versi jQuery.
Download demo diatas di link ini (link download) dan klik link ini untuk melihat hasil langsung dari script diatas (link demo).
Semoga bisa membantu, terima kasih…. ^_^
Chandra Jatnika
8 Responses
Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.
kok demonya gak bisa ya pak?
Oh klo gitu pada baris ke-13
Diubah aja POST menjadi GET sehingga menjadi gini.
Ini semua dikarenakan klo di hosting kadang-kadang ada aturan suatu halaman jangan di akses dengan method POST, hanya bisa dengan GET.
Tapi klo di localhost sih gak masalah.
Tapi yg jadi catatan adalah klo pake GET kadang2 cache dari data.xml gak update, jadinya klo kita ubah2 data.xml tsb, pas kita pengen lihat lagi dengan Ajax yang tampil bisa aja data yang lama lagi, klo pake POST bisa terus update datanya.
Thanks atas koreksinya mas.
Bagus sekali tutorialnya, jd ingin belajar jQuery nich. sy tunggu tutorial selanjutnya.
Numpang beken nich :
Tutorial joomla : http://www.inspirasiweb.co.cc
mungkin slah satu cara supaya penggunaan metode get dan selalu update ditambahin variable uniqid/ waktu acak, sehingga tidak ngecache.. gimana?
tentu bisa, di script ini aku gak kasih cara spt karena aku cuma ngasih cara yg simple aja utk tutorial dasar parsing XML.
mas, ada tutorial buat cms sederhana berbasis ajax tidak?…saya request donk mas,,,, pleasee….
kalau cms contoh sederhananya bisa anda lihat di artikel: http://chandrajatnika.com/2009/09/create-update-dan-delete-data-master-dengan-ajax/
dasar CMS kan CRUD, create, update dan delete
mas, untuk yang web full ajax sederhana kalau ambil data dari database berdasarkan id yang di klik bgmana mas?