مبتدی: تابع history.pushState [بایگانی]

darkcms

دوشنبه 28 مرداد 1392, 10:36 صبح

با سلام.
می خواستم بدانم تابع history.pushState به چه شکل مقادیر را به یک فایل php ارسال می کند؟
در واقع می خواهم بدانم چگونه می شود از این تابع به جای Aajx استفاده کرد؟
با تشکر از پاسخگو

Javidhb

دوشنبه 28 مرداد 1392, 11:35 صبح

سلام،
الان که اسمتون رو دیدم، یادم افتاد قبلا تو یه تاپیک دیگه این سوال رو ازم پرسید بودید! (کلا یادم رفت جواب بدم .... شرمنده)

این یه آموزش کامل و خلاصه که با دمو همه چیز رو نشون میده. (http://net.tutsplus.com/tutorials/html-css-techniques/a-first-look-at-the-history-api/)

خلاصه: برای عوض کردن url بدون رفرش کردنه.
میشه مثل ajax استفاده کرد و خوبیش اینه که موتورهای جستجو بر خلاف ajax میتونن صفحات رو ایندکس کنن. باید توی url پارامترهای مورد نظرتون رو سمت سرور بفرستید و از طریق GET بگیریدشون.
ولی قدرت و انعطاف ajax رو نداره.

احتیاط:فقط برای HTML5

آموزش بالا رو با مثال هاش ببینید همه چیز دستگیرتون میشه....

بازم ببخشید

jalil_gh

دوشنبه 28 مرداد 1392, 11:39 صبح

history.pushState کارش یه چیز دیگه است و ازش نمیشه به جای ajax استفاده کرد. این متد قسمتی از html5 history api هست که برای مدیریت url صفحه به کار میره. با این متد میشه url صفحه رو تغییر داد بدون اینکه صفحه رفرش بشه و امکان استفاده از دکمه back مرورگرها رو فراهم میاره.
با ترکیب این متد و رویدادهاش با ajax میتونید صفحاتی رو طراحی کنید که بدون رفرش شدن صفحه کار کنن و بتونید خیلی راحت با دکمه back مرورگر عقب و جلو برید.
اینجا (http://diveintohtml5.info/history.html) توضیحات و مثال خوبی در این مورد داده.

darkcms

دوشنبه 28 مرداد 1392, 23:28 عصر

با سلام.
از شما دوستان ، برای پاسخ خوب و مناسبتان متشکرم.
اما یک سوال :متفکر:
من فقط می خواهم بدانم ورودی های اول و دوم این تابع چی هستند؟
مثلا در این کد:
history.pushState(null, "A new title!", "url")
ورودی اول و دوم برای چی به کار برده می شوند؟
با تشکر!

jalil_gh

سه شنبه 29 مرداد 1392, 09:23 صبح

ورودی دوم برای تغییر title صفحه به کار میره. البته بیشتر مروگرا اهمیتی بهش نمیدن برا همین نمیشه بهش دل بست.

history مروگر مثل یک پشته میمونه که اطلاعات از بالا بهش وارد میشن و از بالا هم خارج میشن. شما هر وقت متد history.pushState رو اجرا میکنید یه ورودی به این پشته اضافه میشه و در بالای پشته قرار میگیره. حالا هر وقت دکمه back مروگر رو بزنید آخرین ورودی از این پشته خارج میشه و رویداد popstate فراخوانی میشه. شما برای ارسال اطلاعات به رویداد popstate از آرگومان اول متد history.pushState استفاده میکنید.

برای اینکه بهتر متوجه بشید اول این صفحه رو تو یه مرورگر باز کنید. (از روی سرور اجرا کنید).

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<script>

window.addEventListener('popstate', function(e) {
console.log(e.state);
});

history.pushState({num: 1}, null, null);
history.pushState({num: 2}, null, null);
history.pushState({num: 3}, null, null);
history.pushState({num: 4}, null, null);
history.pushState({num: 5}, null, null);

</script>

</body>
</html>
حالا با دکمه‌های back و forward مروگر کار کنید و به کنسول مروگر دقت کنید.

darkcms

سه شنبه 29 مرداد 1392, 16:39 عصر

ورودی دوم برای تغییر title صفحه به کار میره. البته بیشتر مروگرا اهمیتی بهش نمیدن برا همین نمیشه بهش دل بست.

history مروگر مثل یک پشته میمونه که اطلاعات از بالا بهش وارد میشن و از بالا هم خارج میشن. شما هر وقت متد history.pushState رو اجرا میکنید یه ورودی به این پشته اضافه میشه و در بالای پشته قرار میگیره. حالا هر وقت دکمه back مروگر رو بزنید آخرین ورودی از این پشته خارج میشه و رویداد popstate فراخوانی میشه. شما برای ارسال اطلاعات به رویداد popstate از آرگومان اول متد history.pushState استفاده میکنید.

برای اینکه بهتر متوجه بشید اول این صفحه رو تو یه مرورگر باز کنید. (از روی سرور اجرا کنید).

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<script>

window.addEventListener('popstate', function(e) {
console.log(e.state);
});

history.pushState({num: 1}, null, null);
history.pushState({num: 2}, null, null);
history.pushState({num: 3}, null, null);
history.pushState({num: 4}, null, null);
history.pushState({num: 5}, null, null);

</script>

</body>
</html>
حالا با دکمه‌های back و forward مروگر کار کنید و به کنسول مروگر دقت کنید.
با سلام.
همیشه ورودی اول باید یک شی باشه؟
نمیشه یک تابع باشه؟
با تشکر

jalil_gh

سه شنبه 29 مرداد 1392, 17:28 عصر

گفتن باید یه شی با فرمت json باشه. شما چرا میخایین تابع بفرستین؟