المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : شرح استخدام تقنية AJAX لبناء تطبيقات الويب التفاعلية



GeeK4aRaB
23-10-2007, 03:24 AM
السلام عليكم ورحمة الله وبركاته

أسعد الله أوقاتكم بكل خير ... هذه المرة سأبادر بشرح تقنية 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>
<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>
<br /><div style="z-index:3" class="smallfont" align="center">Search Engine Optimization by <a rel="nofollow" href="http://www.crawlability.com/vbseo/">vBSEO</a> 3.0.0</div></body>
</html>
ملف main.js


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
header('(anti-spam-content-type:) text/html; charset=windows-1256');

$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نلاحظ أن هذا التغيير سيكون في السطر التالي


http.open('get', 'test.php?id='+ document.myform.myselect.selectedIndex);
التعديل الذي ستحتاجه في دالة handleInfo
اسم وسم div الذي ستسخدمه لعرض البيانات وهو في المثال الحالي mydivنلاحظ ان هذا التغيير سيكون في السطرين التاليين:


document.getElementById('mydiv').innerHTML = 'جاري جلب البيانات...';

document.getElementById('mydiv').innerHTML = response;
أيضا لاتنسى ان تعدل في ملف test.php حسب إعدادات قاعدة البيانات لديك والمعلومات التي تريد عرضها.

لمشاهدة هذا المثال حيا على الهواء مباشرة :nice: اضغط هنا
http://www.aknet.com/ajax/
يوجد في المرفقات ملف مضغوط يحتوي على كامل ملفات هذا التطبيق.


تحياتي وتقديري لكم
أخوكم بدر
4/7/1426 هـ

http://file7azm.info/do.php?img=807