Ajax

ارسال الطلب الى السيرفر و استجابة السيرفر ajax

سجين القدر
اخر تحديث :

AJAX XMLHttpRequest



ان حجر الارتكاز في لغة AJAX هو الكائن XMLHttpRequest .



الكائن XMLHttpRequest


جميع المتصفحات الرئيسية تدعم الكائن XMLHttpRequest

( يستخدم المتصفح IE5 و IE6 اللغة ActiveX ) .

تسمح لك لغة AJAX بالتطوير بشكل غير متزامن من خلال تبادل كمية قليلة من البيانات مع السيرفر أي ما خلف الكواليس . و ذلك يعني يمكنك التعديل على جزء معين من صفحة النت و بدون تحديث الصفحة كلها .



إنشاء كائن XMLHttpRequest


جميع المتصفحات الرئيسية (IE7+, Firefox, Chrome, Safari, Opera) تحتوي على غضافة داخلية للكائن XMLHttpRequest .

تركيبة إنشاء الكائن XMLHttpRequest


variable=new XMLHttpRequest();

تستخدم النسخ الأقدم من انترنت اكسبلورر Internet Explorer IE5 و IE6 لغة ActiveX :
variable=new ActiveXObject("Microsoft.XMLHTTP");

لإنشاء كود يعمل على جميع المتصفحات الرئيسية بالاضافة الى IE5 و IE6 يمكن فحص المتصفحات التي تدعم كائن XMLHttpRequest . وان لم يكن يمكن إنشاء كائن XMLHttpRequest وان لم يكن عندها يجب إنشاء كائن ActiveXObject .

مثال
var xmlhttp;
if (window.XMLHttpRequest)
{ /*
يعمل على IE7+, Firefox, Chrome, Opera, Safari
*/
xmlhttp=new XMLHttpRequest();
} else {
/*
يعمل على IE5 و IE6
*/
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}


ستتعلم كيفية ارسال طلبات للسيرفر في الدرس التالي .



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


استجابة السيرفر



يمكن استخدام خاصيات responseText أو responseXML للكائن XMLHttpRequest للحصول على استجابة من السيرفر .















الخاصيةالشرح
responseTextللحصول على استجابة بيانات كنصوص
responseXMLللحصول على استجابة بيانات كبيانات XML




خاصية responseText


اذا لم كانت الاستجابة من السيرفر XML , عندها يمكنك استخدام خاصية responseText .

تعيد خاصية responseText الاستجابة كنص وعندها يمكنك استخدامها وفقاً لذلك :
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;




خاصية responseXML


اذا كانت الاستجابة من السيرفر XML و تريد أن تحولها ككود XML يمكنك استخدام خاصية responseXML .

مثال

اطلب الملف cd_info.xml

من السيرفر وقم بتحويل الاستجابة :
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("AGE");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;



حدث onreadystatechange



عند ارسال طلب الى السيرفر عندها نريد أن ننجز بعض الأفعال المرتكزة على هذه الاستجابة .

يتم حدوث onreadystatechange في كل مرة يتم تغيير الحالة readyState .

تحمل خاصية readyState حالة XMLHttpRequest .

يوجد 3 خصائص مهمة للكائن XMLHttpRequest





















الخاصيةالشرح
onreadystatechangeتخزن الكود الوظيفي أو اسم الوظيفة وذلك ليتم استدعائه تلقائياً في كل مرة تتغير فيها خاصية
readyStateتحمل حالة XMLHttpRequest , و تتغير من 0 وحتى 4 :

0 : لم يتم بدء الطلب .

1: تم بدء الاتصال بالسيرفر .

2: تم تلقي الطلب .

3: عملية الطلب .

4: تم انتهاء الطلب و أصبحت الاستجابة جاهزة .
status200: تمام

404: لم يتم إيجاد الصفحة

نقوم بتحديد ماسيحدث عندما تكون استجابة السيرفر جاهزة للعملية في حدث onreadystatechange .

عندما تصبح readyState رقم 4 و الحالة هي 200 ستكون الاستجابة جاهزة :
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}   }




استخدام الكود الوظيفي عند العودة


و هو كود وظيفي يعتمد على القيمة التي بداخله والتي تحمل كود وظيفي آخر .

ان كان لديك أكثر من مهمة على AJAX على موقعك عندها يجب إنشاء كود وظيفي أساسي واحد لإنشاء الكائن XMLHttpRequest و استدعائه لكل مهمة .

يجب أن يحتوي الكود الوظيفي على رابط و ماسيفعله مع onreadystatechange حيث سيكون مختلف في كل سيتم استدعاء الكود .

مثال
function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}


تعديل المقال
الأقسام

مقالات قد تهمك

تعليقات