انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 117
دورة جافا سكريبت

AJAX Request

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

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
7
الأمثلة
10
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
2,707
محتوى الدرس
في هذا الدرس 7تصفّح المواضيع

AJAX Request

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

HTML 
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 ) 

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

Asynchronous - True or False ؟

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

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

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

GET or POST ؟

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

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

GET Requests

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

HTML 
xhttp.open("GET", "/files/setTime.php");
  xhttp.send();
جرّب بنفسك

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

HTML 
xhttp.open("GET", "/files/setTime.php?t=" + Math.random());
  xhttp.send();
جرّب بنفسك

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

HTML 
xhttp.open("GET", "/files/setTime.php? fname=Henry&lname=Ford");
xhttp.send();
جرّب بنفسك

POST Requests

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

HTML 
xhttp.open("POST", "/files/setTime.php");
xhttp.send();
جرّب بنفسك

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

HTML 
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:

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

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

HTML 
<!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>
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…