دليلك السهل في تعلم استخدام مكتبة jQuery [الدرس الأخير]: AJAX
مدرج تحت قسم: دروس
في هذا الدرس سنركز على تقنية أجاكس (AJAX)، ولن أقوم بإعادة اختراع العجلة أو أشرح من الصفر متى ظهرت هذه التقنية أو طريقة استخدامها مباشرة. ما سأشرحه فقط هو كيفية التعامل مع الأجاكس من خلال مكتبة jQuery.
ولنبدأ:
هناك ثلاث مستويات في المكتبة للتعامل مع الأجاكس:
- أولاً : load
- ثانياً : $.get و $.post
- ثالثا : $.ajax
الدالة load التعامل معها سهل جدا، حيث تستطيع جلب الملف كما هو (انظر المثال رقم 1)، وتستطيع أيضاً التعامل مع طريقة get (انظر مثال رقم 2)
مثال رقم 1
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(){
$("#contents").load("ajax.php");
});
});
</script>
</head>
<body>
<a href="#" title="page1">جلب المحتويات عن طريق أجاكس</a>
<div id="contents"></div>
</body>
</html>
وصفحة ajax.php
<?php
$name="عبد الواحد البشيري<br />";
// مجرد مثال
for($i=0;$i<500;$i++){
echo $name."\n";
}
?>
مثال رقم 2
$(document).ready(function(){
$("a").click(function(){
$("#contents").load("ajax.php?name=abdelouahid");
});
});
وصفحة ajax.php
$name=$_GET['name']; echo $name;
الدالة post و get متقدمة اكثر من الدالة السابقة
post التعامل معها عن طريق post
get عكس الدالة السابقة
طريقة post
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input:submit").click(function(){
$.post("ajax.php",{name:$("#name").val()},function(data){
$("#contents").html(data);
});
return false;
});
});
</script>
</head>
<body>
<form method="post" action="#">
الاسم الكريم<input type="text" name="name" id="name"><br />
<input type="submit" value="تنفيذ"><br />
</form>
<div id="contents"></div>
</body>
</html>
صفحة ajax.php
$name=$_POST['name']; echo $name;
$(”#name”).val() = القيمة التي تم ادخالها في الحقل
طريقة get
$(document).ready(function(){
$("a").click(function(){
$.get("ajax.php",{name:"abdelouahid elbachiri"},function(data){
$("#contents").html(data);
});
});
});
name:”abdelouahid elbachiri” المعلومات التي يتم طلبها عن طريق الرابط
مثل ajax.php?name=abdelouahid elbachiri
صفحة ajax.php
$name=$_GET['name']; echo $name;
أما الدالة ajax فهي دالة شاملة تستطيع معها استخدام كلتا الحالتين السابقتين
post أو get
يمكن التعرف على كيفية استخدامها من خلال دليل الاستخدام بكل سهولة
وأخيراً أنصحكم بتصفح هذا الموقع http://visualjquery.com الذي يوجد فيه كل ما تود معرفته عن استخدام دوال المكتبة.
ولو أحببت أن يكون لديك دليل استخدام المكتبة في جهازك فتفضل دليل استخدام مكتبة jQuery.
وأي نقطة تود الاستفسار عنها فيما يتعلق بالدرس فأنا موجود إن شاء الله
أخيراً..
لن أعدكم بأي دروس مستقبلية لهذه المكتبة ولكن ربما أتطرق إلى بعض المتفرقات.
هذا وإن أخطأت فمن نفسي والشيطان وإن أصبت فمن الله..
والسلام عليكم ورحمة الله وبركاته.
الله يجزيك الخير على المواضيع الرائعة و الدروس المفيدة
واتمنى أن تقوم بإكمال دروس حول هذا الموضوع
وجزاك الله عنا كل خير
اشكرك اخي الكريم
أخوي عبدالواحد :)
بداية أشكرك على المجهود في شرحك لمكتبة (jQUERY) وبصراحة من المتابعين لمقالاتك :)
وددت سؤالك عن رفع الملفات مع ارسال بيانات (data) عن طريق $.post()
عندي فورم رفع صورة مع عنوان و نص ما عرفت كيف أضف enctype معها
علماً بأني أستخدم الـ Validation plugin مع إرسال الداتا
وسؤال ثاني إذا سمحت … كيف أسوي validation على حجم الملف من ال (jQUERY) زي extention validation هل في طريقة أم لازم عن طريق الـ PHP Code ؟؟
وهذا الكود اللي استخدمه في التحقق (validation) و إرسال البيانات …
تقبل تحياتي