Ajax &db

ajax هي إختصار ل ( Asynchronous JavaScript And XML) وهي مفهوم أو تقنية يتمركز حول إرسال طلبات من العميل إلى الخادم بهدف جلب البيانات أو تنفيذ بيانات دون الحاجة إلى إعادة تحديث الصفحة , ومن أشهر تقنيات الajax هي مكتبة fetch والتي تقوم بتسهيل عملية إرسال وإستقبال الطلبات إلى الخادم

ومن مميزات مكتبة fetch إنها مدعومة بشكل إفتراضي من قِبل أغلب المتصفحات فلا تحتاج إلى تنزيل مكتبات خارجية

يتم إستخدامها بالشكل التالي

fetch('http://example.com/')
  .then(response => response.json())
  .then(data => console.log(data));

حيث كما هو موضح بالأعلى نقوم بكتابة fetch ومن ثم بعد ذاك نكتب بداخلها الرابط الذي نقوم من خلاله بجلب البيانات, من ثم نقوم بكتابة الدالة then والتي نضع بداخلها دالة callback يتم تنفيذها فور إنتهاء الطلب وإرسال الرد من قِبل الخادم

ونقوم بتحويل الرد إلى صيغة json ومن ثم نقوم بكتابة دالة then أخرى نكتب فيها الفعل الذي نريد تنفيذه على تلك البيانات, في المثال السابق قمنا بطباعة البيانات, لتقوم بوضع البيانات بداخل div من الممكن تعديل المثال السابقة إلى الشكل التالي

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => {
      document.getElementById("اكتب هنا المُعرف الخاص بالعنصر")
      .innerHTML=data   
    });

في هذا المثال نقوم بوضع البيانات بداخل عنصر له id محدد , يمكنك إستبدال ذلك المُعرف id بالمُعرف الخاص بالعنصر الذي تريد إدخال البيانات المجلوبة به

ويمكنك قراءة تلك المقالات ستساعدك كثيرًا