مثال ساده از phpو ajax

[o_real_love]

سلام
باز هم یک مطلب جالب پیدا کردم ، گفتم خیلی خوبه بچه ها اینو داشته باشند.
کپی رایت در آخر ذکر شده.
اینم از مطلب:
***************************

Ajax (بخوانید eyjaks یا ایژکس ، آجاکس نگین فارسی زبانان !) اسم یه زبان برنامه نویسی نیست ! Ajax با ترکیبی از چند زبان برنامه نویسی ، و چند زبان اسکریپتینگ در تعامله ، حالا بسته به اینه که من چه هدفی دارم و چی می خوام .

در کل من از آبجکت پردازشگر 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 که قبلا" تعریف کرده بودیم هستش ، که هر تگی که این نام رو داشته باشه ، اسکریپت ایژکس محتویات رو داخل همون تگ قرار می ده .

با درخواست این صفحه در سرور ، بدون بارگزاری مجدد صفحه ، محتویات صفحه ی مورد نظر برای کار بر به نمایش در میاد .

خسته نباشید !

کپی رایت از : farsweb.ir