JavaScript

AJAX Request

في هذا الدرس سوف نتعرف علي طريقة ارسال requests طلب الي الخادم server باستخدام الكائن "XMLHttpRequest " 

التاريخ

16 نوفمبر 2021

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

988

المواضيع

24
الشروحات chevron_left AJAX Request chevron_left JavaScript

AJAX Request

</> AJAX Request

نستطيع ارسال طلب request الي الخادم server  باستخدام الدوال التالية ( )send و ( )open وهما خاصين بال object التالي " XMLHttpRequest

xhttp.open("GET", "/files/ajax.txt", true);
xhttp.send();
cell 1 cell
cell 1 cell
cell 1 cell
cell 1 cell

</> The url - A File On a Server

تحتوي الدالة  ( )open علي parameter يستخدم في تحديد عنوان الملف علي الخادم الخاص بك 

يدعم استخدام اي نوع من أنواع  الملفات مثل (txt , XML , php, asp ) 

xhttp.open("GET", "/files/ajax.txt", true);

</> Asynchronous - True or False ؟

يجب إرسال طلبات الخادم بشكل غير متزامن.

يجب ايضا تعيين قيمة ال parameter التالي "async" ب "true"

xhttp.open("GET", "ajax_test.asp", true);

</> GET or POST ؟

Get اسهل واسرع في الاستخدام من Post ويمكن استخدامها في معظم الحالات ولكن هناك حالات اخري نحتاج خلالها الي استخدام Post بدلا من Get 

  • في حالة ارسال كمية كبيرة من البيانات الي الخادم حيث انها ليس محدودة الحجم 
  • في حالة ارسال بيانات مدخلة من المستخدم والتي يمكن ان تحتوي علي كلمات مرور ففي هذه الحالة Post هي اكثر أمانا من Get
  • الملف المرسل ليس ملفا اختياريا مثل تحديث ملف معين او قاعدة بيانات علي الخادم الخاص بك

</> GET Requests

مثال بسيط علي ارسال طلب request باستخدام ال Get

xhttp.open("GET", "/files/setTime.php");
  xhttp.send();

في المثال السابق ربما تحصل علي cached result ولتجنب هذه المشكلة قم بأضافة ID مميز الي عنوان ال URL

xhttp.open("GET", "/files/setTime.php?t=" + Math.random());
  xhttp.send();

في حالة اذا كنت تريد ارسال البيانات باستخدام GET قم بإضافتها بداخل عنوان ال URL

xhttp.open("GET", "/files/setTime.php? fname=Henry&lname=Ford");
xhttp.send();

</> POST Requests

مثال بسيط يوضح طريقة استخدام دالة Post في ارسال البيانات

xhttp.open("POST", "/files/setTime.php");
xhttp.send();

لأرسال البيانات باستخدام دالة Post مثل نموذج HTML ، أضف HTTP header باستخدام setRequestHeader (). ثم قم بتحديد البيانات التي تريد إرسالها في دالة ( )send

xhttp.open("POST", "/files/ajax.txt");
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
cell 1 cell
cell 1 cell

</> Synchronous Request

لتنفيذ طلب متزامن ، قم بتغيير المعامل الثالث في دالة open () إلى false:

xhttp.open("GET", "ajax.txt", false);

أحيانًا يتم استخدام async = false للاختبار السريع. ستجد أيضًا طلبات متزامنة في كود JavaScript أقدم. نظرًا لأن الكود سينتظر اكتمال الخادم ، فليست هناك حاجة لدالة onreadystatechange

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>

<p id="demo">Let AJAX change this text.</p>

<button type="button" onclick="loadDoc()">Change Content</button>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
xhttp.open("GET", "/files/ajax.txt", false);
  xhttp.send();
  document.getElementById("demo").innerHTML = xhttp.responseText;
}
</script>

</body>
</html>
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.