در کل من از آبجکت پردازشگر XMLHttpRequest که زیر شاخه ی XML هست برای فرستادن یا گرفتن اطلاعات از بانک اطلاعاتی استفاده می کنم ، Java Script وسیله ی این تبادله و باعث عدم باز سازی صفحه می شه و نتیجه رو با php و HTML و این جور چیزا به شما نشون می دم !
در کل بهترین مزیت اینه که باعث لود مجدد صفحه نمی شه و خیلی زود کاربر به هدفش می رسه (اگه فایل های Java Script اونقدر حجیم نباشن که آدم از کرده ی خودش پشیمون شه !) مثال نزدیکش همین دکمه ی تشکره که بعد از خوندن این مقاله روش کلیک می کنید ! قصدم معرفی ایژکس نیست ، پس می رم سراغ یک مثال ساده :
من می خوام 3 تا صفحه مختلف داشته باشم ، که با کلیک روی لینک هر صفحه ، بدون بارگزاری مجدد صفحه ، محتویات صفحات دیگه از بانک اطلاعاتی گرفته و برای من نمایش داده بشه ، مسلما" قبل از هر چیز می رم سراغ ساخت جدول بانک اطلاعاتی :
create table safehat (
safhe varchar(255) not null,
mohtaviyat text not null
);
جدولی به نام safehat ساختم ، دارای 2 ستون : safhe از نوع varchar و mohtaviyat از نوع text که به ترتیب safhe قراره نگهدارنده شماره یا ID صفحه و mohtaviyat ، محتویات صفحه مورد نظرم باشن . صفحاتم رو با محتویات پیش فرض پر می کنم :
insert into safehat (safhe , mohtaviyat) values ('1', 'in mohtaviyyate safheye avvaleh !!!');
insert into safehat (safhe , mohtaviyat) values ('2', 'in mohtaviyyate safheye dovvomeh !!!');
insert into safehat (safhe , mohtaviyat) values ('3', 'in mohtaviyyate safheye sevvomeh !!!');
من اطلاعات 3 تا صفحه رو دارم ، می رم سراغ ساخت صفحه php که کار تجزیه و تحلیل و ارتباط با دیتابیس رو واسم انجام بده :
<?php
mysql_connect("localhost", "Name_Karbari", "Kalameye_Obour"); //khate 2
mysql_select_db("Name_Banke_Etela'ati"); //khate 3
$page = $_GET["page"]; //khate 5
$sql = "SELECT * FROM safehat WHERE safhe = '$page'"; //khate 7
$query = mysql_query($sql) or die(mysql_error()); //khate 8
if( mysql_num_rows($query) == 1 ) //khate 10
{
$sotoonha=mysql_fetch_assoc($query); //khate 12
echo $sotoonha["mohtaviyat"]; //khate 13
}
else
{
echo "etela'ate pishfarz vared nashodeh !"; //khate 17
}
?>
تحلیل کد :
خط 2 : مشخص کردن سرور mysql ، توسط آدرس سرور ، نام کاربری و کلمه ی عبور .
خط 3 : برقراری ارتباط با بانک اطلاعاتی به وسیله ی اسم اون .
خط 5 : متغیری که از طریق متد GET شماره صفحه مورد نظرم رو می گیره و در خودش ذخیره می کنه.
خط 7 :جستار (query) ، مشخص کردن قسمتی از ستون safhe که شماره اون برابر شماره ی درخواستیه (همون page$)
خط 8 : ذخیره جستار (query) بالا در متغیر query$ .
خط 10 : چک می کنم ، آیا اصلا" سطری دارم یا نه ؟ (شماره صفحه و محتویاتش)
خط 12 : انتخاب ستون های هم سطر با query$ و قرار دادنش توی آرایه ی []sotoonha$ .
خط 13 : نمایش محتویات ستون mohtaviyat که با query$ هم سطر هستش.
خط 14 : اگه اطلاعات پیش فرض وارد نشده باشه ، دیگه خودت می دونی !
این صفحه رو با نام process.php ذخیره می کنیم و می ریم برنامه ایژکس رو بنویسیم ، این کد رو می بایست درون تگ اسکریپت و یا به صورت خارجی بارگزاری کنم (با نام script.js ذخیره کنید). به کد زیر نگاه کنید :
function getPage(page){
var xmlhttp=false; //khate 2
try {
xmlhttp = new ActiveXObject('Msxml2.XMLHTTP'); //khate 4
} catch (e) {
try {
xmlhttp = new
ActiveXObject('Microsoft.XMLHTTP'); //khate 8
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest(); //khate 14
}
var file = 'process.php?page='; //khate 16
xmlhttp.open('GET', file + page, true); //khate 17
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) { //khate 19
var content = xmlhttp.responseText; //khate 20
if( content ){ //khate 21
document.getElementById('content').innerHTML = content; //khate 22
}
}
}
xmlhttp.send(null) //khate 26
return;
}
تحلیل کد :
خط 2 : متغیر های قبلی ای رو که در تعامل با برنامه بودن ، نادیده می گیریم .
خط 4 : آبجکت ActiveX از نوع Msxml2 رو توسط دستور try محک می زنیم .
خط 8 : آبجکت ActiveX از نوع Microsoft رو توسط دستور try محک می زنیم .
خط 14 : در صورتی که یکی از انواع آبجکت های بالا کار کردن ، رویه ی گرفتن اطلاعات رو با XMLHttpRequest شروع می کنیم .
خط 16 : این مسیر همون فایلیه که قبل از این ساختیم (process.php)
خط 17 : گرفتن اطلاعات از طریق متد GET با تعریف صفحه مورد نظر (page)
خط 19 : این دستور چک می کنه که آیا برای دریافت اطلاعات مشکلی هست یا نه .
خط 20 : اطلاعات رو دریافت می کنه .
خط 21 : این دستور چک می کنه که متغیر content (اطلاعاتی که از دیتابیس میاد) حاوی اطلاعات هست یا نه .
خط 22 : محتویات گرفته شده رو درون div با آی دی content (که بعدا" تعریف می کنیم) قرار می ده .
خط 26 : لغو آبجکت XMLHttpRequest .
خب حالا همه چیز مهیاست تا صفحاتی رو که کاربر می بایست با اون روبرو بشه رو بسازیم . صفحه لزوما" نباید پویا (Dynamic) باشه و یه صفحه html هم کفایت می کنه .
فایل هائی رو که تا اینجا ساختیم تو یه پوشه می ذاریم (کد قبلی که اسکریپت بود رو می تونین import کنید یا تو صفحه ی جدید داخل تگ script) قرار بدین . محتویات سند جدید رو به صورت زیر و با نام index.php می سازم :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Bonyanalam Ajax Sample</title>
<script language="javascript" type="text/javascript" src="script.js">
</script>
<!-- khate 5 -->
</head>
<body>
<a href="javascript:getPage('1')">safhe 1</a> <!-- khate 8 -->
<a href="javascript:getPage('2')">safhe 2</a>
<a href="javascript:getPage('3')">safhe 3</a>
<div id="content"> <!-- khate 11 -->
</div>
</body>
</html>
تحلیل کد :
خط 5 : همون کد قبلی رو به نام script.js ذخیره و به این صورت وارد کردم .
خط 8 : داخل تگ A تابع ()getPage رو با آرگومان مطابق صفحه ی درخواستی ، فراخونی کردم .
خط 11 : این همون تگ با آی دی content که قبلا" تعریف کرده بودیم هستش ، که هر تگی که این نام رو داشته باشه ، اسکریپت ایژکس محتویات رو داخل همون تگ قرار می ده .
با درخواست این صفحه در سرور ، بدون بارگزاری مجدد صفحه ، محتویات صفحه ی مورد نظر برای کار بر به نمایش در میاد .
خسته نباشید !
این مقاله آموزشی برای اولین بار نوشته شده و منبعی جز Bonyanalam Forums نداره ، لطفا" با کپی های بدون منبع مطالب ، زحمات نویسنده ی اون مطلب رو خدشه دار نکنید .