Ajax | Send Request & Response

💡 أول معلومة يجب عليك معرفتها هى يتم استخدام كائن XMLHttpRequest لتبادل البيانات مع خادم.

نستكمل العملية الأن:

إرسال طلب إلى الخادم

تحتاج الأن إلى تقديم الطلب، عن طريق استدعاء أساليب () open و () send لكائن طلب HTTP ، مثل هذا:

xhttpReq.open('GET', 'ajax_file.txt', true);
xhttpReq.send();

💡 توضيح معنى [ (open (url, async ] وتم شرحه بالتفصيل فى الفصل السابق:

1- () open:  لاستدعاء هي طريقة طلب HTTP – GET أو POST أو HEAD أو طريقة أخرى يدعمها الخادم الخاص بك، احتفظ بالطريقة all-capitals وفقًا لمعيار HTTP ، وإلا فقد لا تقوم بعض المتصفحات (مثل Firefox) بمعالجة الطلب.

1. url: هي عنوان الصفحة الذي ترسل إليها الطلب، كميزة أمان ، لا يمكنك الاتصال بعناوين URL في نطاقات الجهات الخارجية افتراضيًا تأكد من استخدام اسم النطاق الدقيق في جميع صفحاتك أو ستحصل على خطأ “تم رفض الإذن” عند الاتصال بـ () open.
2. async (اختيارية): تقوم  بتعيين ما إذا كان الطلب متزامن أو غير متزامن، إذا كان هذا True (الافتراضي) ، فسوف يستمر تنفيذ JavaScript ويمكن للمستخدم التفاعل مع الصفحة ختى لو لم تصل الاستجابة من الخادم. 

الحصول على طلبات ( Get Request)

مثال لطلب GET:

xhttpReq.open('GET', 'test.html');
xhttpReq.send();

إذا كنت تريد إرسال معلومات باستخدام طريقة GET ، فأضف المعلومات إلى عنوان URL:

xhttpReq.open('GET', 'test.html?name=hamed&gender=male');
xhttpReq.send();

طلبات POST 

نصيحة استخدم دائمًا طلبات POST عندما:

1- يكون الملف المخزن مؤقتًا ليس خيارًا (تحديث ملف أو قاعدة بيانات على الخادم).
2- تريد إرسال كمية كبيرة من البيانات إلى الخادم (ليس لدى POST قيود على الحجم).
3- تريد إرسال إدخال المستخدم (والذي يمكن أن يحتوي على أحرف غير معروفة) ، يعد POST أكثر قوة وأمانًا من GET.

مثال لطلب POST:

xhttpReq.open('POST', 'post_file.txt', true);
xhttpReq.send();

لاحظ إذا أرسلت البيانات عن طريق POST ، فقد تضطر إلى تعيين نوع MIME للطلب – على سبيل المثال ، استخدم ما يلي قبل استدعاء send () لبيانات النموذج :

xhttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

مثال لطلب :

xhttpReq.open('POST', 'post_file.txt', true);
xhttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhttpReq.send("name=hamed&gender=male");

معالجة استجابة الخادم Handling the server response

عند إرسال الطلب ، قمت بتقديم اسم  (وظيفة JavaScript ) للتعامل مع الاستجابة:

xhttpReq.onreadystatechange = nameFunction;

ماذا يجب أن تفعل هذه الوظيفة؟

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

if (xHttpReq.readyState === XMLHttpRequest.DONE) {
    // Everything is good, the response was received.
} else {
    // Not ready yet.
}

أو هكذا:

if (xHttpReq.readyState === 4) { // ( 4 === XMLHttpRequest.DONE )
    // Everything is good, the response was received.
} else {
    // Not ready yet.
}

onreadystatechange :

• يحدد وظيفة ليتم استدعاؤها عند تغيير خاصية readyState.
• يتم استدعاء وظيفة onreadystatechange في كل مرة يتغير readyState.
• يتم تشغيل الحدث onreadystatechange أربع مرات (1-4) ، مرة واحدة لكل تغيير في readyState.

قائمة لقيم الأعداد في XMLHTTPRequest.readyState كما يلي:

• 0 = (uninitialized) أى (الطلب غير مهيأ).
• 1 =  (loading) أى (تم تأسيس اتصال الخادم).
• 2 = (loaded) أى (تم استلام الطلب).
• 3 =  (interactive) أى (طلب معالجة)
• 4 = (complete) أى (تم الانتهاء من الطلب والاستجابة جاهزة).

status:

• 200: ” موافق OK “
• 403: ” ممنوع Forbidden “
• 404: ” الصفحة غير موجودة Page Not Found “

statusText: إرجاع نص الحالة (مثل “Ok” أو “Not Found“).

بعد ذلك ، تحقق من رموز حالة استجابة HTTP الخاصة باستجابة HTTP.

في المثال التالي ، نفرق بين طلب AJAX الناجحة وغير الناجحة عن طريق التحقق من رمز الاستجابة 200 موافق.

if (xhttpReq.status === 200) {
    // All Things is Perfect!
} else {
    // Here is problem with the request.
    // For example, the response may have a 404 (Not Found)
    // or 500 (Internal Server Error) response code ..etc
}

لاحظ أن الخطوات المذكورة أعلاه صالحة فقط إذا استخدمت طلبًا غير متزامن (لـ parameter الثالث لـ () open غير محددة أو تم تعيينها على true).

إذا كنت تستخدم طلبًا متزامنًا ، فلن تحتاج إلى تحديد وظيفة ، لكن هذا الأمر لا يشجعك كثيرًا لأنه يوفر تجربة مستخدم فظيعة.

بعد التحقق من حالة الطلب ورمز حالة HTTP للاستجابة ، يمكنك القيام بكل ما تريد بالبيانات التي أرسلها الخادم، لديك خياران للوصول إلى تلك البيانات:

1. xhttpReq.responseText : إرجاع استجابة الخادم كسلسلة من النص String.
2. xhttpReq.responseXML : تُرجع الاستجابة ككائن XMLDocument الذي يمكنك اجتيازه باستخدام وظائف DOM.

responseText

تقوم خاصية responseText بإرجاع استجابة الخادم كسلسلة JavaScript ، ويمكنك استخدامها وفقًا لذلك:

consle.log(xhttpReq.responseText);

responseXML

يحتوي كائن XMLHttpRequest على محلل XML مضمن.

الخاصية responseXML تُرجع استجابة الخادم ككائن DOM.

أولاً ، ننشئ مستند XML صالحًا، يحتوي المستند (users_info.xml) على ما يلي:

<Users>
    <user>
      <name>Mohamed</name>
      <age>20</age>
    </user>
    <user>
      <name>Noor</name>
      <age>30</age>
    </user>
    <user>
      <name>Eman</name>
      <age>40</age>
    </user>
</Users>

باستخدام responseXML، يمكنك تحليل الاستجابة ككائن XML DOM.

اطلب الملف users_info.xml وقم بتحليل الاستجابة:

var xmlDoc = xHttpReq.responseXML;
var users = xmlDoc.getElementsByTagName('Users').item(1);
consle.log(users.firstChild.data);

xhttp.open("GET", "users_info.xml", true);
xhttp.send();

💡 يأخذ هذا الكود كائن XMLDocument المعطاة بواسطة responseXML ويستخدم طرق DOM للوصول إلى بعض البيانات الموجودة في مستند XML.

Server Response Methods

• () getResponseHeader : إرجاع  معلومات Header معينة من الخادم Server.
• () getAllResponseHeaders: إرجاع كافة معلومات Header من الخادم Server.

The getAllResponseHeaders() Method

تُرجع () getAllResponseHeaders كافة معلومات Header من استجابة الخادم.

var xHttpReq = new XMLHttpRequest();
xHttpReq.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    console.log(this.getAllResponseHeaders()); // Note (this = xHttpReq)
  }
};

The getResponseHeader() Method

إرجاع الأسلوب ()getResponseHeader  معلومات Header معينة من استجابة الخادم.

var xHttpReq = new XMLHttpRequest();
xHttpReq.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    console.log(this.getResponseHeader("Users-Last-Week"));
  }
};
xHttpReq.open("GET", "ajax_example.txt", true);
xHttpReq.send();

مثال بسيط

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


      <button onclick="runRequest()">Run Request</button>

      <script>

        function runRequest() {
           var xHttpReq = new XMLHttpRequest();
           xHttpReq.onreadystatechange = function () {
              if (this.readyState === 4 && this.status === 200) {
                  comsole.log(this.responseText);
              }
            };

            xHttpReq.open("GET", "testing.html");
            xHttpReq.send();
        }

       </script>
    </body>
</html>

في هذا المثال:

1. ينقر المستخدم على زر “Run Request”.
2. معالج الأحداث يستدعي الدالة () runRequest.
3. يتم تقديم الطلب ثم (onreadystatechange) يتم تنفيذ الطلب
4. يتم التحقق إذا كانت الاستجابة قد وردت أم لا ، ثم تنبيه محتويات ملف testing.html.
   
   
   

مُلاحظات

1. XMLHttpRequest متزامن (غير متزامن = خطأ) غير مستحسن لأن JavaScript سيتوقف عن التنفيذ حتى تكون استجابة الخادم جاهزة. إذا كان الخادم مشغولاً أو بطيئًا ، فسيعلق التطبيق أو يتوقف.

2. يتم تشجيع أدوات المطور الحديثة على التحذير من استخدام الطلبات المتزامنة وقد تتسبب في حدوث استثناء InvalidAccessError عند حدوثه.

3. XMLHttpRequest المتزامن قيد الإزالة من معيار الويب ، لكن هذه العملية قد تستغرق سنوات عديدة.

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