Ajax &db

يعمل AJAX على إرسال طلبية HTTP Request ألى الخادم، server حيث نرسلها لرابط معين، نفس فكرة HTML Form حيث نحدد المسار و الطريقة post - get .. و تكون البيانات عبارة عن مفتاح-قيمة ترسل للمخدم.

إن افترضنا أنك تتصل على ملف php فإن أي محتوى يتم طباعته مثلا باستخدام echo يتم استقباله في دالة نجاح الطلبية في شيفرة جافاسكربت/أجاكس.. success callback function, ثم باستخدام دوال جافاسكربت التي تعدل على DOM يمكنك حشر المحتوى بالطريقة التي تريدها.

مقالة:

مثال:

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 بالمُعرف الخاص بالعنصر الذي تريد إدخال البيانات المجلوبة به

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