127- دروس جافا سكربت – JS AJAX XML File

## شرح مفصل لـ AJAX مع ملفات XML في JavaScript

AJAX هو اختصار لـ Asynchronous JavaScript and XML، وهي تقنية تستخدم لبناء تطبيقات ويب ديناميكية وتفاعلية. تمكنك AJAX من تحديث أجزاء من صفحة الويب دون الحاجة إلى إعادة تحميل الصفحة بالكامل، مما يحسن من تجربة المستخدم ويقلل من زمن الاستجابة.

### كيف يعمل AJAX؟

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

### خطوات استخدام AJAX مع ملفات XML

1. **إنشاء XMLHttpRequest Object**: هو جوهر AJAX الذي يسمح بإرسال واستقبال البيانات من الخادم.

2. **فتح الاتصال مع الخادم**: باستخدام الطريقة `open()`، تحدد نوع الطلب (GET أو POST) وعنوان URL.

3. **إرسال الطلب**: باستخدام الطريقة `send()`، يمكنك إرسال الطلب إلى الخادم.

4. **معالجة الاستجابة**: عند استلام البيانات، يمكنك معالجتها باستخدام JavaScript.

### مثال على استخدام AJAX مع ملف XML

سنقوم بإنشاء مثال يوضح كيفية تحميل ملف XML باستخدام AJAX [شركة برمجة مصرية] وJavaScript.

#### ملف XML (books.xml)

“`xml

JavaScript: The Good Parts
Douglas Crockford
2008

Learning XML
Erik T. Ray
2003

“`

#### HTML وجافا سكريبت لطلب AJAX

“`html

AJAX XML Example

Book List

function loadXMLDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
displayBooks(this);
}
};
xhttp.open(“GET”, “books.xml”, true);
xhttp.send();
}

function displayBooks(xml) {
const xmlDoc = xml.responseXML;
const books = xmlDoc.getElementsByTagName(“book”);
let output = “

    “;

    for (let i = 0; i < books.length; i++) {
    const title = books[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
    const author = books[i].getElementsByTagName("author")[0].childNodes[0].nodeValue;
    const year = books[i].getElementsByTagName("year")[0].childNodes[0].nodeValue;
    output += `

  • ${title} by ${author} (${year})

    • `;
    }

    output += “

“;
document.getElementById(“bookList”).innerHTML = output;
}

“`

### شرح الكود

1. **إنشاء XMLHttpRequest**: يتم إنشاء كائن XMLHttpRequest جديد، والذي يُستخدم لإرسال واستقبال البيانات.

2. **تحديد التغير في حالة الطلب**: نستخدم `onreadystatechange` لتحديد ما يجب فعله عند تغير حالة الطلب. عندما تكون `readyState` تساوي 4، يعني أن الطلب قد اكتمل، وإذا كانت `status` تساوي 200، فإن الطلب كان ناجحًا.

3. **فتح الطلب وإرساله**: نستخدم `open()` لتحديد نوع الطلب وعنوان URL، ثم `send()` لإرسال الطلب.

4. **معالجة البيانات المستلمة**: يتم تحليل ملف XML المستلم باستخدام `responseXML`، ثم يتم استخراج البيانات المطلوبة (العنوان، المؤلف، والسنة) وعرضها في قائمة غير مرتبة.

### الخاتمة

تقنية AJAX تتيح لك إنشاء تطبيقات ويب أكثر ديناميكية وتفاعلية من خلال تحديث أجزاء من الصفحة بشكل غير متزامن. على الرغم من أن JSON أصبح الخيار الأكثر شيوعًا لتبادل البيانات، إلا أن XML لا يزال [شركة برمجة مصرية] يُستخدم في بعض التطبيقات، وفهم كيفية التعامل معه يمكن أن يكون مفيدًا في العديد من السيناريوهات. من خلال المثال أعلاه، يمكنك الآن بناء تطبيقات بسيطة تستخدم AJAX لقراءة ومعالجة ملفات XML.

الوسوم: AJAXjavascriptXMLاستجابة غير متزامنةبرمجة ويبتطبيقات ديناميكيةتعلم البرمجة