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




يسمح لك الكائن 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;


ليست هناك تعليقات:

إرسال تعليق