منتدى استراحات زايد - شرح لتقنية ajax الاجكس الية عملها وكيفية التعامل معهاا

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

دوال

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

ارسال الترويسات المطلوبة الى السيرفر للحصول على صفحة الانترنت
ثم يقوم بارسال الطلب التالي
رمز PHP:

GET /SS/S.PHP HTTP/1.0

الى السيرفر المحدد
ثم يقوم بعدها السيرفر باجراء تنفيذ للسطر السابق
رمز PHP:

user-agent:Mozlia/4.0 (compatible;MISE 5.5;Windows NT 5.0)

ثم يقوم بارسال المستعرض معلومات عن المستعرض واسمه ونوع البيانات المراد استقبالها مثلا
رمز PHP:

accept:text/plan,text/html

ثم يقوم السيرفر بارسال البيانات التي توضح حالة الطلب
رمز PHP:

HTTP/1.0 200 OK

وهذ الشيفرة تدل على نجاح الطلب
هذه الخطوات تقوم انت بالتعامل معها

كيفية بناء الاجكس

1- انشاء كائن الاجكس للتعامل مع الاتصال
2- فتح الصفحة المراد التعامل معها
3- ارسال بيانات اذا كان بحاجة لذلك
4-ارسال ترويسات للمستعرض
5-الاستماع الى حالة الطلب

الدوال التي ستتعامل معها
رمز PHP:

XMLHttpRequest()
او
new ActiveXObject("Microsoft.XMLHTTP")
او
new ActiveXObject("Msxml2.XMLHTTP")
او
new ActiveXObject("Msxml2.XMLHTTP.3.0")
او
new ActiveXObject("Msxml2.XMLHTTP.6.0")
او
new XDomainRequest()

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

XMLHttpRequest()

وهو كائن اصيل في المستعرض
اما فيما تبقى لاصدرات ويندوز انترنت اكسبلور
ويمكنك انشاء كالتالي لضمان انشاء كائن اجكس
رمز PHP:

var T=new XMLHttpRequest()
|| new ActiveXObject("Microsoft.XMLHTTP")
|| new ActiveXObject("Msxml2.XMLHTTP")
|| new ActiveXObject("Msxml2.XMLHTTP.3.0")
|| new ActiveXObject("Msxml2.XMLHTTP.6.0") || new XDomainRequest();

الدالة
رمز PHP:

open

وهيا دالة فتح الاتصال
تاخذ ثلاثة بارمترات
الاول نوع الطلب
GET او POST
ثم البارمتر الثاني
هو رابط الصفحة المراد اجراء الاتصال معها
ثم البارمتر الثالث وهو اختياري
اما

true==يجعل الاتصال في حالة غير متزامنة
false==يجعل الاتصال متزامن وبقوم باغلاق الصفحة حتى الانتهاء من تنفيذ الطلب
دالة
رمز PHP:

setRequestHeader

تقوم هذه الدالة بارسال التوصيفات الى المستعرض
البارمتر الاول هو اسم التوصيفة
مثلا
رمز PHP:

Content-Type

ثم قيمة التوصيفة او الترويسة
مثلا
رمز PHP:

application/x-www-form-urlencoded

مثال
رمز PHP:

setRequestHeader("Content-Type"," application/x-www-form-urlencoded");

ثم
دالة ارسال البيانات
رمز PHP:

send

تاخذ بارمتر واحد
وهو اما
null
GET في حالة كان نوع الطلب
او البيانات المرسلة اي مثلا
رمز PHP:

T=200&R==2000

مثال
رمز PHP:

send(null);
او
send("s=200&r=200");

ثم دالة الاستماع الى الحدث اي التغيرات التي تحدث من اجراء الطلب

رمز PHP:

onreadystatechange

وهيا مهمتها اجراء حدث ما عند حصول اي تغيرات في حالة الطلب
اي تاخذ قيمة وهي دالة
مثال
رمز PHP:

onreadystatechange=function() {
}

ثم قيمة الطلب من السيرفر وهيا تكون
تكون قيمة الخاصية التالية
رمز PHP:

readyState

0==لم يتم التهيئة
1==جاري التحميل
2==تم التحميل
3==تفاعلي
4==تم اكماله
ثم
الخاصية التالية
رمز PHP:

status

شيفرة حالة الطلب

وتعود بقيم مختلفة منها
100 ==معلومات
200==نجاح
204 ==المستند لايحتوي على بيانات
300==اعادة توجيه
302== تم نقل المصدر الى مكان اخر
400==خطا
401== يحتاج الى التحقق من المستخدم
4.3==تم رفض الطلب من قبل المخدم
404==الملف غير موجود على المخدم
408 ==فشل اتمام الطلب خلال الفترة المحددة

500==خطا من المخدم وعادة يكون من خطاء في الشيفرة المكتوبة

ثم خاصية استرجاع البيانات
رمز PHP:

responseText

تقوم بارجاع البيانات على شكل نص

اما الخاصية التالية
رمز PHP:

responseXML

تقوم بارجاع البيانات على شكل xml
الخاصية
رمز PHP:

statusText

عبارة عن سبب http
المرجعة من قبل المخدم

اما
رمز PHP:

getAllresponsel

ارجاع كافة الترويسات من المستعرض
اما الدالة
رمز PHP:

getresponseHeader

تقوم باخذ بارمتر واحد وهو اخذ الترويسة المراد الحصول على قيمتها
وتعود بقيمة الترويسة
اما الدالة
رمز PHP:

Header

تقوم بارجاع سلسلة نصية حول الترويسات

وبذلك نكون قد اتنهيا شرح دوال الاجكس الامثلة العملية لذلك

مثال ل get

رمز PHP:

function reg() {
return (new XMLHttpRequest()
|| new ActiveXObject("Microsoft.XMLHTTP")
|| new ActiveXObject("Msxml2.XMLHTTP")
|| new ActiveXObject("Msxml2.XMLHTTP.3.0")
|| new ActiveXObject("Msxml2.XMLHTTP.6.0")
|| new XDomainRequest());

}
var http= reg();
//فتح قناة الاتصال
http.open('GET','testpost.php?t=200', true);
//ارسال ترويسة للمستعرض بتشفير البيانات المرسلة
http.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//ارسال البيانات
http.send(null);
//خاصية الاستماع الى الحالة
http.onreadystatechange = function() {
//التحقق من حالة الطلب
if (http.readyState == 4) {
//التحقق من اتمام المهمة
if (http.status == 200){
// طباعة النتيجة في وسم هوتمل مثلا
//

document.getElementById('t').innerHTML= http.responseText;
}
}
};

مثال ل post

رمز PHP:

return (new XMLHttpRequest()
|| new ActiveXObject("Microsoft.XMLHTTP")
|| new ActiveXObject("Msxml2.XMLHTTP")
|| new ActiveXObject("Msxml2.XMLHTTP.3.0")
|| new ActiveXObject("Msxml2.XMLHTTP.6.0")
|| new XDomainRequest());

}
var http= reg();
//فتح قناة الاتصال
http.open('POST','testpost.php', true);
//ارسال ترويسة للمستعرض بتشفير البيانات المرسلة
http.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//ارسال البيانات
http.send("t=200&r=1000");
//خاصية الاستماع الى الحالة
http.onreadystatechange = function() {
//التحقق من حالة الطلب
if (http.readyState == 4) {
//التحقق من اتمام المهمة
if (http.status == 200){
// طباعة النتيجة في وسم هوتمل مثلا
//

document.getElementById('t').innerHTML= http.responseText;
}
}
};

</div>
هذه الاجكس بكافة عيونها
وارجو من الله العلي القدير اكون قد اوصلت المعلومة وهذا وقل ربي زدني علما</div>