AJAX Request
في هذا الدرس سوف نتعرف علي طريقة ارسال requests طلب الي الخادم server باستخدام الكائن "XMLHttpRequest "
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
الشروحات 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>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
