ماهو كل من ajax , DOM Manipulation

Yousef Gareap · 8 ديسمبر 2023

كنت اريد ان اسأل

ما هو ال ajax , DOM Manipulation في javascript وما هي استخدماتها

عمر قره محمد · 8 ديسمبر 2023

التلاعب بالـ DOM (Document Object Model) هو عملية تغيير محتوى وهيكل صفحة الويب باستخدام JavaScript. وتتضمن إضافة وإزالة أو تعديل عناصر HTML وسماتها.

AJAX (Asynchronous JavaScript and XML) هي تقنية تستخدم لإرسال واستقبال البيانات من خادم بدون إعادة تحميل صفحة الويب بأكملها.

يمكن استخدام AJAX لتحديث محتوى صفحة الويب بشكل ديناميكي دون الحاجة إلى إعادة تحميل الصفحة بأكملها، وغالبًا ما يتم استخدام AJAX ومعالجة DOM معًا لإنشاء تطبيقات ويب ديناميكية.

لاستخدامهما ، تحتاج إلى فهم أساسي لـ JavaScript وصياغته.

يمكنك استخدام طرق JavaScript مثل `getElementById()` و `createElement()` و `appendChild()` و `removeChild()` و `setAttribute()` لمعالجة DOM.

يمكن تنفيذ AJAX باستخدام كائن `XMLHttpRequest` أو طريقة `$.ajax()` في jQuery.

فيما يلي بعض أمثلة لاستخدام معالجة DOM و AJAX في JavaScript:

1. التعلاق بالـ DOM:

// إعداد عنصر HTML بإدارة قيم للأنقطة
var element = document.getElementById("myElement");

// إضاف نص مجموع للعنصر
element.innerHTML = "النص الجديد";

// إزال عنصر من الصف
element.remove();

// تعديل سمات العنصر
element.setAttribute("data-text", "النص المحدد");

2. AJAX:

// استخدام jQuery
$.ajax({
  url: "ajax/example.php",
  type: "POST",
  data: { param1: "value1", param2: "value2" },
  success: function(response) {
    // إعداد العنصر الجديد مع الاستجابة
    $("body").append(response);
  }

Mustafa Suleiman · 8 ديسمبر 2023

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

أما DOM Manipulation هي عملية تغيير محتوى صفحة الويب الديناميكي باستخدام JavaScript، ومن الممكن استخدام DOM Manipulation لإضافة عناصر جديدة إلى الصفحة، أو إزالة عناصر موجودة، أو تعديل خصائص العناصر الموجودة.

ونستخدم AJAX و DOM Manipulation لإنشاء مجموعة متنوعة من التطبيقات الويب التفاعلية، بما في ذلك:

تطبيقات الويب التي تعرض بيانات محدثة باستمرار، مثل الأخبار أو الطقس.
تطبيقات الويب التي تسمح للمستخدمين بإجراء عمليات البحث أو إدخال البيانات.
ألعاب الويب أو تطبيقات الويب الأخرى التي تتطلب ردود فعل في الوقت الفعلي.

وإليك أمثلة لتوضيح الفكرة على استخدام AJAX:

تطبيق ويب يعرض قائمة بآخر الأخبار لتحديث القائمة تلقائيًا دون الحاجة إلى إعادة تحميل الصفحة بالكامل.
تطبيق ويب يسمح للمستخدمين بالبحث عن المنتجات لإرسال استعلام البحث إلى الخادم وعرض نتائج البحث على الصفحة دون الحاجة إلى إعادة تحميل الصفحة بالكامل.
لعبة ويب تسمح للمستخدمين بالتحكم في الشخصية لإرسال أوامر الحركة إلى الخادم وتلقي ردود الفعل من الخادم لتحريك الشخصية على الصفحة.

ولنقم بتطبيق ذلك من خلال الكود للمثال الأول:

<script>
function getNews() {
  // إنشاء طلب AJAX إلى خادم الويب
  const xhr = new XMLHttpRequest();
  xhr.open("GET", "/api/news");
  xhr.onload = function() {
    // معالجة استجابة الخادم
    if (xhr.status === 200) {
      // تحويل الاستجابة إلى كائن JSON
      const news = JSON.parse(xhr.responseText);

      // تحديث قائمة الأخبار على الصفحة
      const newsList = document.getElementById("news-list");
      newsList.innerHTML = "";
      for (let i = 0; i < news.length; i++) {
        const newsItem = document.createElement("li");
        newsItem.textContent = news[i].title;
        newsList.appendChild(newsItem);
      }
    }
  };
  xhr.send();
}

// استدعاء دالة getNews() عند تحميل الصفحة
window.onload = getNews;
</script>

ولكن تم تقديم واجهة fetch API لتسهيل التعامل مع طلبات AJAX، ونفس المثال سنكتبه كالتالي:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>مثال على استخدام fetch و DOM Manipulation</title>
</head>
<body>
  <script>
    function getNews() {
      // إنشاء طلب fetch إلى خادم الويب
      fetch("/api/news")
        .then(response => response.json())
        .then(news => {
          // تحديث قائمة الأخبار على الصفحة
          const newsList = document.getElementById("news-list");
          newsList.innerHTML = "";
          for (let i = 0; i < news.length; i++) {
            const newsItem = document.createElement("li");
            newsItem.textContent = news[i].title;
            newsList.appendChild(newsItem);
          }
        });
    }

    // استدعاء دالة getNews() عند تحميل الصفحة
    window.onload = getNews;
  </script>

  <ul id="news-list"></ul>
</body>
</html>

محمد سعد شحرور · 8 ديسمبر 2023

بداية، ال DOM يرمز ل Document Object Model، وهية واجهة تعبر عن بنية صفحة الويب كشجرة من ال objects، حيث كل object يعبر عن عنصر او خواص معينة للعنصر او نصوص لتتعامل معها لغة ال Javascript.

أما DOM Manipulation فهي تعديل هذه العناصر أو النصوص او الخواص او التنسيقات لكل object، وهذا مثال عن هذه العمليات:

const element = document.getElementById('myElement'); // لجلب عنصر معين من الشجرة

element.innerHTML = 'New content'; // تعديل النص الخاص بالعنصر الذي قمنا بجلبه
element.setAttribute('class', 'newClass'); // تعديل خاصية الكلاس لهذا العنصر
element.style.color = 'red'; // تعديل تنسيق لون النص لهذا العنصر

const newElement = document.createElement('div'); // انشاء عنصر جديد
document.body.appendChild(newElement); // اضافة العنصر الذي انشأناه الى نهاية جسم الصفحة

أما ال AJAX فهو يرمز الى Asynchronous JavaScript and XML، وهي مجموعة تقنيات تسمح بتحديث صفحة الويب بشكل غير متزامن، مما يضيف ديناميكية للصفحة:

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

مع العلم، ان المتصفحات الحديثة تستخدم تقنيات أخرى لأداء نفس الغرض، مثل fetch:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Ahmed Elmrsawy · 8 ديسمبر 2023

السلام عليكم ,
بالنسبة لل Dom manipulation
الdom هو document object model و هو عبارة عن صفحة الhtml التي تظهر أمامك ولكن بالتعامل معها على أنها شجرة من العناصر
و هذا يسهل التلاعب بها و من استخداماتة :
1- تحديث محتوى الصفحة دون إعادة تحميلها و هذا يضمن أن يستمر الزائر في صفحتك وقت أطول و لهذا السبب أيضا تم انشاء اطارات العمل الحديثة مثل react و angulalr و vue لأنهم يقومون بالتنقل دون اعادة التحميل .
2-event handling : و هو المقصود بة التحكم في event معين مثل الضغطة على button أو عمل submit لform او حتا تحريك الماوس
3-تغيير الstyle نتيجة لحدث معين أو بعد مدة معينة .
مثال:

// تحديث نص العنصر الذي لديه id="example"
document.getElementById("example").innerHTML = "النص بعد التحديث";

// إضافة عنصر جديد إلى الصفحة
var newElement = document.createElement("p");
newElement.innerHTML = "هذا نص جديد للعنصر";
document.body.appendChild(newElement);

______________________________________________________________________________
2-Ajax (Asynchronous JavaScript and XML):

Ajax هو نهج لتبادل البيانات بين الخادم والعميل بشكل غير متزامن، أي بدون إعادة تحميل الصفحة. يستخدم Ajax تقنيات JavaScript و XML (أو بشكل أكثر شيوعًا JSON) لتحقيق هذا التبادل الفعّال.
مما يؤدي الى تبادل البيانات و المحافظة على الصفحة بدون اعادة تحميل .
الاستخدامات :
-تحميل البيانات ديناميكياً: يُستخدم Ajax لتحميل البيانات من الخادم بدون إعادة تحميل الصفحة.

-تحديث جزئي للصفحة: يُمكن تحديث أجزاء صغيرة من الصفحة بدلاً من تحميلها كاملة.
-تفاعل الواجهة الرسومية: يُستخدم في تطبيقات الويب التي تتيح للمستخدم التفاعل بسرعة مع البيانات.

مثال :

// استخدام Axios لإجراء طلب HTTP
axios.get("https://example.com/api/data")
  .then(function (response) {
    // التعامل مع البيانات المستلمة هنا
    console.log(response.data);
  })
  .catch(function (error) {
    // التعامل مع أخطاء الطلب هنا
    console.error("حدث خطأ في الطلب:", error);
  });

ماهو كل من ajax , DOM Manipulation

السؤال

Yousef Gareap

رابط هذا التعليق

شارك على الشبكات الإجتماعية

4 أجوبة على هذا السؤال

Recommended Posts

عمر قره محمد

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Mustafa Suleiman

رابط هذا التعليق

شارك على الشبكات الإجتماعية

محمد سعد شحرور

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Ahmed Elmrsawy

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية