วิธีการจัดรูปแบบ DOM เป็นข้อความ XML ในแบบข้ามเบราว์เซอร์โดยใช้ JavaScript

เมื่อทำงานกับข้อมูล XML ในแอปพลิเคชันเว็บ คุณอาจพบสถานการณ์ที่คุณจำเป็นต้องจัดรูปแบบวัตถุ DOM เป็นข้อความ XML งานนี้อาจซับซ้อน โดยเฉพาะเมื่อพิจารณาถึงความเข้ากันได้ระหว่างเบราว์เซอร์ หากคุณกำลังใช้วัตถุ XML ที่คุณโหลดโดยใช้ XMLHTTPRequest และต้องการบันทึกเป็นสตริงหลังจากทำการเปลี่ยนแปลงด้วย jQuery คุณอาจสงสัย: ฉันจะจัดรูปแบบ DOM เป็นข้อความ XML ในลักษณะที่ทำงานได้ในเบราว์เซอร์ที่แตกต่างกันได้อย่างไร?

ความท้าทายของการจัดรูปแบบข้ามเบราว์เซอร์

ด้วยเบราว์เซอร์ต่าง ๆ ที่นำเสนอ API และฟีเจอร์ต่างกัน การจัดรูปแบบ XML อาจทำให้เกิดประสบการณ์ที่ไม่สอดคล้องกัน เบราว์เซอร์สมัยใหม่อย่าง Firefox และ Chrome มีวิธีการที่ตรงไปตรงมาสำหรับการจัดรูปแบบ XML ผ่านทางอินเทอร์เฟซ XMLSerializer อย่างไรก็ตาม เบราว์เซอร์รุ่นเก่า เช่น Internet Explorer มีวิธีการจัดรูปแบบ XML ที่แตกต่างออกไป ซึ่งอาจทำให้เกิดปัญหาความเข้ากันได้เมื่อพยายามพัฒนาแอปพลิเคชันที่ทำงานได้อย่างราบรื่นในทุกแพลตฟอร์ม

ภาพรวมของทางออก

ในการจัดรูปแบบโหนด DOM เป็นข้อความ XML ในเบราว์เซอร์ที่ต่างกัน คุณสามารถใช้การรวมกันของวิธีการสมัยใหม่และวิธีการที่มีอยู่แล้ว ด้านล่างนี้คือคำแนะนำทีละขั้นตอนเพื่อให้บรรลุผลนี้ด้วยฟังก์ชันง่าย ๆ:

ขั้นตอนที่ 1: สร้างฟังก์ชัน

ขั้นตอนแรกคือการสร้างฟังก์ชันที่พยายามจัดรูปแบบ XML โดยใช้วิธี XMLSerializer สำหรับเบราว์เซอร์สมัยใหม่ ในขณะที่มีการลากกลับไปยังวิธีทางเลือกสำหรับเบราว์เซอร์รุ่นเก่า เช่น IE

นี่คือตัวอย่างฟังก์ชันที่กระชับ:

function xml2Str(xmlNode) {
    try {
        // เบราว์เซอร์สมัยใหม่ (Gecko- และ Webkit-based: Firefox, Chrome, Opera).
        return (new XMLSerializer()).serializeToString(xmlNode);
    } catch (e) {
        try {
            // Internet Explorer.
            return xmlNode.xml;
        } catch (e) {  
            // จัดการกรณีที่ไม่รองรับ.
            alert('XmlSerializer ไม่สามารถใช้งานได้ในเบราว์เซอร์นี้');
        }
    }
    return false; // คืนค่า false หากการจัดรูปแบบล้มเหลว
}

ขั้นตอนที่ 2: วิธีการทำงานของฟังก์ชัน

• บล็อก Try 1: ฟังก์ชันจะพยายามจัดรูปแบบ XMLNode โดยใช้ XMLSerializer ซึ่งได้รับการสนับสนุนทั่วไปในเบราว์เซอร์สมัยใหม่ ซึ่งเป็นวิธีที่ต้องการและคืนค่า XML ที่จัดรูปแบบแล้วเป็นสตริง

• บล็อก Try 2: หากความพยายามครั้งแรกล้มเหลว (ใน IE) ฟังก์ชันจะจับข้อผิดพลาดและพยายามเข้าถึงคุณสมบัติ xml ของโหนด ซึ่งเป็นวิธีการที่ได้รับการสนับสนุนใน Internet Explorer วิธีนี้จะดึงข้อความ XML ออกมา

• บล็อก Catch: หากทั้งสองวิธีล้มเหลว ฟังก์ชันจะแจ้งเตือนผู้ใช้ว่า การจัดรูปแบบไม่สามารถใช้งานได้ในเบราว์เซอร์ของพวกเขา สิ่งนี้มีความสำคัญต่อการดีบักและข้อมูลฟีดแบ็กแก่ผู้ใช้

สรุป

โดยการใช้แนวทางแบบสองทางที่ง่ายนี้ คุณสามารถมั่นใจได้ว่าการจัดรูปแบบ XML ของคุณทำงานได้ในเบราว์เซอร์ที่แตกต่างกันโดยไม่เพิ่มความซับซ้อนที่ไม่จำเป็น ในขณะที่วิธี XMLSerializer เป็นวิธีที่ต้องการสำหรับแอปพลิเคชันสมัยใหม่ ฟังก์ชันนี้ให้โซลูชันที่มีความแข็งแกร่งซึ่งรองรับเบราว์เซอร์รุ่นเก่า เพื่อให้การทำงานร่วมกันและฟังก์ชันการทำงานเป็นไปได้

โดยการเข้าใจและใช้เทคนิคการจัดรูปแบบนี้ คุณสามารถจัดการและเก็บข้อมูล XML ในแอปพลิเคชันเว็บของคุณได้อย่างมั่นใจ ไม่ว่าจะเป็นเบราว์เซอร์ของผู้ใช้คืออะไร