يسمح لك الكائن 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;
ليست هناك تعليقات:
إرسال تعليق