اذهب إلى المحتوى
  • 0

الفرق مابين fetch و xhr في javascript

Ecommerce Vente

السؤال

Recommended Posts

  • 1

fetch تحتوي على ميزات اضافية عن XHR واهمها :

  • تستطيع استخدام الـ Cache API مع كل من ال request و الـ response. 
  • تمكنك من طلب no-cors requests من مواقع لا تدعم الـ CORS.
  • يمكنك ارسال response بشكل بث "Streaming responses" ليست متوفرة بعد في المتصفحات.
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 1

بعض الميزات التي توضح الفرق بين الطريقتين:

من أجل fetch:

  1. لا يوجد بها طريقة مضمنة للتعامل مع الوثائق.
  2. لا توجد طريقة لكي نضع مؤقت.
  3. لا يمكن تعديل نوع المحتوى في ترويسة الاستجابة.
  4. إذا كان طول المحتوى متوافر و لكن مخفي فإنه من غير الممكن معرفة طول جسم الاستجابة.
  5. سوف تقوم باستدعاء ال handler المسؤول عن إجهاض الإشارة حتى لو أن الطلب قد تم بنجاح.
  6. لا يوجد مؤشر للتقدم في عملية رفع الملفات.

من أجل XHR:

  1. لا يوجد طريقة لعدم إرسال ال cookies بشكل قياسي.
  2. لا يمكنها أن تعيد أغراض من FormData.
  3. لا تحتوي على مكافئ لنمط no-cors الموجود في fetch.
  4. دائماً تتبع إعادة التوجيه redirect.
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 1

Fetch هي واجهة برمجة تطبيقات لطلب Ajax حديثة مستندة إلى Promise ظهرت لأول مرة في عام 2015 وهي مدعومة في معظم المتصفحات. لم يتم بناؤه على XMLHttpRequest ويوفر تناسقًا أفضل مع بناء جملة أكثر إيجازًا. تعمل سلسلة Promise التالية بشكل مماثل :

fetch("/url", { method: "GET" })
  .then((res) => res.json())
  .then((json) => console.log(json))
  .catch((err) => console.error("error:", err));

أو يمكنك استخدام ascync / await :

try {
  const res = await fetch("/url", { method: "GET" }),
    // انتظار الرد من سيرفر
    json = await res.json();

  console.log(json);
} catch (err) {
  console.error("error:", err);
}

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

يتم دعم XMLHttpRequest من قبل جميع المتصفحات الرئيسية وأصبح معيارًا رسميًا للويب في عام 2006. مثال بسيط يجلب البيانات من نطاقك / الخدمة / نقطة النهاية ويعرض نتيجة JSON في وحدة التحكم كنص:

const xhr = new XMLHttpRequest();
xhr.open("GET", "/service");

// عند تغير الحالة
xhr.onreadystatechange = () => {
  // هل الإستعلام إكتمل ؟
  if (xhr.readyState !== 4) return;

  if (xhr.status === 200) {
    // إكتمل بنجاح 
    console.log(JSON.parse(xhr.responseText));
  } else {
    // حدوث خطأ
    console.log("HTTP error", xhr.status, xhr.statusText);
  }
};

// إرسال
xhr.send();

أهم مميزات fetch :

  • التحكم في cach
  • التحكم في cors
  • التحكم في Credential 
  • التحكم في redirect
  • Data Streams
  • الدعم الكلي لجانب الخادم

أهم مميزات XHR:

  • تدعم Timeout
  • دعم Abort : يمكن إلغاء طلب أثناء الرحلة عن طريق تشغيل أسلوب إحباط XMLHttpRequest (). يمكن إرفاق معالج إحباط إذا لزم الأمر
  • تدعم جميع المتصفحات

وهذه مقالة على ajax 

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...