Membaca & Memproses XML menggunakan jQuery Ajax

Ketika bekerja pada proyek saya saat ini, untuk salah satu kebutuhan saya saya harus membaca dan memproses file XML menggunakan jQuery dan Ajax. File XML yang sebenarnya sangat besar dan saya tidak bisa berbagi. Jadi dalam posting ini, saya akan menunjukkan cara untuk memproses file XML dengan jQuery dan Ajax. Posting terkait:



Di bawah ini adalah file XML sampel yang kita akan gunakan untuk demo.The file XML adalah memiliki daftar buku dengan Judul dan Penerbit sebagai 2 node XML dengan setiap buku. 

 //Code Starts

<?xml version="1.0" encoding="utf-8" ?>
<BookList>
  <Book>
     <Title>jQuery: Novice to Ninja</Title>
     <Publisher>Site point</Publisher>
  </Book>
  <Book>
     <Title>Learning jQuery</Title>
     <Publisher>PACKT</Publisher>
  </Book>
  <Book>
     <Title>Head First jQuery</Title>
     <Publisher>O'Reilly</Publisher>
  </Book>
  <Book>
     <Title>jQuery UI 1.8</Title>
     <Publisher>PACKT</Publisher>
  </Book>
</BookList>
//Code Ends
Sekarang, untuk memproses XML menggunakan jQuery, di bawah ini adalah ide untuk bagaimana melakukannya .. 



Mendeklarasikan div yang akan digunakan untuk menampilkan konten XML.
Sebagai layar akan di daftar sehingga menambahkan UL untuk elemen div.
Memanggil metode ajax untuk memproses file xml.
Set jenis permintaan HTTP untuk "GET" dan juga menyediakan nama file XML di url.
Mengatur datatype untuk "xml".
Kami juga perlu mendefinisikan fungsi callback, yang dipanggil ketika permintaan berhasil atau jika beberapa kesalahan.
Jadi, ketika sukses callback disebut kemudian loop melalui konten xml.
Mendapatkan nilai node "Judul" dan "Penerbit" dan menambahkan ke div.
Mendefinisikan error callback untuk menangani kesalahan.

Jadi di sini adalah kode jQuery lengkap. 



//Code Starts
$(document).ready(function(){
  $("#dvContent").append("<ul></ul>");
  $.ajax({
    type: "GET",
    url: "BookList.xml",
    dataType: "xml",
    success: function(xml){
    $(xml).find('Book').each(function(){
      var sTitle = $(this).find('Title').text();
      var sPublisher = $(this).find('Publisher').text();
      $("<li></li>").html(sTitle + ", " + sPublisher).appendTo("#dvContent ul");
    });
  },
  error: function() {
    alert("An error occurred while processing XML file.");
  }
  });
});
//Code Ends
Smoga bermanfaat...

Tips Trik Alfanetcell

Membaca & Memproses XML menggunakan jQuery Ajax