السلام عليكم ورحمة الله وبركاته
أولاً أبارك للأخوة هنا فى سوالف على القسم الجديد وابارك لمشرفنا wino او زيزوار سابقاً ولو انى لم ابتلع الإسم الجديد بعد .. مبروك القسم ومبروك رمضان ..
هذه المقالة كتبتها مسبقاً ولكن حان الوقت لتوضع بقسمها المضبوط
المقال من ترجمتى كاملاً وهناك ان شاء الله عدة مقالات اخرى سأقوم بترجمتها
الله الموفق ..
بسم الله نبدأ ...
فى الآونه الأخيرة, تقريباً كل من يعمل فى مجال تطوير الويب قد سمع عن تقنية الأجاكس, والتى تعرض ببساطة إتصالات السيرفر الوكيل ومحتوياته بدون إعادة تحميل الصفحة. معظم المقالات حول الأجاكس تركزت حول إستخدام الـ XMLHttp ليحقق نفس الإتصال المطلوب, لكن الأجاكس ليست محدودة فقط فى XMLHttp. هناك عدة طرق أخرى, وسوف نستعرض بعض منها خلال تلك السلسله من المقالات.
Dynamic Script Loading( تحميل السكريبت الديناميكى )
أول تقنيات الاجاكس البديلة هى تحميل السكريبت الديناميكى أو ما يعرف بـ Dynamic Script Loading الفكرة العامة بسيطة :
إنشئ عنصر <script/> جديد وحدد ملف الجافا سكريبت لرمز الـ src لتحميل ملف الجافا وهو مبدأياً ليس مكتوب داخل الصفحة .
بداية هذه التقنية ترجع عندما دخلت متصفحات إنترنت إكسبلورر 4 و نت سكيب 4 إلى الأسواق .
فى هذا الوقت تعلم المطورون أنهم يستطيعون إستخدام طريقة
document.write()
لكتابة كود <script/>
وكان التوضيح أنه كان لابد أن يعمل قبل تحميل الصفحة كلياً.
ومع حلول الـ DOM, تحول المفهوم إلى مستوى ومنحنى أخر .
The Technique ( التقنية )
التقنية الرئيسية وراء تقنية ( تحميل السكريبت الديناميكى ) سهلة , كل ما تحتاجه هو إنشاء عنصر <script/> بإستخدام الـ DOM وإضافتها للصفحة.
مثال على الكود:
كود:
var oScript = document.createElement("script");
oScript.src = "/path/to/my.js";
document.body.appendChild(oScript);
لن يبدأ التحميل إلا لو كان العنصر <script/> الجديد قد أضيف إلى الصفحة ,لذا فهو مهم جداً ألا تنسى هذه الخطوة.
( وهذا بالطبع يخالف الكود الديناميكى <img/> الذى يتم تحميله فوراً بمجرد تحديد رمز الـ src )
بمجرد إتمام التحميل, يقوم المستعرض بترجمة الجافا سكريبت الموجودة فى الصفحة. الآن أصبحت المشكلة مسألة توقيت: كيف تعرف عندما ينتهى تحميل الكود ويتم ترجمته؟. بخلاف عنصر الـ<img/> فعنصر <script/> ليست لديه بديل التحميل, لذا لا يمكنك الأعتماد على المستعرض ليخبرك متى سيتم إتمام التحميل للسكريبت. لذا بدلاً من ذلك لابد ان يكون لديك وظيفة إستدعاءوالتى يتم تنفيذها فى نهاية الكود البرمجى.
المثال الأول:
هذا مثال بسيط لتوضيح خاصية تحميل السكريبت الديناميكى. الصفحة فى هذا المثال تحتوى على زر واحد والذى يقوم عند الضغط عليه بعرض الداله
("Hello world!") من ملف جافا سكريبت خارجى. يتم تمرير تلك الدالة إلى وظيفة الإستدعاء المسماه بـ
callback()والنى تعرضه بإنذار.
وكود الهتمل لهذه الصفحة هو كالتالى
كود:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example 1</title>
<script type="text/javascript">//<![CDATA[
function makeRequest() {
var oScript = document.createElement("script");
oScript.src = "example1.js";
document.body.appendChild(oScript);
}
function callback(sText) {
alert("Loaded from file: " + sText);
}
//]]>
</script>
</head>
<body>
<input type="button" value="Click Me" onclick="makeRequest()" />
</body>
</html>
وملف الجافا سكريبت example1.js يحتوى على سطر واحد فقط
callback("Hello world!");
كيف يعمل هذا الكود ؟
عندما يتم الضغط على الزر, يتم إستدعاء وظيفه makeRequest()
ويبدأ تحميل السكريبت الديناميكى.
وعندما يكون السكريبت المحمل الجديد داخل السياق البرمجى للصفحة يستدعى وظيفة callback(),
والتى تستطيع إستخدام القيمة المعادة كما يجب. هذا المثال يعمل على أى متصفح متطابق مع الـ DOM مثل الإنترنت اسكبلورر 5 وما فوقه و وسفارى والفاير فوكس و الأوبرا 7 ومافوقه
للتجربة الحية للمثال إضغط هنا لتحميل المثال إضغط هنا .
إتصالات أخرى أكثر تعقيداً.
بعض الأحيان سوف تريد تحميل ملف جافا سكريبت ثابت من الخادم, مثل الموجود فى المثال السابق, ولكن فى بعض الأحيان قد تريد ان ترجع إلى قاعدة البيانات لبعض الملومات. هذا يقدم مستوى معقد من خاصية تحميل السكريبت الديناميكى وراء المثال السابق.
أولاً, سوف تحتاج إلى طريقة لنقل البيانات إلى الخادم. وذلك يمكن إنجازه بواسطة إرفاق داله شرطية لرابط الجافا سكريبت. بالطبع لن يستطيع ملف الجافا سكريبت الدخول إلى بيانات الدالة الشرطية بنفسه, لذا سوف تحتاج إلى إستخدام ما يعرف بـ server-side logic لمعالجة الطلب وإخراج ملف الجافا سكريبت الصحيح . وهذه هى الوظيفة ستساعدك على الإتمام
كود:
function makeRequest(sUrl, oParams) {
for (sName in oParams) {
if (sUrl.indexOf("?") > -1) {
sUrl += "&";
} else {
sUrl += "?";
}
sUrl += encodeURIComponent(sName) + "=" + encodeURIComponent(oParams[sName]);
}
var oScript = document.createElement("script");
oScript.src = sUrl;
document.body.appendChild(oScript);
}
هذه الوظية متوقع منها تمرير الرابط لملف الجافا سكريبت والكائن الذى يحتوى على الدالة الشرطية. والدالة الشرطية والدالة الشرطية تم إنشاؤها بداخل الوظيفة بواسطة إعادة صفات الكائن. بعد ذلك يتم إستخدام تقنية تحميل السكريبت الديناميكى المألوفة. ويمكن ان تكون الوظيفة كالتالى
كود:
var oParams = {
"param1": "value1",
"param2": "value2"
};
makeRequest("/path/to/myjs.php", oParams)
بعد ذلك سوف تحتاج إلى طريقة لتحديد وظيفة الإستدعاءلإستخدامها. وهو ممكن ان تدخل إلى نفس المعلومات من صفحات مختلفة وبطرق مختلفة. إجبار كل صفحة ان تحتوى على دالة إستدعاء ليس جيد لتصميم وبناء جيد. بدلاً من ذلك سوف يكون من الجيد ان تخبر ملف الجافا سكريبت إسم وظيفة الإستدعاء لإستخدامها وبذلك سوف يكون قد تم إدخالها ديناميكياً. إسم داله الإستدعاء يمكن وضعه كالتالى
كود:
var oParams = {
"param1": "value1",
"param2": "value2",
"callback": "myCallbackFunc"
};
makeRequest("/path/to/myjs.php", oParams);
الملف الذى ينشئ الجافا سكريبت وبعد ذلك عليه أخذ إسم وظيفة الإستدعاء وإخراجها فى الكود هو كالتالى
كود:
<?php
header("Content-type: text/javascript");
?>
var sMessage = "Hello world!";
<?php echo $_GET["callback"] ?>(sMessage);
الجزء الأول من هذا الملف يحدد نوع المحتويات كـ text/javascript وبذلك يستطيع المستعرض ان يتعرف عليه كجافا سكريبت. بعد ذلك يقوم متغير الجافا سكريبت والمسمى بـ sMessage والذى يعرف ويحدد بأنه الشرط, "Hello world!" . والسطر الأخير يخرج إسم وظيفة الإستدعاء التى تم إمرارها عبر الدالة الشرطية, متبوعة بأقواس لقفل الداله sMessage, والذى يجعلها وظيفة إستدعاء بشكل فعال. إذا تم العمل كما خطط له سوف يكون السطر الأخير كالتالى
myCallbackFunc(sMessage);
المثال الثانى
هذا المثال تم بناءه على المثال الأول, لكن هذه المرة سوف ترسل معلومات إضافية إلى الخادم وإخباره أى وظيفة استدعاء عليه إستدعاءها أولاً ألق نظرة على ملف البى اتش بى الذى سيخرج الجافا سكريبت
كود:
<?php
header("Content-type: text/javascript");
?>
var sMessage = "Hello, ";
var sName = "<?php echo $_GET['name'] ?>";
<?php echo $_GET['callback'] ?>(sMessage + sName);
الجافا سكريبت الذى سيتم إخراجه سوف يحدد متغيرين اثنين , sMessage و sName, الأول به "Hello, ", والثانى يحدد قيمة الإسم الموجود فى الداله الشرطية بعد ذلك يتم إخراج إسم وظيفة الإستدعاء مروراً بسلسلة من الـ sMessage و الـ sName.
فى جانب الوكيل تحتوى الصفحة على صندوق للكتابة وزر واحد.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example 2</title>
<script type="text/javascript">//<![CDATA[
function makeRequest(sUrl, oParams) {
for (sName in oParams) {
if (sUrl.indexOf("?") > -1) {
sUrl += "&";
} else {
sUrl += "?";
}
sUrl += encodeURIComponent(sName) + "=" + encodeURIComponent(oParams[sName]);
}
var oScript = document.createElement("script");
oScript.src = sUrl;
document.body.appendChild(oScript);
}
function messageFromServer(sText) {
alert("Loaded from file: " + sText);
}
function getInfo() {
var oParams = {
"name": document.getElementById("txtInput").value,
"callback": "messageFromServer"
};
makeRequest("example2js.php", oParams);
}
//]]>
</script>
</head>
<body>
<input type="text" id="txtInput" value="Nicholas" />
<input type="button" value="Get Info" onclick="getInfo()" />
</body>
</html>
عندما يتم ضغط الزر فإن طريقة getInfo() يتم إستدعاءها, والتى تقوم بتحميل كائن بإسم محدد ( الذى يتم وضعه فى صندوق الكتابه) وإستدعاء محدد. بعد ذلك يتم إستدعاء وظيفة makeRequest(), إمرارها فى هذه القيمة. بعد تحميل السكريبتو يتم إستدعاءوظيفة messageFromServer() سوف يتم فتح صندوق حوارى بها ما تم إستقباله من السيرفر.
لتجربة الكود إضغط هنا لتحميل الكود إضغط هنا .
العوائق
برغم أن تقنية تحميل السكريبت الديناميكى سريعة و سهله لإنشاء إتصال جانبى مع السيرفر. ولكنا تحتوى على بعض العوائق فمثلاً لا تحتوى على إعادة إتصال بمجرد ان يتم إنشاء الإتصال. على سبيل المثال إذا كان الملف المطلوب غير موجود فلن تستقبل رسالة خطأ 404 من الخادم. ويمكن ان يوضع موقعك او برنامجك فى حالة الإنتظار أو السكون لعدم وجود دالة إستدعاء.
أيضاً لا يمكنك إستخدام طلب POST بإستخدام تلك التقنية فقط تقنية GET والتى تقلل حجم البيانات التى يمكنك إرسالها. وهذه قد تكون مشكلة أمنيه وقد تسبب ثغرة لذا فتأكد من أنك لا ترسل معلومات حساسة مثل كلمات المورو أو ارقام بطاقات الإئتمان بواسطة تقنية تحميل السكريبت الديناميكى, وذلك لسهولة إستخراجها من الدالة.
الختام
بالرغم من ان XMLHttp هى الطريقة الأكثر حديثاً عنها فى تقنيات الأجاكس. فتقنية تحميل السكريبت الديناميكى مقبوله و خادمة بإمتياز كتقنية بديله. الأمثلة فى هذا المقال بسيطة نسبياً. ولكن ليست صعبة للوصول بتلك التقنية لإنجاز نتائج هامة أخرى.
الحقوق
العنوان الأصلى للمقال
http://www.webreference.com/programming/ajax_tech