أجاكس (برمجة)

📅 آخر تحديث: ٢٢ يوليو ٢٠٢٦
✍️ نُشر في: ٢٢ يوليو ٢٠٢٦
📷 يحتوي على 1 صور
الموسوعة الحرة

جافا سكريبت غير المتزامنة وXML [ 1 ] [ 2 ] ، والتي يُشار إليها عادةً باسم Ajax (تُكتب أحيانًا AJAX بحرف كبير ، / ˈeɪdʒæks / ) ، هي مجموعة من تقنيات تطوير الويب التي تستخدم تقنيات ويب غير متزامنة متنوعة من جانب العميل لإنشاء تطبيقات ويب . باستخدام Ajax، يمكن لتطبيقات الويب إرسال واستقبال البيانات من الخادم بشكل غير متزامن (في الخلفية) دون التأثير على عرض وسلوك الصفحة الحالية. من خلال فصل طبقة تبادل البيانات عن طبقة العرض، تسمح Ajax لصفحات الويب، وبالتالي تطبيقات الويب، بتغيير المحتوى ديناميكيًا دون الحاجة إلى إعادة تحميل الصفحة بالكامل. [ 3 ] عمليًا، تستخدم التطبيقات الحديثة عادةً JSON بدلاً من XML .

أجاكس ليس تقنية بحد ذاته، بل هو نمط برمجي. يمكن تعديل صفحة الويب باستخدام جافا سكريبت لعرض المعلومات المسترجعة ديناميكيًا (والسماح للمستخدم بالتفاعل معها) دون الحاجة إلى إعادة تحميل الصفحة. يمكن استخدام كائن XMLHttpRequest المدمج لتنفيذ طلبات أجاكس على صفحات الويب، كما أن الدالة المدمجة fetch()هي بديل أحدث لـ XMLHttpRequest ويمكن استخدامها أيضًا لتنفيذ أجاكس.

تاريخ

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

تعود جذور تقنية Ajax إلى عام 1996 مع إطلاق JavaScript 1. سرعان ما اكتشف المطورون إمكانية استخدام أي عنصر HTML يقبل السمة "src" لجلب البيانات من الخادم. بتغيير قيمة src لإطار مخفي ، يستطيع المطور جلب البيانات ومعالجتها وعرضها دون الحاجة إلى إعادة تحميل الصفحة. قد تكون البيانات عبارة عن سلسلة نصية، أو كود JavaScript، أو ملف XML، أو جزء من صفحة HTML مُولّدة على الخادم. يمكن تطبيق نفس المبدأ على وسمي <img> و <img>، لكن العديد من المطورين تخوفوا من فكرة ملف GIF قابل للتنفيذ ، وفضلوا استخدام الإطار المخفي . استُخدمت هذه التقنية في متصفحي Netscape Navigator و Internet Explorer ، وهما المتصفحان الرئيسيان آنذاك، إلى أن اكتشف المطورون تضمين كائن خادم XMLHTTP (MSXML 1.0) في Internet Explorer 4 [ 4 ] . بعد ذلك، استُخدمت خاصية الكشف عن المتصفح إما لتطبيق الإطار المخفي في Netscape أو لاستخدام كائن XMLHTTP (MSXML 1.0) في IE 4.<img><embed><iframe><iframe>

في عام 1996، قدم متصفح إنترنت إكسبلورر وسم iframe لتضمين صفحة ويب داخل صفحة ويب أخرى، مع تحميل الصفحة المضمنة بشكل غير متزامن. وفي عام 1998، طور فريق مايكروسوفت أوتلوك ويب أكسس المفهوم الكامن وراء كائن البرمجة النصية XMLHttpRequest . [ 5 ] ظهر هذا الكائن باسم XMLHTTP في الإصدار الثاني من مكتبة MSXML ، [ 5 ] [ 6 ] الذي صدر مع إنترنت إكسبلورر 5.0 في مارس 1999. [ 7 ]

تم لاحقًا تطبيق وظائف عنصر تحكم ActiveX الخاص بـ XMLHTTP في متصفح ويندوز، والذي كان موجودًا في إنترنت إكسبلورر 5، بواسطة متصفحات أخرى مثل موزيلا فايرفوكس ، وسفاري ، وأوبرا ، وجوجل كروم ، وغيرها، وذلك من خلال كائن جافا سكريبت XMLHttpRequest. [ 8 ] اعتمدت مايكروسوفت نموذج XMLHttpRequest الأصلي بدءًا من إنترنت إكسبلورر 7. وظل دعم إصدار ActiveX متاحًا في إنترنت إكسبلورر وفي "وضع إنترنت إكسبلورر" في مايكروسوفت إيدج . وظلت فائدة طلبات HTTP الخلفية وتقنيات الويب غير المتزامنة هذه غير واضحة إلى حد كبير حتى بدأت بالظهور في تطبيقات واسعة النطاق عبر الإنترنت مثل Outlook Web Access (2000) [ 9 ] و Oddpost (2002). [ 10 ]

قامت جوجل بنشر واسع النطاق لتقنية Ajax المتوافقة مع المعايير والمتوافقة مع مختلف المتصفحات مع Gmail (2004) وخرائط جوجل (2005). [ 11 ] وفي أكتوبر 2004، كان الإصدار التجريبي العام لموقع Kayak.com من أوائل التطبيقات واسعة النطاق للتجارة الإلكترونية لما أطلق عليه مطوروه آنذاك "تقنية XML HTTP". [ 12 ] وقد زاد هذا من اهتمام مطوري برامج الويب بتقنية Ajax.

تم استخدام مصطلح Ajax علنًا في 18 فبراير 2005 من قبل جيسي جيمس غاريت في مقال بعنوان Ajax: نهج جديد لتطبيقات الويب ، استنادًا إلى التقنيات المستخدمة في صفحات جوجل. [ 1 ]

في 5 أبريل 2006، أصدر اتحاد شبكة الويب العالمية (W3C) المسودة الأولى لمواصفات كائن XMLHttpRequest في محاولة لإنشاء معيار ويب رسمي . [ 13 ]

في عام 2015، تم تقديم معيار Fetch كبديل حديث لكائن XMLHttpRequest. [ 14 ]

تم نشر المسودة الأخيرة لكائن XMLHttpRequest في 6 أكتوبر 2016، [ 15 ] ومواصفات XMLHttpRequest هي الآن معيار حي . [ 16 ]

التقنيات

النموذج التقليدي لتطبيق الويب مقابل تطبيق يستخدم تقنية Ajax

أصبح مصطلح Ajax يُشير إلى مجموعة واسعة من تقنيات الويب التي تُستخدم لتنفيذ تطبيق ويب يتواصل مع خادم في الخلفية، دون التأثير على حالة الصفحة الحالية. في المقال الذي صاغ مصطلح Ajax، [ 1 ] [ 3 ] أوضح جيسي جيمس غاريت أن التقنيات التالية مُدمجة:

منذ ذلك الحين، شهدت التقنيات المستخدمة في تطبيقات Ajax تطورات عديدة، وكذلك تعريف مصطلح Ajax نفسه. لم يعد XML مطلوبًا لتبادل البيانات، وبالتالي لم يعد XSLT مطلوبًا لمعالجة البيانات. غالبًا ما يُستخدم JSON ( تدوين كائنات جافا سكريبت ) كصيغة بديلة لتبادل البيانات، [ 17 ] مع إمكانية استخدام صيغ أخرى مثل HTML المنسق مسبقًا أو النص العادي. [ 18 ] تتضمن العديد من مكتبات جافا سكريبت الشائعة، بما في ذلك jQuery ، تجريدات للمساعدة في تنفيذ طلبات Ajax.

تم دعم XMLHttpRequest على نطاق واسع عبر جميع متصفحات الويب الرئيسية منذ الإصدار 5 من Internet Explorer، والإصدار 1.0 من Firefox، والإصدار 7.6 من Opera، والإصدار 1.2 من Safari. [ 19 ]

أحضر

Fetch هو معيار جافا سكريبت تم إنشاؤه ليحل محل XMLHttpRequest. [ 20 ] وفقًا لوثائق مطوري جوجل، "يُسهّل Fetch إجراء طلبات الويب ومعالجة الاستجابات مقارنةً بـ XMLHttpRequest الأقدم." [ 21 ] يعتمد Fetch على وعود جافا سكريبت .

تختلف مواصفات Fetch عن XMLHttpRequest في الجوانب الهامة التالية:

  • لن يتم رفض الوعد المُعاد من fetch()خلال حالة خطأ HTTP حتى لو كانت الاستجابة HTTP 404 أو 500. بدلاً من ذلك، بمجرد أن يستجيب الخادم بالرؤوس، سيتم حل الوعد بشكل طبيعي (مع okتعيين خاصية الاستجابة إلى خطأ إذا لم تكن الاستجابة في النطاق 200-299)، ولن يتم رفضه إلا في حالة فشل الشبكة أو إذا منع أي شيء إكمال الطلب.
  • fetch()لن يتم إرسال ملفات تعريف الارتباط من مصادر مختلفة إلا إذا قمت بتعيين خيار تهيئة بيانات الاعتماد . (منذ أبريل 2018، غيّرت المواصفات سياسة بيانات الاعتماد الافتراضية إلى same-origin[تم التغيير في Firefox منذ الإصدار 61.0b13]).

أمثلة

مثال على XMLHttpRequest

مثال على طلب Ajax بسيط باستخدام طريقة GET . كُتب نص جانب العميل بلغة JavaScript باستخدام كائن XMLHttpRequest، بينما كُتب نص جانب الخادم، الذي يُعيد استجابة نصية بسيطة، بلغة PHP .

get-ajax-data.js:

// هذا هو البرنامج النصي من جانب العميل.// تهيئة طلب HTTP.let xhr = new XMLHttpRequest ();// حدد الطلب.xhr.open ( ' GET' , 'send-ajax-data.php' ) ;// تتبع تغييرات حالة الطلب.xhr.onreadystatechange = function ( ) {​const DONE = 4 ; // حالة الجاهزية 4 تعني أن الطلب قد تم.const OK = 200 ; // الحالة 200 تعني عودة ناجحة.إذا كانت حالة الطلب ( xhr.readyState ) تساوي "تم" ( DONE )، {إذا كانت حالة طلب XHR تساوي OK {​console.log ( xhr.responseText ); // ' هذا هو الناتج. '} آخر {console.log ( ' خطأ : ' + xhr.status ) ; // حدث خطأ أثناء الطلب.}}};// إرسال الطلب إلى send-ajax-data.php.xhr.send ( null ) ;​

send-ajax-data.php:

<?php // هذا هو نص البرمجة من جانب الخادم.// تحديد نوع المحتوى. header ( 'Content-Type: text/plain' );// إرسال البيانات مرة أخرى. echo 'هذه هي المخرجات.' ; ?>

مثال على جلب البيانات

مثال على نفس البرنامج النصي من جانب العميل باستخدام دالة Fetch بدلاً من ذلك، مع صيغة Promise على نمط رد الاتصال:

// هذا هو البرنامج النصي من جانب العميل.fetch ( 'send-ajax-data.php' ) . then ( res = > res.text ( )) . then ( data => console.log ( data ) ) . catch ( error => console.log ( ' Error: ' + error ) ) ;

مثال على استخدام Async/await

نفس النص البرمجي باستخدام صيغة async/await في جافا سكريبت :

// هذا هو البرنامج النصي من جانب العميل.try { const res = await fetch ( ' send -ajax-data.php' ); const data = await res.text ( ); console.log ( data ) ; } catch ( error ) { console.log ( ' خطأ : ' + error ) ; }

انظر أيضاً

مراجع

  1. 1 2 3 جيسي جيمس غاريت (18 فبراير 2005). "أجاكس: منهج جديد لتطبيقات الويب" . AdaptivePath.com. مؤرشف من الأصل في 10 سبتمبر 2015. تم الاطلاع عليه في 19 يونيو 2008 .
  2. ↑ "أجاكس - أدلة مطوري الويب" . وثائق MDN للويب . مؤرشف من الأصل بتاريخ 28 فبراير 2018. تم الاطلاع عليه بتاريخ 27 فبراير 2018 .
  3. 1 2 أولمان، كريس (مارس 2007). مقدمة في أجاكس . wrox. ISBN 978-0-470-10675-4أُرشف من المصدر الأصلي في 5 يوليو 2008. تم الاطلاع عليه في 24 يونيو 2008 .
  4. ↑ "خارطة طريق MSXML" . مايكروسوفت ليرن . 27 أكتوبر 2016. مؤرشف من الأصل في 6 ديسمبر 2025. تم الاطلاع عليه في 8 يونيو 2026 .
  5. ١ ٢ "مقال عن تاريخ XMLHTTP بقلم أحد مطوريها الأصليين" . Alexhopmann.com. ٣١ يناير ٢٠٠٧. مؤرشف من الأصل في ٢٣ يونيو ٢٠٠٧. تم الاطلاع عليه في ١٤ يوليو ٢٠٠٩ .
  6. ↑ "مواصفات واجهة IXMLHTTPRequest من شبكة مطوري مايكروسوفت" . Msdn.microsoft.com. مؤرشف من الأصل بتاريخ 26 مايو 2016. تم الاطلاع عليه بتاريخ 14 يوليو 2009 .
  7. ↑ دوتا، سونافا (23 يناير 2006). "كائن XMLHTTPRequest الأصلي" . مدونة الإنترنت . مايكروسوفت. مؤرشف من الأصل في 6 مارس 2010. تم الاطلاع عليه في 30 نوفمبر 2006 .
  8. ↑ "الـ HTML الديناميكي و XML: كائن XMLHttpRequest" . شركة آبل. مؤرشف من الأصل في 9 مايو 2008. تم الاطلاع عليه في 25 يونيو 2008 .
  9. ↑ هوبمان، أليكس. "قصة XMLHTTP" . مدونة أليكس هوبمان . مؤرشف من الأصل في 30 مارس 2010. تم الاطلاع عليه في 17 مايو 2010 .
  10. ↑ تينان، دان (1 أكتوبر 2007). "أعظم 16 لحظة في تاريخ الإنترنت" . رائد الأعمال .
  11. ↑ "نبذة تاريخية عن أياكس" . آرون شوارتز. 22 ديسمبر 2005. مؤرشف من الأصل في 3 يونيو 2010. تم الاطلاع عليه في 4 أغسطس 2009 .
  12. ↑ إنجلش، بول (12 أبريل 2006). "واجهة مستخدم كاياك" . مدونة كاياك التقنية الرسمية . مؤرشف من الأصل في 23 مايو 2014. تم الاطلاع عليه في 22 مايو 2014 .
  13. ↑ فان كيستيرين، آن؛ جاكسون، دين (5 أبريل 2006). "كائن XMLHttpRequest" . W3.org . اتحاد شبكة الويب العالمية. مؤرشف من الأصل في 16 مايو 2008. تم الاطلاع عليه في 25 يونيو 2008 .
  14. ↑ أساولو، إيليا (7 يناير 2025). "أصبحت واجهة برمجة تطبيقات Fetch مستقرة أخيرًا في Node.js" . مدونة LogRocket . تم الاطلاع عليه في 16 يوليو 2026 .
  15. ↑ كيستيرين، آن؛ أوبورغ، جوليان؛ سونغ، جونغكي؛ ستين، هالفورد آر إم. "XMLHttpRequest المستوى 1" . W3.org . اتحاد شبكة الويب العالمية. مؤرشف من الأصل في 13 يوليو 2017. تم الاطلاع عليه في 19 فبراير 2019 .
  16. ↑ "معيار XMLHttpRequest" . xhr.spec.whatwg.org . تم الاطلاع عليه بتاريخ 21 أبريل 2020 .
  17. ↑ "تدوين كائنات جافا سكريبت" . Apache.org. مؤرشف من الأصل في 16 يونيو 2008. تم الاطلاع عليه في 4 يوليو 2008 .
  18. ↑ "تسريع تطبيقاتك القائمة على تقنية Ajax باستخدام JSON" . DevX.com. مؤرشف من الأصل في 4 يوليو 2008. تم الاطلاع عليه في 4 يوليو 2008 .
  19. ↑ "أهم 5 مزايا وعيوب لتقنية AJAX" . بوتينزا. 16 يناير 2022. مؤرشف من الأصل في 6 أكتوبر 2023. تم الاطلاع عليه في 6 أكتوبر 2023 .
  20. ↑ "Fetch API - Web APIs" . MDN . مؤرشف من الأصل بتاريخ 29 مايو 2019. تم الاطلاع عليه بتاريخ 30 مايو 2019 .
  21. ↑ "العمل مع واجهة برمجة تطبيقات Fetch" . مطورو جوجل . مؤرشف من الأصل في 30 سبتمبر 2018. تم الاطلاع عليه في 6 يونيو 2025 .

للمزيد من القراءة