السلام عليكم ورحمة الله وبركاته :smile:
قام الأخ أبو حازم الأسكندرانى بنشر موضوع فى سوالف سوفتس يحتوى على 30 مقال خاصين بتقنية الأجاكس
وهذا هو رابط الموضوع
http://www.swalif.net/softs/showthread.php?t=152245
وسوف أقوم بترجمتها بإذن الله
بسم الله نبدأ
=====================
المقال الاول يتحدث عن التقنيات البديلة للأجاكس.
كاتب المقال الأصلى
Nicholas C. Zakas.
رابط ترجمة المقال كاملاً هنا
============================
فى الآونه الأخيرة, تقريباً كل من يعمل فى مجال تطوير الويب قد سمع عن تقنية الأجاكس, والتى تعرض ببساطة إتصالات السيرفر الوكيل ومحتوياته بدون إعادة تحميل الصفحة. معظم المقالات حول الأجاكس تركزت حول إستخدام الـ XMLHttp ليحقق نفس الإتصال المطلوب, لكن الأجاكس ليست محدودة فقط فى XMLHttp. هناك عدة طرق أخرى, وسوف نستعرض بعض منها خلال تلك السلسله من المقالات.
Dynamic Script Loading( تحميل السكريبت الديناميكى )
أول تقنيات الاجاكس البديلة هى تحميل السكريبت الديناميكى أو ما يعرف بـ Dynamic Script Loading الفكرة العامة بسيطة :
إنشئ عنصر <script/> جديد وحدد ملف الجافا سكريبت لرمز الـ src لتحميل ملف الجافا وهو مبدأياً ليس مكتوب داخل الصفحة .
بداية هذه التقنية ترجع عندما دخلت متصفحات إنترنت إكسبلورر 4 و نت سكيب 4 إلى الأسواق .
فى هذا الوقت تعلم المطورون أنهم يستطيعون إستخدام طريقة
document.write()
لكتابة كود <script/>
وكان التوضيح أنه كان لابد أن يعمل قبل تحميل الصفحة كلياً.
ومع حلول الـ DOM, تحول المفهوم إلى مستوى ومنحنى أخر .
The Technique ( التقنية )
التقنية الرئيسية وراء تقنية ( تحميل السكريبت الديناميكى ) سهلة , كل ما تحتاجه هو إنشاء عنصر <script/> بإستخدام الـ DOM وإضافتها للصفحة.
مثال على الكود:
لن يبدأ التحميل إلا لو كان العنصر <script/> الجديد قد أضيف إلى الصفحة ,لذا فهو مهم جداً ألا تنسى هذه الخطوة.var oScript = document.createElement("script");
oScript.src = "/path/to/my.js";
document.body.appendChild(oScript);
( وهذا بالطبع يخالف الكود الديناميكى <img/> الذى يتم تحميله فوراً بمجرد تحديد رمز الـ src )
بمجرد إتمام التحميل, يقوم المستعرض بترجمة الجافا سكريبت الموجودة فى الصفحة. الآن أصبحت المشكلة مسألة توقيت: كيف تعرف عندما ينتهى تحميل الكود ويتم ترجمته؟. بخلاف عنصر الـ<img/> فعنصر <script/> ليست لديه بديل التحميل, لذا لا يمكنك الأعتماد على المستعرض ليخبرك متى سيتم إتمام التحميل للسكريبت. لذا بدلاً من ذلك لابد ان يكون لديك وظيفة إستدعاءوالتى يتم تنفيذها فى نهاية الكود البرمجى.
المثال الأول:
هذا مثال بسيط لتوضيح خاصية تحميل السكريبت الديناميكى. الصفحة فى هذا المثال تحتوى على زر واحد والذى يقوم عند الضغط عليه بعرض الداله
("Hello world!") من ملف جافا سكريبت خارجى. يتم تمرير تلك الدالة إلى وظيفة الإستدعاء المسماه بـ
callback()والنى تعرضه بإنذار.
وكود الهتمل لهذه الصفحة هو كالتالى
وملف الجافا سكريبت example1.js يحتوى على سطر واحد فقط<!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>
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);
الجزء الأول من هذا الملف يحدد نوع المحتويات كـ text/javascript وبذلك يستطيع المستعرض ان يتعرف عليه كجافا سكريبت. بعد ذلك يقوم متغير الجافا سكريبت والمسمى بـ sMessage والذى يعرف ويحدد بأنه الشرط, "Hello world!" . والسطر الأخير يخرج إسم وظيفة الإستدعاء التى تم إمرارها عبر الدالة الشرطية, متبوعة بأقواس لقفل الداله sMessage, والذى يجعلها وظيفة إستدعاء بشكل فعال. إذا تم العمل كما خطط له سوف يكون السطر الأخير كالتالى<?php
header("Content-type: text/javascript");
?>
var sMessage = "Hello world!";
<?php echo $_GET["callback"] ?>(sMessage);
myCallbackFunc(sMessage);
المثال الثانى
هذا المثال تم بناءه على المثال الأول, لكن هذه المرة سوف ترسل معلومات إضافية إلى الخادم وإخباره أى وظيفة استدعاء عليه إستدعاءها أولاً ألق نظرة على ملف البى اتش بى الذى سيخرج الجافا سكريبت
عندما يتم ضغط الزر فإن طريقة getInfo() يتم إستدعاءها, والتى تقوم بتحميل كائن بإسم محدد ( الذى يتم وضعه فى صندوق الكتابه) وإستدعاء محدد. بعد ذلك يتم إستدعاء وظيفة makeRequest(), إمرارها فى هذه القيمة. بعد تحميل السكريبتو يتم إستدعاءوظيفة messageFromServer() سوف يتم فتح صندوق حوارى بها ما تم إستقباله من السيرفر.<?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>
لتجربة الكود إضغط هنا لتحميل الكود إضغط هنا .
رد مع اقتباس
