انا اريد ان اوضح للناس اننا في زمن التطور السريع؟ ولكن هل سئلتم انفسكم لماذا هذا التطور الهائل؟ الاجابه ليست في ان قوه الاجهزه اصبحت كبيره، بل هي الموضوع يكمن في ان المبرمجين اصبحوا كسالى، اي لا يريدون ان يكتبوا اكثر من سطر ولكن ذالك السطر يجب ان يفعل الكثير.
فكيف نفعل ذالك؟
نفعل ذالك باستخدام نطاقات الاعمال .. اي ان هناك شخص قد اختصر الطريق لعمل شيء ما، فما هو المطلوب منا سوى استعمال ذالك الطريق المختصر.
اولا لنقم بتحميل الملف jQuery من الموقع الرسمي jQuery: The Write Less, Do More, JavaScript Library
ولنصمم ملف اسمه index.html فيه اساسيات ملف الHTML ولنقم بتحميل ملف الjquery فيه
كود HTML:
<html>
<head>
<script src="jquery-1.2.6.min.js"></script>
</head>
<body>
</body>
<div id="content"></div>
</html>
الان .. مذا نريد ان نفعله؟
لماذا لا نفعل ملف PHP يعطينا بعض المخرجات، ولكن لنأخد الدرس الى مستوى اعلى، لماذا لا تنستخدم الJSON؟ الJSON هو طريقه جديدة في نقل بيانات من مكان الى اخر، هو شبيه بالXML من ناحيه الاستخدامات ولكن بدوم الشحم الزائد.
فمثلا ملف XML
كود HTML:
<document>
<user>
<name>Khalid</name>
<phone>01234567890</phone>
</user>
</document>
المرادف له بالJSON يكون
كود HTML:
{"user":{"name":"khalid","phone":"01234567890"}}
فمن تلك المعلوما نستطيع استيعاب بيانات مقارنه بملف HTML، الان لنعمل ملف الPHP الذي سيعطينا الJSON
كود PHP:
<?php
//ajax.php
$user = array(user=>array('name'=>'khalid','phone'=>'01234567890'));
echo json_encode($user); // {"user":{"name":"khalid","phone":"01234567890"}}
?>
الان.. كيف نجعل ملف الHTML يتخاطب مه الPHP ..
كما نعلم ان ملف الHTML الان يحتوي على نطاق العمل jQuery اي يمكننا الاستفاده من قوه الjquey.
نريد ايضا ان نضع رابط في ملف الHTML لكي ينفذ عمليه الAJAX بعد النقر عليها .. فنعدل ملف الHTML الى التالي.
كود HTML:
<html>
<head>
<script src="jquery-1.2.6.min.js"></script>
<script src="javaScript.js"></script>
</head>
<body>
</body>
<a href="#" id="clickHere">Click to Load Ajax</a>
<div id="content">
name: <span id="name"></span> <br />
phoone: <span id="phone"></span>
</div>
</html>
وايضا لاحضتم انني وضعت السطر
كود HTML:
<script src="javaScript.js"></script>
في الملف لكي يحمل ايضا ملف الjavaScript المطوب، هذا الملف سيحتوي على كل السطور الازمه لكي ننفذ عمليه الAJAX
لنقم بانشاء الملف javaScript.js. ونكتب فيه الشرط الاول .. وهو ان يعمل الشفره بعد الانتهاء من تحميل ملف الHTML وفعل ذالك هو بوضع الكود
هذا يقول للjquery ان ينفذ الfunciton بعد الانتهاء من تحميل ملف الHTML. في الjQuery عمليه اختيار الtag المناسب يكون اما بالID او بالCLASS ولكن نحن سنستخدم الID فالان نريد ان نعطي خاصيه للرابط المعرف بالID بالاسم clickHere, والخاصيه هي .. ان يتم عمليه اجاكسيه بعد الامر Click ويتم وضع الناتج في الDIV المعرف بالID تحت اسم content ووضع الناتج في الخانات المناسبه
فسيكون ملف الjavaScript كالتالي
كود:
//javaScirpt.js
$(function(){
$('#clickHere').click(function(){
$.getJSON('ajax.php',function(data){
$('#content #name').text(data.user.name);
$('#content #phone').text(data.user.phone);
});
});
});
جرب الكود بنفسك .. ستنبهر بما تستطيع فعله في اسطر قليله.
للمزيد من المعلومات قم بزياره المستند الخاص بjQuery على العنوان
Main Page - jQuery JavaScript Library
=======
الدرس القادم سيحتوي على دروس في الZendFramwork، اذا ضننت ان jQuery كانت سهله وتستطيع عمل الكثير في عده اسطر، انا اضمن لك انك ستقول ماهذا؟؟ هل 20 سطر تكفي لعمل اضافة و تعديل و ازاله سجلات من جدول، لا وفوق ذالك اعمل نظام تسجيل وخروج المستخدم كلها في 20 سطر او اقل!