الكورس

Advertisements

Ajax | Intro


السلام عليكم ورحمة الله وبركاته، سلسة جديده عن تقنية AJAX ، ان شاء الله تفهم كل معلومة موجوده فى هذه السلسة، اذا وقف أمامك أى معلومة لا تفهمها يمكنك التواصل معى عبر مواقع التواصل الاجتماعى.

 

لكن قبل البدأ اذا كنت مبتدأ فى مجال البرمجة ، فأنصحك بقراءه هذه المقالة بالأول نصائح ارشادات تحفير للمبتدأين ، ثم استكمال السلسلة.

 


 

فى هذا الفصل ستتعرف على كل المعلومات النظرية عن تقنية AJAX:

  1.  ما هى تقنية  AJAX؟
  2. ماذا تحتاج لتَعلمة قبل تَعلم هذه السلسة؟
  3. مكونات تقنية AJAX.
  4. ماذا يمكنك أن تفعل مع AJAX؟
  5. مثال للتوضيح.
  6. كيف يتم عملية AJAX، برسمة توضيحية؟
  7. أشهر عيوب AJAX؟

 

 

1- ما هي AJAX؟

 

  1. هي تقنية وليست لغة برمجة تتيح إمكانية العمل على متصفحات الويب بطريقة مشابهة للعمل على سطح المكتب.
  2. AJAX اختصار لـ Asynchronous JavaScript And XML، وتعني غير متزامنة مع كلا من JavaScript و XML.
  3. AJAX مبنية على بعض لغات برمجة أخرى موجودة مسبقا: لغة Javascript – XML – HTML.
  4. AJAX هو استخدام كائن XMLHttpRequest للتواصل مع الخوادم. 
  5. تستخدم تطبيقات AJAX لنقل البيانات ، ولكن من الشائع أيضًا نقل البيانات كنص عادي أو نص JSON.

 

أهم ميزتين فى AJAX بأنها تتيح لك القيام بكلا من:

  • تقديم طلبات إلى الخادم دون إعادة تحميل الصفحة.
  • تلقي والتعامل مع البيانات من الخادم.

 


 

2- ماذا تحتاج لتَعلمة قبل تَعلم هذه السلسة؟

 

  1. CSS / HTML.
  2. Javascript / Jquery.
  3. JSON.

 


 

3- مكونات AJAX

 

AJAX ليست لغة برمجية مستقلة ولكنها تقنية متقدمة تتكون من عدة تقنيات:

  • XMLHTTPREQUEST وهي المسؤولة عن الاتصال بالخادم Server.
  • JAVASCRIPT وهي المسؤولة عن عرض العناصر بالصفحات وتتفاعل مع المستخدم.
  • XML وهي عبارة عن وسيط بين الخادم وصفحات HTML.

 


 

4- ماذا يمكنك أن تفعل مع AJAX؟

 

  1. يمكنك إرسال واستقبال المعلومات بتنسيقات مختلفة عبر الخادم Server، بما في ذلك ملفات JSON و XML و HTML والملفات النصية.
  2. من الحاجات المفيدة جدا إن AJAX غير المتزامنة ، مما يعني أنها تستطيع التواصل مع الخادم وتبادل البيانات وتحديث الصفحة دون الحاجة إلى تحديث الصفحة بالكامل ، بل يتم اعاده تحميل الجزء الذى تتم فيه العملية فقط.
  3. يمكنك الاستمرار في استخدام التطبيق بينما يطلب التطبيق معلومات من الخادم في Background.
  4. لا تحتاج إلى إعادة تحميل الصفحة لإظهار البيانات.

 


 

 

صورة لتوضيح العملية:

 

مثال للتوضيح:

<!DOCETYPE html>
<html>
    <head>
      <title>Ajax Example</title>
      <meta charset="utf-8" />
    </head>
    <body>

      <div id="example"></div>
        <h2 id="demo"></h2>
        <button onclick="getRequest()">Get Name</button>
      </div>

      <script>

        function getRequest() {
           var xHttpReq = new XMLHttpRequest();
           xHttpReq.onreadystatechange = function () {
              if (this.readyState === 4 &amp;&amp; this.status === 200) {
                  document.getElementById("demo").innerHTML = this.responseText;
              }
            };

            xHttpReq.open("GET", "demo.php?name=Hamed&amp;gender=Male");
            xHttpReq.send();

        }

       </script>

    </body>
</html>

 

توضيح المثال:

  1. صفحة HTML السابقة تحتوى على <div> و <h2>  و<button> .
  2. <div> لا يستخدم لعمل شىء، يستخدم كأب لوضع  <h2>  و<button> بداخله.
  3. يتم استخدام <h2> لعرض المعلومات المستقبلة من الخادم.
  4. يستدعى <button> الدالة [ ()getRequest ] اذا تم النقر عليها.
  5. ما بداخل <script> سيتم شرحه بالتفصيل فى الفصول القادمة، ولكن ما بداخل <script> هو طلب البيانات من خادم الويب Web server.

 

 

5- كيف تتم عملية AJAX؟

 

توضيح العملية فى 5 نقاط :

1. يحدث حدث في صفحة ويب (يتم تحميل الصفحة ، يتم النقر فوق زر – أى شىء أخر..).
2. يتم إنشاء كائن XMLHttpRequest بواسطة JavaScript ، ويتم ارسال الطلب الى الخادم Server.
3. الخادم يقوم بمعالجة الطلب.
4. يرسل الخادم استجابة Response إلى صفحة الويب، وتتم قراءة الاستجابة بواسطة Javascript.
5. يتم تنفيذ الإجراء الصحيح بواسطة JavaScript ، باعاده تحميل الجزء المطلوب فى الطلب أو على حسب الطلب المطلوب.

 

 

6- أشهر عيوب تقنية AJAX

 

  • من أهم عيوب AJAX أن المستخدم لايمكنة استخدام زر الرجوع إلى الصفحة السابقة في المتصفح، لأنة نظريا يستخدم نفس الصفحة، كما أنه لا يمكنه إضافة الصفحة التي يشاهدها إلى المفضلة في المتصفح وإنما يضيف الصفحة الرئيسة التي دخلها أول مرة.
  • كل مستخدم لا يدعم متصفحه Javascript أو تقنية XMLHttpRequest أو حتى بكل بساطة قام بتعطيل خاصية أو لغة Javascript، لن يستخدم الصفحات التي تعتمد على تقنية AJAX بشكل صحيح، الطريقة الوحيدة لتجنب هذا المشكل هو تطوير حلول عندما لا توجد هناك Javascript.

 


 

لا تنسي متابعتنا على مواقع التواصل الإجتماعى.



الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

[email protected]

شكرًا لك على مساعدتك لنا!