تبادل الخبرات[3](Include(Ajax))
السلام عليكم
اضع لكم في هذا الموضوع التبادلي تجربتي مع ajax -Asynchronous JavaScript and XML- وبعض معارفي الخاصة به
قبل ان اعرف هذه التقنية و في بداية تطوير ال winoscript وجدت اني مضطر الى طريقة لجلب ملف البرمجة بالعربية من خارج الصفحة و دون عمل الرفريش، فكان ان وجدت حل ناجع وهي افتح فريم في الصفحة و أخفيه ومن خلال جافا سكريبت أعطيه الإمتدال للصفحة التي اود جلبها، وبعد انتهاء التحميل صفحة الفريم يقوم متغير بجلب محتوياتها باي صيغة innerHTML أو innerText فكان هذا هو الكود
وهنا أمثلة قديمة للوينوسكريبت تعتمد على هذا الكود الشبه المبتكركود PHP:<SCRIPT LANGUAGE="JavaScript">
<!--
var iframe = '<iframe id="frimino" style="display:none"></iframe>';
document.write(div);
////
Include = function(url){
var fram = document.getElementById("frimino");
fram.src = url;
fram.onload = function(){
var aramid = document.getElementById('frimino').contentWindow.document.body;
if(document.all){aramid = aramid.innerText}else{aramid = aramid.innerHTML}
}
}
Include("http://www.serdal.com")
//-->
</SCRIPT>
http://www.winoscript.com/ws/demo.html
عندما وصلت لهته النتيجة كانت قد اخدت مني ليلة كاملة و النتيجة في الصباح أعطيتها للعريس الجديد ابو مشعل
كنت سأطرح هذا الكود لولا ان قلت سأستشير المبرمج عادل(صاحب مدونات العرب) اولا، كما يستشيرني هوبدوره في بعض الأكواد و السكريبتات قبل طرحها للعموم،فقال لي لا تتعب نفسك يا ابراهيم هذه التقنية، موجودة قلت له كيف فأعطاني هذا الكود:
فوجدت الكود ونعم، وفي المساء قال لي الأخ رضا ابراهيم عندي مشكلة صغيرة، ماهي؟ قال أريد خلية وسط جدول ان تجلب لي قيمة من قاعدة البيانات في كل مرة دون ان اجعل الصفحة تحمل من جديد(الرفريش) فكان كود عادل(ajax) هو الحلكود PHP:function include (url)
{
if (url == null) return;
try {
var con = new XMLHttpRequest ();
} catch (e) {
try {
var con = new ActiveXObject("Msxml2.XMLHTTP");
} catch (_e_) {
var con = new ActiveXObject("Microsoft.XMLHTTP");
}
}
con.open ("GET", url, false);
con.send (null);
eval (con.responseText);
}
--
وgoogle له علاقة بهذه التقنية خصوصا في البريد-الثورة- Gmail ونفهم الآن لماذا كان بريد gmail يطلب منا تغيير متصفحنا او ترقيته في بعض الأحيان، خصوصا في ie الخاص ب win2000، ذالك لأنه يعتمد على هذه التقنية كشرط تعاملي أساسي
إيجابيات هذه التقنية:
- تخفيف ضغط كبيرعلى السيرفرو الترافيك ذالك لأن هذه التقنية تجعل المتصفح يتقاسم مع السرفربعض الأدوار
- جعل الصفحة تفاعلية، اي انجاز معاملات برمجية داخل الصفحة دون ان تعيد تحميلها من جديد، مما يكسب صفحتك مرونة و حيوية
- جعل الصفحة تتبادل مع السيرفر فقط معلومات وقيم ومتغيرات خاصة دون باقي مكونات الصفحة الأخرى
- اذا استعنا بدالة التوقيت الموجودة في الحافا سكريبت، يمكن ان ننجز سكريبتات الدردشة مثلا وهذا السكريبت يتصل في كل نصف ثانية بالسيرفر ليرسل و يجلب، كذالك اذا اردت ان تنجز لعبة ورقية او سطرنج بين لاعبين او اكثر إذا استعنت بالسيسون ضمن php و اجاكس ضمن جافا سكريبت
سلبيات هذه التقنية:
- تعمل فقط مع جافا سكريبت
- قد تشكل تغرة جديدة على انترنت اكسبلورر، حيث ان هذه التقنية تجلب من اي ملف من الجهاز دون قيد او شرط، ولكم ان تفهمو ذالك من خلال بريد gmail حيث انه في متصفح انترنت اكسبلورر لا يحتاج الى وسم استعراض type=file الا لمعرفة امتداد الملف اما السحب فإنه يكون عن طريق ajax
- لا تعترف بالمتصفحات القديمة او النادرة
- لا يمكن الجلب من خارج السيرفر الا في بعض الحالات الخاصة
---------------------------------------
نأتي الآن للكود
توجد ثلاث مقابض(نهج) للإمساك بتقنية ajax في المتصفحات
اتنثان للأنترنيت اكسبلورر في الويندوز ضمن أكتيف إكس
var ajax = new ActiveXObject("Microsoft.XMLHTTP");
var ajax = new ActiveXObject("Msxml2.XMLHTTP");
والثالثة لباقي المتصفحات Mozilla, Konqueror, Safari و Opera
var ajax = new XMLHttpRequest();
واحسن طريقة للإمساك بالمقبض المناسب في كل متصفح هي عن طريق catch و try مثال في الكود السالف ذكره فوق او if else كـ:
بعد ان أخد المتغير ajax قيمة مقبض XMLHTTPكود PHP:if (window.XMLHttpRequest){
ajax = new XMLHttpRequest();
} else if (window.ActiveXObject){
ajax = new ActiveXObject('Microsoft.XMLHTTP');
Msxml2.XMLHTTP
} else
return false
يصبح سهل علينا ان ندرك تركيب كل المناهج الثالية:
نهج العنصر XMLHttpRequest
المنهج open()
الوصف: لفتح التماس جديد واختيار النهج get او post او head ثم الروابط
------------------------
المنهج abort()
الوصف: التخلى عن الالتماس
------------------------
المنهج send()
الوصف: ارسال الالتماس اما بقيمة اوبدون(null) وذالك يعتمد على اي نهج في الإرسال اخترنا get او post
------------------------
المنهج setRequestHeader()
الوصف: ارسال او تثبيت قيمة لرأس(الهيدر) الصفحة او الملف المرسل ( صورة او ملف تنفيدي او ملفات الأنماط المتعاقبة)
------------------------
المنهج getResponseHeader()
الوصف: أخد قيمة الرأس(الهيدر) وهذه ستنفعنا ان نستكشف اي نوع من الملفات التي سنجلب
------------------------
المنهج getAllResponseHeaders()
الوصف: استقبال او اخد كل قيم هيدر الصفحة المطلوبة على هيئة سلسلة كتابية
------------------------
############
ايضا هذه الخصائص:
خصائص العنصر XMLHttpRequest
العنصر readyState
خصائصه:
وهي خاصة بوضعية العنصر، وتعطيك خمس قيم رقمية من 0 الى 4
0 = لا توجد قيمة، اي ليس هناك ارسال او استقبال
1 = النهج open() فتح الإرسال بنجاح
2 = النهج send() ارسل بنجاح
3 = الصفحة او الملف المراد جلبه قيد التحميل - وهذه القيمة تنفع اذا اردت ان تواسي الشخص المتصفح بكلمة -قيد التحميل او لحظات مثل بريد gmail حين يضع loading بالأحمر-
4 = انتهى التحميل
------------------------
العنصر responseText
خصائصه:
رد كتابي او بمعنى اخد الرد كقيمة كتابية Text
------------------------
العنصر responseXML
خصائصه:
اخد الرد كقيمة dom بمعنى انه يمكنك ان تأخد هذه القيمة كلغة توصيفية للتعامل معها بالدوال الخاصة بـ xml، اي نفترض انك جلبت ملف xml به ما يزيد عن 100 سطر وتريد فقط ان تجلب منه ثلاث اسطر او تعريفات فإن استقبلته ضمن الخاصية responseText فماهية وما لونها حتى تستخلص منها فقط تلك السطور التي تبغيها، اما اذا استعملت خاصية responseXML فالأمر سيكون سهل جدا و للغاية حيث أنك ستعتمد على خاصية item() لجلب ماتحتاجه فقط
------------------------
العنصر status
خصائصه:
هذه الخاصية تستكشف اي تصريح(اذا صحت الكلمة) معطى للصفحة المراد جلبها ف مثلا 404 لصفحة الخطأ، و 200 فهي تعني الموافقة، اي ان الصفحة يمكن جلبها عن طريق تقنية ajax، لكن هذه المسألة تطرح فقط اذا كانت الصفحة المراد جلبها توجد في سيرفر آخر، وغالبا لا يمكن ان تجلب اي ملف من خارج السيرفر، حتى وان كان rss وهذه الخاصية تنفع في اظهار رسالة تنبيه في حالة لم يكن التصريح 200
وهناك مفارقة بين انترنت اكسبلورر و باقي المتصفحات الأخرى، حيث انه اذا كان ملف ajax في localhost يمكن لمتصفح انترنت اكسبلورر ان يجلب اي صفحة او ملف من اي موقع او سيرفر آخر سواء كان التصريح 200 او 2005
مثل البريمج TransAjax حيث يرسل ويجلب المعلومات من google دون قيد او شرط، لكن هذا كما قلت يحدث فقط في انترنت اكسبلورر واذا كان امتداد الصفحة في لوكال هوست
------------------------
العنصر statusText
خصائصه:
الرسالة التي تكون مصحوبة مع الكود لمعرفة بعد الخصائص المتقدمة للملف
------------------------
العنصر onreadystatechange
خصائصه:
تدبير الحالة في كل تغيير او في كل مرة وهي تنفع عندما نريد ان نستعمل تلك الدالة اكثر من مرة.
------------------------
~~~~~~~~~~
و الآن اليكم دالتنا الخاصة include() بحيث ان هذه الدالة ستعود لنا بقيمة محتوى الرابط الذي سنجلبه
/////كود PHP:<SCRIPT>
//////////////////////////////>
include = function(url,method_,send_){
var ajax;
if (!url) return;
try{
ajax = new XMLHttpRequest ();
}
catch (e){
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (_e_) {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
}
ajax.open (method_, url, false);
ajax.send (send_);
if (ajax.readyState==4)
return ajax.responseText;
}
///////////////////////////////>
</SCRIPT>
للعلم هذه التقنية لاتدخل ضمن المقاييس العالمية للمنظمة w3c على الأقل حاليا، لكن لها ارضية خصبة لهذه التقنية ضمن دوم المستوى الثالت dom level3
اتمنى ان اكون قد اوصلت لكم شيئا و ستكون لي عودة للموضوع لوضع بعض الأمثلة و بعض الإنجازات
كذالك انتظرها منكم
والمعذرة على بعض الأخطاء الإملائية و النحوية الخائنة
و السلام
رد مع اقتباس
المشاركة الأصلية كتبت بواسطة Zizwar
