بسم الله الرحمن الرحيم
في هذا الدرس سنركز على تقنية اجاكس
لن اقوم باعادة اختراع العجلة واشرح من الصفر متى ظهرت هذه التقنية او طريقة استخدامها مباشرة
سأشرح فقط كيفية التعامل مع الأجاكس من خلال مكتبة jQuery
لنبدأ
هناك ثلاث مستويات في المكتبة للتعامل مع الأجاكس
اولا : load
ثانيا : $.get و $.post
ثالثا : $.ajax
الدالة loadالتعامل معها سهل جدا
تستطيع جلب الملف كما هو انظر الى المثال رقم 1 وتستطيع ايضا التعامل مع طريقة get انظر الى المثال الثاني
مثال رقم 1
وصفحة ajax.phpكود PHP:<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>
مثال رقم 2كود PHP:<?php
$name="عبد الواحد البشيري<br />";
// مجرد مثال
for($i=0;$i<500;$i++){
echo $name."\n";
}
?>
وصفحةكود PHP:$(document).ready(function(){
$("a").click(function(){
$("#contents").load("ajax.php?name=abdelouahid");
});
});
ajax.php
الدالة post و get متقدمة اكثر من الدالة السابقةكود PHP:$name=$_GET['name'];
echo $name;
post التعامل معها عن طريق post
get عكس الدالة السابقة
طريقة post
صفحة ajax.phpكود PHP:<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>
$("#name").val() = القيمة التي تم ادخالها في الحقلكود PHP:$name=$_POST['name'];
echo $name;
طريقة get
name:"abdelouahid elbachiri" المعلومات التي يتم طلبها عن طريق الرابطكود PHP:$(document).ready(function(){
$("a").click(function(){
$.get("ajax.php",{name:"abdelouahid elbachiri"},function(data){
$("#contents").html(data);
});
});
});
مثل ajax.php?name=abdelouahid elbachiri
صفحة ajax.php
كود PHP:$name=$_GET['name'];
echo $name;
اما الدالة ajax فهي دالة شاملة تستطيع استخدام كلتا الحالتين السابقتين
post او get
يمكن التعرف على كيفية استخدامها ومن خلال دليل الاستخدام بكل سهولة
وأخيرا عليكم بتصفح هذا الموقع http://visualjquery.com/ الذي يوجد فيه كل ما تود معرفته عن استخدام دوال المكتبة
ولو احببت ان يكون لديك دليل استخدام المكتبة في جهازك فتفضل قم بتحميله من المرفقات
اي نقطة تود الاستفسار عنها فيما يتعلق بالدرس فأنا موجود ان شاء الله
لن اعدكم بأي دروس مستقبلية لهذه المكتبة ولكن ربما اتطرق الى بعض المتفرقات ...
هذا فان اخطات فمن نفسي والشيطان وان اصبت فمن الله
والسلام عليكم ورحمة الله وبركاته
رد مع اقتباس
