 شرح لتقنية ajax الاجكس الية عملها وكيفية التعامل معها
بسم الله الرحمن الرحيم
في هذه المقالة سنتكلم عن الاجكس ماهي الاجكس وماذا تعني وكفية التعامل مع الاجكس
وكيفية بناء الاجكس وماهي الدوال التي تتعامل معها للحصول على هذه التقنية
اولا سنتكلم عن عن صفحة الويب وكيفية الحصول على الببانات
اولا نعندما تضغط على وسم الرابط
<a href="http:dwal.biz">دوال</a>
ماذ يحدث
تقوم حاليا بطلب صفحة انترنت على سيرفر ما
فيقوم المستعرض باجراء التعليمات التالية
استخلاص مسار الصفحة الربط من السيرفر المحدد
ارسال الترويسات المطلوبة الى السيرفر للحصول على صفحة الانترنت
ثم يقوم بارسال الطلب التالي
GET /SS/S.PHP HTTP/1.0
الى السيرفر المحدد
ثم يقوم بعدها السيرفر باجراء تنفيذ للسطر السابق
user-agent:Mozlia/4.0 (compatible;MISE 5.5;Windows NT 5.0)
ثم يقوم بارسال المستعرض معلومات عن المستعرض واسمه ونوع البيانات المراد استقبالها مثلا
accept:text/plan,text/html
ثم يقوم السيرفر بارسال البيانات التي توضح حالة الطلب
HTTP/1.0 200 OK
وهذ الشيفرة تدل على نجاح الطلب
هذه الخطوات تقوم انت بالتعامل معها
كيفية بناء الاجكس
1- انشاء كائن الاجكس للتعامل مع الاتصال
2- فتح الصفحة المراد التعامل معها
3- ارسال بيانات اذا كان بحاجة لذلك
4-ارسال ترويسات للمستعرض
5-الاستماع الى حالة الطلب
الدوال التي ستتعامل معها
XMLHttpRequest()
او
new ActiveXObject("Microsoft.XMLHTTP")
او
new ActiveXObject("Msxml2.XMLHTTP")
او
new ActiveXObject("Msxml2.XMLHTTP.3.0")
او
new ActiveXObject("Msxml2.XMLHTTP.6.0")
او
new XDomainRequest()
هذه الدالة لانشاء كائن طلب الاجكس ويمكن استخدام احدها
بحسب الشرط المتبع لانه تختلف المستعرضات فيما بينها
فمثلا مزلا
يستخدم
XMLHttpRequest()
وهو كائن اصيل في المستعرض
اما فيما تبقى لاصدرات ويندوز انترنت اكسبلور
ويمكنك انشاء كالتالي لضمان انشاء كائن اجكس
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();
الدالة
open
وهيا دالة فتح الاتصال
تاخذ ثلاثة بارمترات
الاول نوع الطلب
GET او POST
ثم البارمتر الثاني
هو رابط الصفحة المراد اجراء الاتصال معها
ثم البارمتر الثالث وهو اختياري
اما
true==يجعل الاتصال في حالة غير متزامنة
false==يجعل الاتصال متزامن وبقوم باغلاق الصفحة حتى الانتهاء من تنفيذ الطلب
دالة
setRequestHeader
تقوم هذه الدالة بارسال التوصيفات الى المستعرض
البارمتر الاول هو اسم التوصيفة
مثلا
Content-Type
ثم قيمة التوصيفة او الترويسة
مثلا
application/x-www-form-urlencoded
مثال
setRequestHeader("Content-Type"," application/x-www-form-urlencoded");
ثم
دالة ارسال البيانات
send
تاخذ بارمتر واحد
وهو اما
null
GET في حالة كان نوع الطلب
او البيانات المرسلة اي مثلا
T=200&R==2000
مثال
send(null);
او
send("s=200&r=200");
ثم دالة الاستماع الى الحدث اي التغيرات التي تحدث من اجراء الطلب
onreadystatechange
وهيا مهمتها اجراء حدث ما عند حصول اي تغيرات في حالة الطلب
اي تاخذ قيمة وهي دالة
مثال
onreadystatechange=function() {
}
ثم قيمة الطلب من السيرفر وهيا تكون
تكون قيمة الخاصية التالية
readyState
0==لم يتم التهيئة
1==جاري التحميل
2==تم التحميل
3==تفاعلي
4==تم اكماله
ثم
الخاصية التالية
status
شيفرة حالة الطلب
وتعود بقيم مختلفة منها
100 ==معلومات
200==نجاح
204 ==المستند لايحتوي على بيانات
300==اعادة توجيه
302== تم نقل المصدر الى مكان اخر
400==خطا
401== يحتاج الى التحقق من المستخدم
4.3==تم رفض الطلب من قبل المخدم
404==الملف غير موجود على المخدم
408 ==فشل اتمام الطلب خلال الفترة المحددة
500==خطا من المخدم وعادة يكون من خطاء في الشيفرة المكتوبة
ثم خاصية استرجاع البيانات
responseText
تقوم بارجاع البيانات على شكل نص
اما الخاصية التالية
responseXML
تقوم بارجاع البيانات على شكل xml
الخاصية
statusText
عبارة عن سبب http
المرجعة من قبل المخدم
اما
getAllresponsel
ارجاع كافة الترويسات من المستعرض
اما الدالة
getresponseHeader
تقوم باخذ بارمتر واحد وهو اخذ الترويسة المراد الحصول على قيمتها
وتعود بقيمة الترويسة
اما الدالة
Header
تقوم بارجاع سلسلة نصية حول الترويسات
وبذلك نكون قد اتنهيا شرح دوال الاجكس الامثلة العملية لذلك
مثال ل get
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){
// طباعة النتيجة في وسم هوتمل مثلا
//<div id="t" ></div>
document.getElementById('t').innerHTML= http.responseText;
}
}
};
مثال ل post
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){
// طباعة النتيجة في وسم هوتمل مثلا
//<div id="t" ></div>
document.getElementById('t').innerHTML= http.responseText;
}
}
};
هذه الاجكس بكافة عيونها
وارجو من الله العلي القدير اكون قد اوصلت المعلومة وهذا وقل ربي زدني علما
|
