مكتبة ال Prototype هي احد مكتبات الجافا سكربت التى تفتقر للدروس العربية التى تتحدث عنها لذا قررت مشاركة ما اعرفه عنها هنا ليستفيد منها الجميع
المكتبة مفيدة جدا لمن يريدون استخدام الاجاكس فى موقعهم لسهولة التعامل معها لذا سأقوم بشرح التعامل مع الاجاكس من خلالها
فى البداية سأقوم بشرح فكرة الدرس : سنقوم باستدعاء مكتبة الـ Prototype ثم نقوم بانشاء دالتين الاولى لاستقبال البيانات ورابط الملف الذي ستجلب منه البيانات والثانية لطباعة ناتج العملية فى الصفحة
كود HTML:
<script src="js/prototype.js" type="text/javascript"></script>
قمنا هنا باستدعاء المكتبة ثم سنقوم بانشاء الدالة التى ستاخد البيانات وترسلها لملف الـ PHP
كود HTML:
<script type="text/javascript">
function ajaxRequest (url,data)
{
var aj = new Ajax.Request (
url , {
method : 'get' ,
parameters :data,
onComplete : getRespnse
}
);
}
function getRespnse(oReq)
{
$('result').innerHTML = oReq.responsetext ;
}
</script>
هذا هو كود الجافا سكربت الذي ستسخدمه فقط ! بسيط اليس كذلك ؟
الان سنقوم بانشاء الفورم الذي سيرسل البيانات
كود HTML:
<input type="text" id="val" size="10">
<input type="button" value="Submit" onClick="ajaxRequest('page.php', 'val='+$F('val'))">
<div id="result"></div>
وهذا هو كود ال HTML سنقوم بادخال القيمة ثم سنضغط على Submit وعند الضغط سيتم استدعاء الدالة الاولى وارسال اسم الصفحة والقيمة المدخلة فى الخانة التى سميناها val وسيتم طباعة الناتج من الارسال فى ال Div الذي قمنا بانشاءه .
والان سنقوم بإنشاء ملف الـ PHP :
كود PHP:
<?php
if (isset($_GET['val']))
{
echo 'لقد ادخلت '.$_GET['val'];
}
?>
هذا هو ملف الــ PHP الذي يقوم باستقبال المتغيرات التى ارسلناها وطباعتها .
لتحميل مكتبة الــ Prototype : من هنا
انتهى الدرس الان اتمنى ان يستفيد الجميع .
المصدر : مدونتى