السلام عليكم ورحمة الله وبركاته
أسعد الله أوقاتكم بكل خير ... هذه المرة سأبادر بشرح تقنية AJAX التي تعتبر جديدة نوعا ما .. ولن انتظر حتى نراها تستخدم في التطبيقات والسكربتات الاجنبية ... أيضا من باب تحفيزكم لاستخدامها في برامجكم الجديدة ان شاء الله.
تعريفها:
AJAX اختصار لعبارة Asynchronous JavaScript and XML وتتكون من التقنيات التالية:
- HTML أو XHTML و CSS لعرض المعلومات
- Document Object Model لعرض والتفاعل مع المعلومات المعروضة من خلال JavaScript
- كائن XMLHttpRequest لتبادل البيانات بشكل متزامن مع المزود او الخادم.
- تقنية XML وهي جزء اختياري لن نحتاج إليه حاليا.
استخدامها:
هذه التقنية تستخدم كوسيلة مساعدة في بناء تطبيقات الويب التفاعلية مثلا عند الحاجة لإرسال او جلب بيانات بدون إعادة تحميل الصفحة. ويمكن استخدامها على أيٍ متصفح يدعم التقنيات المذكورة سابقا وتشمل Internet Explorer و FireFox و Opera وغيرها.
مثال عملي:
سنقوم بإنشاء تطبيق يقوم بجلب بيانات من قاعدة بيانات MySQL بناءا على اختيار المستخدم ومن ثم عرضها له بدون إعادة تحميل الصفحة.
يتكون المثال الذي سنقوم بتطبيقه من ثلاث ملفات:
- ملف index.html ويستخدم لعرض البيانات للمستخدم.
- ملف test.php ويستخدم لجلب البيانات من قاعدة البيانات.
- ملف main.js ويحتوي على دوال الاتصال بالخادم وجلب البيانات وعرضها
ملف index.html
كود HTML:
<html>
<head>
<title>تجربة</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
<script src="main.js"></script>
</head>
<body>
<form name="myform">
<select name="myselect" onChange="getInfo()">
<option value="" selected="selected">اختر رقما</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</form>
<div id="mydiv"></div>
</body>
</html>
ملف main.js
كود HTML:
var http = createRequestObject();
function createRequestObject(){
var request_;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_ = new ActiveXObject("Microsoft.XMLHTTP");
}
else{
request_ = new XMLHttpRequest();
}
return request_;
}
function getInfo(){
http.open('get', 'test.php?id='+ document.myform.myselect.selectedIndex);
http.onreadystatechange = handleInfo;
http.send(null);
}
function handleInfo(){
if(http.readyState == 1){
document.getElementById('mydiv').innerHTML = 'جاري جلب البيانات...';
}
if(http.readyState == 4){
var response = http.responseText;
document.getElementById('mydiv').innerHTML = response;
}
}
ملف test.php
كود PHP:
<?php
$id=intval($_GET['id']);
$dbhost="localhost";
$dbuser="root";
$dbpass="";
$database="test";
$link = @mysql_connect( $dbhost, $dbuser, $dbpass );
$db = @mysql_select_db( $database,$link );
$result = mysql_query("SELECT * FROM mytable WHERE id=$id");
while ( $row = mysql_fetch_array($result) ){
echo $row['name'];
}
mysql_free_result($result);
mysql_close($link);
?>
تركيزنا على ملف main.js وهو يتكون من ثلاثة دوال:
دالة
createRequestObject لانشاء كائن الاتصال بالخادم.
دالة
getInfo لارسال البيانات إلى ملف test.php
دالة
handleInfo وهي دالة مساعدة لدالة getInfo وتقوم بعرض البيانات بعد جلبها
في الغالب لن تحتاج للتعديل على دالة createRequestObject
قم بالتعديل فقط في دالتي getInfo و handleInfo ولك ان تسميها كما تشاء
التعديل الذي ستحتاجه في دالة getInfo
- اسم ملف php الذي نستخدمه لعرض البيانات
- اسم النموذج في صفحة HTML وهو في المثال الحالي myform
- اسم صندوق القائمة المنسدلة وهو في المثال الحالي myselect
نلاحظ أن هذا التغيير سيكون في السطر التالي
كود HTML:
http.open('get', 'test.php?id='+ document.myform.myselect.selectedIndex);
التعديل الذي ستحتاجه في دالة handleInfo
- اسم وسم div الذي ستسخدمه لعرض البيانات وهو في المثال الحالي mydiv
نلاحظ ان هذا التغيير سيكون في السطرين التاليين:
كود HTML:
document.getElementById('mydiv').innerHTML = 'جاري جلب البيانات...';
document.getElementById('mydiv').innerHTML = response;
أيضا لاتنسى ان تعدل في ملف test.php حسب إعدادات قاعدة البيانات لديك والمعلومات التي تريد عرضها.
لمشاهدة هذا المثال حيا على الهواء مباشرة :nice: اضغط هنا
http://www.aknet.com/ajax/
يوجد في المرفقات ملف مضغوط يحتوي على كامل ملفات هذا التطبيق.
جربت ان اعرض بيانات مخزنة باللغة العربية ولكن حدث خطأ ومازال البحث جاري عن طريقة التعامل مع اللغات الاخرى ومنها العربية
تحياتي وتقديري لكم
أخوكم بدر
4/7/1426 هـ
