الثلاثاء، 12 أكتوبر، 2010

مكتبة 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

هناك تعليق واحد:

  1. شكرا ا اخى عل المعلومات الجميلة

    ردحذف