ارسال الطلب الى السيرفر

يسمح لك الكائن XMLHttpRequest باستخدام تبادل البيانات مع السيرفر .

---

ارسال الطلب الى السيرفر

لارسال طلب الى السيرفر يجب استخدام الطرق open() و send() للكائن XMLHttpRequest .

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
 

الطريقة	الشرح
open(method,url,async)	تحدد نوع الطلب أو الرابط أو اذا كان الطلب متزامناً او لا . Method : نوع الطلب هو GET أو POST . URL : مكان الملف على السيرفر . Async : trueasynchronous أو falsesynchronous .
send(string)	يرسل الطلب خارج السيرفر . String : يستخدم فقط مع نوع ارسال الطلب POST .

---

GET أو POST ؟

تعتبر GET أسهل وأسرع من POST , كما يمكن استخدامها في الكثير من الحالات .

يمكن استخدام POST مع الحالات التالية :

• ملف مخبئ cached : تحديث ملف او قاعدة بيانات من السيرفر .


• ارسال كمية كبيرة من البيانات الى السيرفر , و تحتوي POST على كمية غير محدودة .


• ارسال بيانات المستخدم حيث يحتوي على أحرف غير معروفة كما أن POST أقوى و أكثر حماية من GET .

---

طلب GET

مثال بسيط عن GET :

xmlhttp.open("GET","demo_get.php",true);
xmlhttp.send();
 

في المثال السابق ستحصل على نتيجة مخفية أو مخبأة cached.

لتجنب ذلك قم بإضافة id خاص للرابط التشعبي :

مثال

xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
xmlhttp.send();
 

ان أردت ارسال المعلومات بطريقة GET يمكنك اضافة معلومات على الرابط نفسه :

xmlhttp.open("GET","demo_get2.asp?fname=Henry&lname=Ford",true);
xmlhttp.send();
 

---

طلب POST

مثال عن طلب POST بسيط :

xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();
 

لارسال البيانات مثل نموذج HTML يمكنك اضافة HTTP على رأس الصفحة مع الوظيفة setRequestHeader() . قم بتحديد البيانات التي تريد لارسال من خلال طريقة الارسال send() .

مثال

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
 

الطريقة	الشرح
setRequestHeader(header,value)	أضف HTTP headers الى الطلب . Header : تحدد اسم الرأس . Value : تحدد قيمة الرأس .

---

استخدام url - ملف على السيرفر

ان القيمة url المدخلة الى الطريقة open() هي عنوان الملف على السيرفر :

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

يمكن أن يكون الملف أي نوع ملف مثل .txt و .xml أو ملف سكربت خاص بالسيرفر مثل .asp و .php حيث يقوم بإنشاء طلب على السيرفر قبل ارسال البيانات ثانية للموقع .

---

عدم التزامن Asynchronous صحيح True أو خاطئ False ؟

ان لغة AJAX هي اختصار Asynchronous JavaScript and XML هي الاستخدام الغير متزامن مع الجافاسكربت JavaScript و XML . و بالنسبة للكائن XMLHttpRequest فهو يقوم بعمل AJAX و القيمةasync داخل الطريقة open() يجب ضبطها ture :

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

ان ارسال الطلبات الغير متزامنة هي تطوير ضخم لمطوروا المواقع . كما يتم استهلاك العديد من الطلبات و الأوامر على السيرفر بشكل دائم . قبل استخدام لغة AJAX كانت تلك العملية تسبب توقف او تباطئ البرنامج .

مع استخدام الجافاسكربت JavaScript , لن تضطر الى انتظار رد السيرفر و لكن عوضاً عن ذلك :

• إظهار أكواد أخرى بينما تقوم بانتظار استجابة السيرفر .


• التعامل مع الاستجابات عند تكون الاستجابة جاهزة .

---

Async=true

عند استخدام async=true عندها يتم استدعاء الكود الوظيفي عند اتمام الاستجابة في الحدث onreadystatechange :

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
 

ستتعلم المزيد عن onreadystatechange في دروس قادمة .

---

Async=false

لاستخدام async=false يجب تغيير القيمة الثالثة في طريقة open() الى false :

xmlhttp.open("GET","ajax_info.txt",false);
 

ان استخدام async=false غير مستحب ولكن من الممكن استخدامه لبعض الأوامر الصغيرة .

تذكر بأن الجافاسكربت لن تستمر بإظهار الكود حتى تكون استجابة السيرفر جاهزة . سيصبح السيرفر بطئ او سيتوقف اذا كان السيرفر مشغول او بطئ .

ملاحظة : لاتستخدم وظيفة onreadystatechange عند استخدام async=false فقط يمكنك وضع الكود داخل حالة send() :

xmlhttp.open("GET","ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;