Bagaimana untuk menukar data XML kepada objek dalam javascript

Dalam pembangunan bahagian hadapan, interaksi data dengan pelayan sering terlibat. Data yang dikembalikan oleh pelayan sering dihantar dalam format XML. Oleh itu, adalah sangat penting bagi pembangun bahagian hadapan untuk menguasai kemahiran menukar data XML kepada objek.

Artikel ini akan memperkenalkan kaedah menggunakan JavaScript untuk menukar data XML kepada objek, dengan harapan dapat memberikan sedikit bantuan kepada pembangun bahagian hadapan apabila memproses data XML.

1. Data dalam format XML

XML (Extensible Markup Language) ialah format pertukaran data yang biasa digunakan Ia mempunyai kebolehbacaan dan kebolehskalaan yang baik, jadi ia digunakan secara meluas di Web telah digunakan secara meluas dalam aplikasi. Berikut ialah contoh fail XML mudah:

<?xml version="1.0" encoding="UTF-8"?>
<books>
  <book>
    <name>JavaScript高级程序设计</name>
    <author>Nicholas C. Zakas</author>
    <price>¥89.90</price>
  </book>
  <book>
    <name>JavaScript权威指南</name>
    <author>David Flanagan</author>
    <price>¥99.00</price>
  </book>
</books>

Dalam fail XML di atas, ia mengandungi maklumat tentang dua buku, setiap buku termasuk tajuk, pengarang dan harga.

2. Langkah asas untuk menukar XML kepada objek

Langkah asas untuk menukar XML kepada objek adalah seperti berikut:

1. Dapatkan data XML
2. Menghuraikan data XML
3. Simpan objek yang dihuraikan ke dalam objek JavaScript

Di bawah ini kami akan memperkenalkan cara melaksanakan langkah demi langkah ini.

3. Dapatkan data XML

Dalam contoh ini, kami menggunakan kaedah ajax jQuery untuk mendapatkan data XML. Kodnya adalah seperti berikut:

$.ajax({
    type: "GET",
    url: "books.xml",
    dataType: "xml",
    success: function(xml) {
        console.log(xml);
    }
});

Dalam kod di atas, kami menggunakan kaedah $.ajax untuk mendapatkan data XML. Kaedah ini memerlukan menghantar objek JavaScript yang mengandungi beberapa pilihan. Antaranya, atribut jenis menentukan jenis permintaan (di sini, GET), atribut url menentukan alamat URL permintaan dan atribut dataType menentukan jenis data permintaan.

Apabila permintaan berjaya, fungsi kejayaan akan dipanggil dan lulus objek JavaScript yang mengandungi data XML. Dalam fungsi ini, kami menggunakan kaedah console.log untuk mengeluarkan data XML ke konsol.

4. Menghuraikan data XML

Selepas mendapatkan data XML, kami perlu menghuraikannya. Dalam jQuery, anda boleh menggunakan kaedah $.parseXML untuk menghuraikan data XML. Kaedah ini menerima rentetan sebagai parameter dan mengembalikan objek dokumen XML baharu. Kodnya adalah seperti berikut:

$.ajax({
    type: "GET",
    url: "books.xml",
    dataType: "xml",
    success: function(xml) {
        var xmlDoc = $.parseXML(xml),
            $xml = $(xmlDoc);
    }
});

Dalam kod di atas, kami mula-mula menghantar data XML yang diperoleh sebagai parameter ke dalam kaedah $.parseXML untuk mendapatkan objek dokumen XML baharu. Kemudian, kami menukar objek dokumen menjadi objek jQuery. Operasi ini terutamanya untuk memudahkan kami menggunakan kaedah jQuery untuk memanipulasi data XML.

5. Simpan objek yang dihuraikan ke dalam objek JavaScript

Akhir sekali, kami menyimpan objek yang dihuraikan ke dalam objek JavaScript. Di sini kami mentakrifkan tatasusunan buku untuk menyimpan maklumat tentang setiap buku. Kodnya adalah seperti berikut:

$.ajax({
    type: "GET",
    url: "books.xml",
    dataType: "xml",
    success: function(xml) {
        var xmlDoc = $.parseXML(xml),
            $xml = $(xmlDoc),
            books = [];

        $xml.find("book").each(function() {
            var book = {
                name: $(this).find("name").text(),
                author: $(this).find("author").text(),
                price: $(this).find("price").text()
            };
            books.push(book);
        });
        console.log(books);
    }
});

Dalam kod di atas, kami menggunakan kaedah $xml.find untuk mencari setiap buku dalam XML dan menggunakan kaedah .each untuk mengulang setiap buku. Dalam gelung setiap buku, kami menggunakan kaedah .find jQuery untuk mendapatkan tajuk, pengarang dan harga serta menyimpannya ke dalam objek buku. Akhir sekali, kami menambah objek buku ini pada tatasusunan buku.

Selepas mendapatkan tatasusunan buku, kami boleh menggunakannya untuk memaparkan data, melaksanakan operasi seterusnya, dsb.

Ringkasan

Artikel ini memperkenalkan cara menggunakan JavaScript untuk menukar data XML kepada objek. Kemahiran ini sangat penting untuk pembangun bahagian hadapan, kerana halaman hujung hadapan selalunya perlu mendapatkan data XML daripada pelayan untuk paparan dan operasi.

Dalam pembangunan sebenar, kami mungkin menghadapi beberapa struktur data XML yang kompleks, atau perlu menukar data XML kepada objek JavaScript yang lebih kompleks. Pada masa ini, kami perlu menganalisis struktur data XML dengan lebih terperinci dan menggunakan teknik yang lebih maju untuk menyelesaikan operasi ini.

Atas ialah kandungan terperinci Bagaimana untuk menukar data XML kepada objek dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!