العمل مع ملفات XML و JSON

الدرس الواحد والعشرون: العمل مع ملفات XML و JSON

في هذا الدرس، سنتناول كيفية التعامل مع ملفات XML و JSON في تطبيقات الويب. سنتعرف على كيفية استخدام XMLHttpRequest لطلب البيانات من الخوادم، بالإضافة إلى كيفية تحليل البيانات باستخدام DOMParser وطرق التعامل مع JSON باستخدام JavaScript.

1. التعامل مع XMLHttpRequest لطلب البيانات من الخوادم

في الماضي، كان يتم استخدام XMLHttpRequest (XHR) بشكل شائع لإرسال واستقبال البيانات بين المتصفح والخادم عبر بروتوكول HTTP. رغم أن Fetch API قد أصبحت أكثر شيوعًا في الوقت الحالي، إلا أن XMLHttpRequest لا يزال يستخدم في العديد من التطبيقات.

كيفية إرسال طلب باستخدام XMLHttpRequest:

// إنشاء كائن XMLHttpRequest
let xhr = new XMLHttpRequest();

// تحديد نوع الطلب (GET) وعنوان URL
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", true);

// تحديد ما يحدث عند تلقي الاستجابة
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    // استلام البيانات وتحويلها إلى JSON
    let data = JSON.parse(xhr.responseText);
    console.log(data); // عرض البيانات المستلمة
  } else {
    console.error("Error loading the data:", xhr.status);
  }
};

// إرسال الطلب
xhr.send();

شرح الكود:

• xhr.open(): يحدد طريقة الطلب (GET) وعنوان URL الذي سيتم إرسال الطلب إليه.
• xhr.onload(): هذا الحدث يتم تفعيله عندما يتم تحميل البيانات بنجاح. عند النجاح، نقوم بتحويل الاستجابة (التي تكون في صيغة نصية) إلى JSON باستخدام JSON.parse().
• xhr.send(): يتم إرسال الطلب إلى الخادم.

2. تحليل البيانات باستخدام DOMParser

عند التعامل مع ملفات XML، تحتاج إلى استخدام DOMParser لتحويل البيانات النصية (الـ XML) إلى مستند يمكن العمل معه باستخدام DOM (نموذج الكائنات المُستندة إلى المستند).

كيفية استخدام DOMParser لتحليل بيانات XML:

إذا كنت تتعامل مع بيانات XML، يمكنك استخدام DOMParser لتحويل النصوص إلى كائنات XML:

// XML كنص
let xmlString = `
  <books>
    <book>
      <title>JavaScript for Beginners</title>
      <author>John Doe</author>
    </book>
    <book>
      <title>Advanced CSS</title>
      <author>Jane Smith</author>
    </book>
  </books>
`;

// استخدام DOMParser لتحويل النص إلى مستند XML
let parser = new DOMParser();
let xmlDoc = parser.parseFromString(xmlString, "text/xml");

// استخراج البيانات من المستند
let books = xmlDoc.getElementsByTagName("book");
for (let i = 0; i < books.length; i++) {
  let title = books[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
  let author = books[i].getElementsByTagName("author")[0].childNodes[0].nodeValue;
  console.log(`Title: ${title}, Author: ${author}`);
}

شرح الكود:

• DOMParser: هي واجهة تُستخدم لتحويل النصوص من نوع XML أو HTML إلى كائنات DOM.
• parseFromString(): تستخدم لتحويل النص إلى مستند XML (أو HTML) يمكن التعامل معه باستخدام الـ DOM.
• getElementsByTagName(): تُستخدم للحصول على جميع العناصر التي تحمل اسم العلامة (مثل book في هذا المثال).
• childNodes: للوصول إلى النص داخل العناصر.

3. التعامل مع JSON في JavaScript

يعد JSON (JavaScript Object Notation) هو التنسيق الأكثر شيوعًا لتبادل البيانات بين الخادم والمتصفح، ويتميز بسهولة قراءته واستخدامه. في JavaScript، يمكن التعامل مع JSON باستخدام دوال مدمجة مثل JSON.parse() و JSON.stringify().

3.1 تحليل بيانات JSON باستخدام JSON.parse():

// JSON كنص
let jsonString = '{"name": "John", "age": 30, "city": "New York"}';

// تحويل النص إلى كائن JavaScript باستخدام JSON.parse()
let jsonData = JSON.parse(jsonString);

// استخدام البيانات
console.log(jsonData.name);  // يعرض: John
console.log(jsonData.age);   // يعرض: 30

3.2 تحويل كائن JavaScript إلى JSON باستخدام JSON.stringify():

// كائن JavaScript
let person = {
  name: "Jane",
  age: 25,
  city: "Los Angeles"
};

// تحويل الكائن إلى نص JSON باستخدام JSON.stringify()
let jsonString = JSON.stringify(person);

// عرض النص
console.log(jsonString);  // يعرض: {"name":"Jane","age":25,"city":"Los Angeles"}

ملاحظات:

• JSON.parse(): تُستخدم لتحويل النصوص بتنسيق JSON إلى كائنات JavaScript.
• JSON.stringify(): تُستخدم لتحويل كائن JavaScript إلى نص بتنسيق JSON.

4. دمج XMLHttpRequest مع JSON و XML

في بعض الأحيان، قد تحتاج إلى العمل مع بيانات من نوع JSON أو XML في نفس التطبيق. في هذا الجزء، سنرى كيف يمكن دمج استخدام XMLHttpRequest مع التعامل مع JSON و XML.

مثال: طلب بيانات بتنسيق JSON وتحليلها:

let xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", true);

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    let data = JSON.parse(xhr.responseText);  // تحليل JSON
    console.log(data);
  } else {
    console.error("Error loading JSON data");
  }
};

xhr.send();

مثال: طلب بيانات بتنسيق XML وتحليلها باستخدام DOMParser:

let xhr = new XMLHttpRequest();
xhr.open("GET", "path/to/your/xmlfile.xml", true);

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    let xmlDoc = new DOMParser().parseFromString(xhr.responseText, "text/xml");  // تحليل XML
    let books = xmlDoc.getElementsByTagName("book");
    for (let i = 0; i < books.length; i++) {
      let title = books[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
      console.log(title);
    }
  } else {
    console.error("Error loading XML data");
  }
};

xhr.send();

الخلاصة

في هذا الدرس، تعلمنا كيفية العمل مع XMLHttpRequest لطلب البيانات من الخوادم باستخدام GET. كما تعلمنا كيفية تحليل البيانات JSON باستخدام JSON.parse()، وتحليل XML باستخدام DOMParser. هذه المهارات أساسية في التعامل مع البيانات من الخوادم في تطبيقات الويب، سواء كانت بصيغة JSON أو XML.