الدرس الاول فى الاجاكس

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

(1)XMLHttpRequest Object or ActiveXObject Object:

وهو عبارة عن اوبجيكت يقوم بعملية استقبال طلبات المستخدم ولة نوعين الاول (XMLHttpRequest) وهذا النوع يتعامل مع الاصدارات الحديثة من المتصفحات والنوع الاخر (ActiveXObject) وهذا النوع يتعامل مع الاصدارات القديمة من المتصفحات ولا بد من استخدام النوعين لضمان تنفيذ طلبات المستخدمين مع كافة انواع المتصفحات.

مثال عملى على استخدامها:

var xmlhttp;
if (window.XMLHttpRequest)
{

// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{

// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}

(2)Send a Request To a Server:

وفى هذا الجزء نقوم بتفيذ عملية ارسال طلبات المستخدم الى السرفر وذلك عن طريق الكود التالى:

xmlhttp.open(method, url,true);
xmlhttp.send();

حيث ان الدالة (open) لها ثلاث بارمترات البارمتر الاول عبارة عن نوع الميثود وهما نوعين (GET,POST) والبارمتر الثانى يتم فية تحديد موقع الملف الموجود على السرفر والبارمتر الثالث يفضل تركة (true) .ثم بعد ذلك نستخدم دالة (send) لتنفيذ عملية الارسال الى السرفر.

مثال عملى على استخدامها:

xmlhttp.open(“GET”,”firstpage.php”,true);
xmlhttp.send();

او فى حالة التعامل مع (asp)

xmlhttp.open(“GET”,”firstpage.asp”,true);
xmlhttp.send();

(3)Server Response:

بعد ان قمنا باستقبال الداتا من المستخدم وارسالها الى السرفر يكون قد حان الوقت لتلقى الرد على الداتا التى تم ارسالها الى السرفر ويتم ذلك عن طريق خاصية (responseText).

(4)onreadystatechange event:

بعد ان تم ارسال طلب المستخدم الى السرفر يتم تنفيذ بعض الاجراءات على اساس الاستجابة عن طريق حدث يسمى

(onreadystatechange) ومع هذا الحدث يتم استخدام خاصيتين هما:

(1)readyState:

وهذة الخاصية تعبر عن حالة الطلب المرسل الى السرفر ولها خمس قيم تتدرج من (0) الى (4) كالتالى:

(0)يدل على ان الطلب الذى يتم ارسالة الى السرفر لا يعمل.

(1)يدل على ان هناك وصلة تم عملها لطلب المستخدم الى السرفر.

(2)تدل على ان السرفر استلم طلب المستخدم بالفعل.

(3)تدل على ان السرفر يقوم بمعالجة طلب المستخدم المرسل الية.

(4) يدل على ان السرفر قام بمعالجة طلب المستخدم وجاهز للاستجابة.

(2)Status:

ولها قيمتين كالتالى:

(200)تدل على انة توجد صفحة على السرفر.

(404)تدل على انة لا توجد صفحة على السرفر.

مثال عملى على استخدامها:

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(“tag_html”).innerHTML=xmlhttp.responseText;
}
}

Advertisements

ضع تعليقك هنا

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: