alonemm
یک شنبه 04 خرداد 1393, 16:55 عصر
استفاده از Ajax امروزه حداقل در یک قسمت کوچک از هر وب سایت مرسوم شده است که توسط آن بدون اینکه صفحه ای به سمت سرور ارسال شود یک قسمت از آن بروز رسانی میشود، که خیلی هم مورد استفاده قرار میگیره اما یکی از مهمترین مشکلات آن این هست که مثل برای نمایش یک مطلب که به صورت Ajax نمایش داده میشه امکان به اشتراک گذاشتن و یا بوک مارک کردن آن وجود ندارد،چون URL صفحه آدرس صفحه اولی را نمایش میدهد، که از نظر SEO برای موتورهای جستجو هم اصلا کار آمد نیست.
یه راه کار خوب که سایت هایی مثل فیس بوک و تویتر از اون استفاده می کنند استفاده از Ajax و تغییر آدرس صفحه هست،که هم صفحه رفرش نمیشه و هم تایتل صفحه و محتوای آن بروز رسانی میشود.
افزونه‌ای به نام Pjax طراحی شده‌است که کار آن دریافت محتوای HTML ایی از سرور و قرار دادن آن در یک جایگاه خاص مانند یک div است. در پشت صحنه‌ی آن از jQuery ajax استفاده شده، به همراه push state
pjax = pushState + AJAX
خب حالا درقالب یک پروژه دنبال میکنیم:
یک فایل به نام header.php داریم:
<html>
<head>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/jquery.pjax.js"></script>
<script type="text/javascript">
var direction = "right";
$(document).ready(function(){
$(document).pjax('a', '#main')
$(document).on('pjax:start', function() {
$(this).addClass('loading')
})
$(document).on('pjax:end', function() {
$(this).removeClass('loading')
})
});
</script>
<style>
#main {
font-family:Helvetica,Arial,sans-serif;
width:30%;
opacity: 1;
transition: opacity 0.20s linear;
}
#main.loading {
opacity: 0.5;
}
h2 {margin-left:200px;}
ul{padding-left:15px; list-style:none;}
</style>
<title>my</title></head>
<body>
<?php $date = date("Y-m-d H:i:s");
echo "<p ><strong style='color:green'> $date</strong> (Time should only change on refresh!)</p>";
?>
خب در این صفحه ما ارجاعی به اسکریپت های pjax و jquery داریم،دقت داشته باشید که pjax فقط بروی لینک هایی که خصیصه data-pjax='main' را دارا هستند اعمال میشود و بابقیه لینک ها به صورت عادی برخورد میشود.
و دو فانکشن هم داریم که در رویداد شروع عملیات Pjax و به پایان رسیدن این عملیات یک کلاس CSS رو به آن اختصاص میدهد، و تایم فعلی سرور را نمایش میدهد،برای این تایم رو نمایش دادیم که اولین باری که صفحه نمایش داده میشود تایم از سرور گرفته میشود و درخواست های بعدی که به صورت Pjax هستن تایم بروز رسانی نمیشه،و فقط درخواست های Pjax مدیریت میشود.
فایل بعدی هم که در انتهای صفحه ضمیمه میشود با نام footer.php
</body></html>
حالا میریم برای طراحی صفحه اصلی سایت index.php
<?php if($_SERVER["HTTP_X_PJAX"] != ""){
?>
<h1>PJAX using PHP</h1>
<ul class='header'>
<li><a href='trex.php' data-pjax='main'>Tyrannosaurus</a></li>
<li><a href='kong.php' data-pjax='main' >King Kong</a></li>
</ul>
<?php
}
else{
include("header.php");
?>
<div id="main">
<h1>PJAX using PHP</h1>
<ul class='header'>
<li><a href='trex.php' data-pjax='main'>Tyrannosaurus</a></li>
<li><a href='kong.php' data-pjax='main' >King Kong</a></li>
</ul>
</div>
<?php
include("footer.php");
} ?>
نکته در اینجا هست که درخواست هایی از نوع Pjax با یک هدر مخصوص به نام HTTP_X_PJAX ارسال میشوند که میتوان با برسی مقدار آن از اینکه درخواست از چه نوعی هست آگاه شوید،اگر از نوع Pjax بود فقط قسمت مورد نظر را نمایش میدهید و اگر چنین هدری وجود نداشت مثل قبل صفحه به صورت کامل بارگزاری میشود.
در این صفحه دو لینک داریم که با همین روش میخویم آنها رو نمایش بدیم، محتوای صفحات به شکل زیر هستند:
صفحه kong.php :
<?php
$title = 'King Kong';
$body = "<ul class='header'><li><a href='index.php' data-pjax='main'>back</a></li></ul><h2>$title</h2><img src='images/Kong1.jpg' /><title>{$title}</title>";
if($_SERVER["HTTP_X_PJAX"]):
echo $body;
else:
include("header.php");
echo '<div id="main">'.$body.'</div>';
include("footer.php");
endif;
echo "<pre>";
echo "Page loaded with PJAX: ".$_SERVER["HTTP_X_PJAX"];
echo "</pre>";
?>
محتوای صفحه trex.php :
<?php
$title = 'Tyrannosaurus';
$body = "<ul class='header'><li><a href='index.php' data-pjax='main'>back</a></li></ul><h2>$title</h2><img src='images/Trex.jpg' /><title>{$title}</title>";
if($_SERVER["HTTP_X_PJAX"]):
echo $body;
else:
include("header.php");
echo '<div id="main">'.$body.'</div>';
include("footer.php");
endif;
echo "<pre>";
echo "Page loaded with PJAX: ".$_SERVER["HTTP_X_PJAX"];
echo "</pre>";
?>
خب کار به اتمام رسید، حالا صفحه index.php رو اجرا کنید و روی هر کدوم از لینک ها کلیک کنید،میبینید که بدون اینکه صفحه رفرش شود و تایمی که در صفحه اصلی نمایش داده شده تغییر کند،صفحات بروز رسانی شده و آدرس URL آن هم بروز رسانی شده در نوار آدرس.
از پروژه خودتو لذت ببرید.
119478119479
یه راه کار خوب که سایت هایی مثل فیس بوک و تویتر از اون استفاده می کنند استفاده از Ajax و تغییر آدرس صفحه هست،که هم صفحه رفرش نمیشه و هم تایتل صفحه و محتوای آن بروز رسانی میشود.
افزونه‌ای به نام Pjax طراحی شده‌است که کار آن دریافت محتوای HTML ایی از سرور و قرار دادن آن در یک جایگاه خاص مانند یک div است. در پشت صحنه‌ی آن از jQuery ajax استفاده شده، به همراه push state
pjax = pushState + AJAX
خب حالا درقالب یک پروژه دنبال میکنیم:
یک فایل به نام header.php داریم:
<html>
<head>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/jquery.pjax.js"></script>
<script type="text/javascript">
var direction = "right";
$(document).ready(function(){
$(document).pjax('a', '#main')
$(document).on('pjax:start', function() {
$(this).addClass('loading')
})
$(document).on('pjax:end', function() {
$(this).removeClass('loading')
})
});
</script>
<style>
#main {
font-family:Helvetica,Arial,sans-serif;
width:30%;
opacity: 1;
transition: opacity 0.20s linear;
}
#main.loading {
opacity: 0.5;
}
h2 {margin-left:200px;}
ul{padding-left:15px; list-style:none;}
</style>
<title>my</title></head>
<body>
<?php $date = date("Y-m-d H:i:s");
echo "<p ><strong style='color:green'> $date</strong> (Time should only change on refresh!)</p>";
?>
خب در این صفحه ما ارجاعی به اسکریپت های pjax و jquery داریم،دقت داشته باشید که pjax فقط بروی لینک هایی که خصیصه data-pjax='main' را دارا هستند اعمال میشود و بابقیه لینک ها به صورت عادی برخورد میشود.
و دو فانکشن هم داریم که در رویداد شروع عملیات Pjax و به پایان رسیدن این عملیات یک کلاس CSS رو به آن اختصاص میدهد، و تایم فعلی سرور را نمایش میدهد،برای این تایم رو نمایش دادیم که اولین باری که صفحه نمایش داده میشود تایم از سرور گرفته میشود و درخواست های بعدی که به صورت Pjax هستن تایم بروز رسانی نمیشه،و فقط درخواست های Pjax مدیریت میشود.
فایل بعدی هم که در انتهای صفحه ضمیمه میشود با نام footer.php
</body></html>
حالا میریم برای طراحی صفحه اصلی سایت index.php
<?php if($_SERVER["HTTP_X_PJAX"] != ""){
?>
<h1>PJAX using PHP</h1>
<ul class='header'>
<li><a href='trex.php' data-pjax='main'>Tyrannosaurus</a></li>
<li><a href='kong.php' data-pjax='main' >King Kong</a></li>
</ul>
<?php
}
else{
include("header.php");
?>
<div id="main">
<h1>PJAX using PHP</h1>
<ul class='header'>
<li><a href='trex.php' data-pjax='main'>Tyrannosaurus</a></li>
<li><a href='kong.php' data-pjax='main' >King Kong</a></li>
</ul>
</div>
<?php
include("footer.php");
} ?>
نکته در اینجا هست که درخواست هایی از نوع Pjax با یک هدر مخصوص به نام HTTP_X_PJAX ارسال میشوند که میتوان با برسی مقدار آن از اینکه درخواست از چه نوعی هست آگاه شوید،اگر از نوع Pjax بود فقط قسمت مورد نظر را نمایش میدهید و اگر چنین هدری وجود نداشت مثل قبل صفحه به صورت کامل بارگزاری میشود.
در این صفحه دو لینک داریم که با همین روش میخویم آنها رو نمایش بدیم، محتوای صفحات به شکل زیر هستند:
صفحه kong.php :
<?php
$title = 'King Kong';
$body = "<ul class='header'><li><a href='index.php' data-pjax='main'>back</a></li></ul><h2>$title</h2><img src='images/Kong1.jpg' /><title>{$title}</title>";
if($_SERVER["HTTP_X_PJAX"]):
echo $body;
else:
include("header.php");
echo '<div id="main">'.$body.'</div>';
include("footer.php");
endif;
echo "<pre>";
echo "Page loaded with PJAX: ".$_SERVER["HTTP_X_PJAX"];
echo "</pre>";
?>
محتوای صفحه trex.php :
<?php
$title = 'Tyrannosaurus';
$body = "<ul class='header'><li><a href='index.php' data-pjax='main'>back</a></li></ul><h2>$title</h2><img src='images/Trex.jpg' /><title>{$title}</title>";
if($_SERVER["HTTP_X_PJAX"]):
echo $body;
else:
include("header.php");
echo '<div id="main">'.$body.'</div>';
include("footer.php");
endif;
echo "<pre>";
echo "Page loaded with PJAX: ".$_SERVER["HTTP_X_PJAX"];
echo "</pre>";
?>
خب کار به اتمام رسید، حالا صفحه index.php رو اجرا کنید و روی هر کدوم از لینک ها کلیک کنید،میبینید که بدون اینکه صفحه رفرش شود و تایمی که در صفحه اصلی نمایش داده شده تغییر کند،صفحات بروز رسانی شده و آدرس URL آن هم بروز رسانی شده در نوار آدرس.
از پروژه خودتو لذت ببرید.
119478119479