تنقل بين الصفحات بدون تحديث الصفحة ؟ افيدوني :)

32 مشاهدة ولا رد ؟  :(

عند تصميم موقعك صممه على بدون جافاسكربت حتى يعمل على المصفحات التي تعطل جافاسكربت أو لاتدعم بعض خصائصها.

تغير محتويات الصفحة لايحتاج الا لـajax، كأن تجلب محتويات الصفحة في رد json. تغير الرابط دون إعادة تحميل الصفحة عن طريق خاصية history في html5 (انظر لدعم المصفحات لها)، هذا مثال سريع:

<?php

/* مجموعة مقالات */
$index = 0;
$posts = array(
  array("title" => "عنوان المقال الأول", "content" => "المقال الأول"),
  array("title" => "عنوان المقال الثاني", "content" => " المقال الثاني"),
  array("title" => "عنوان المقال الثالث", "content" => "المقال الثالث"),
);

/* نتأكّد من أن رقم الموضوع في المصفوفة */
if( isset($_GET["post"]) ) {
  if( array_key_exists($_GET["post"] - 1, $posts) ) {
    $index = $_GET["post"] - 1;
  }

  /* إذا كان الطلب جيسون، نرد بملف جيسون ونخرج */
  if( isset($_GET["json"]) && $_GET["json"] == "true" ) {
   header("Content-type: application/json");
   echo json_encode($posts[$index]);
   exit(0);
  }
}

?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="utf-8">
  <title><?= htmlspecialchars($posts[0]["title"]); ?></title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script>
  /* سترسل الدالة طلب جيسون للصفحة وتعدل محتوى الصفحة  */
  function update_url_and_content(url) {
    $.getJSON(url + "&json=true", function(data) {
      /* هنا، نعّدل الرابط،  */
      history.pushState(null, data.title, url);
      $("title").html(data.title);
      $("#post h3").html(data.title);
      $("#post p").html(data.content);
    });
  };
  </script>
</head>
<body>
  <noscript>يرجى تفعيل جافا سكربت في متصفحك</noscript>
  <div id="post">
    <h3><?php echo htmlspecialchars($posts[$index]["title"]); ?></h3>
    <p><?php echo htmlspecialchars($posts[$index]["content"]); ?></p>
    <code></code>
    <div>
      <a href="?post=1">1</a> |
      <a href="?post=2">2</a> |
      <a href="?post=3">3</a>
    </div>
  </div>
  <script>
    /* هنا ننتظر أن يضغط المستخدم على أحد الروابط */
    /* وضعت كود جافا سكربت هذا هنا حتى ينفذ مباشرة بعد تحميل وسم المقال */
    $("#post div a").click(function(event) {
      if("history" in window) { /* نتأكّد من أن المتصفح يدعم خاصية history */
        event.preventDefault();
        update_url_and_content(this.href);
      }
    });
  </script>
</body>
</html>

سيبدو أن الصفحة يعاد تحميها، الا أنه لايتم تحميل سوى عنوان المثال والمحتوى فقط وباقي الصفحة كما هو، يمكنك فتح web console في فايرفوكس (tools > web developer > web console) اضغط على net وراقب الإتصالات.