Yousef Gareap نشر 8 ديسمبر 2023 أرسل تقرير مشاركة نشر 8 ديسمبر 2023 كنت اريد ان اسأل ما هو ال ajax , DOM Manipulation في javascript وما هي استخدماتها 2 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 8 ديسمبر 2023 أرسل تقرير مشاركة نشر 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); } اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Mustafa Suleiman نشر 8 ديسمبر 2023 أرسل تقرير مشاركة نشر 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> اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمد سعد شحرور نشر 8 ديسمبر 2023 أرسل تقرير مشاركة نشر 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)); اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Ahmed Elmrsawy نشر 8 ديسمبر 2023 أرسل تقرير مشاركة نشر 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); }); اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Yousef Gareap
كنت اريد ان اسأل
ما هو ال ajax , DOM Manipulation في javascript وما هي استخدماتها
رابط هذا التعليق
شارك على الشبكات الإجتماعية
4 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.