Weboldal "AJAX"-osítása egyszerűen

Tegyük fel, hogy van egy nagyszerű, működő oldalunk, de szeretnénk egyszerűen, minimális energia befektetéssel AJAX képessé tenni. Ez alatt azt értem, hogy a tartalmak az oldal újratöltése nélkül töltődnek be. Ehhez semmit nem kell módosítani az oldalon, csak egy kevés JavaScript hozzáadása szükséges.

Először is szükségünk van egy viszonylag új jQuery-re, igazából 1.3-tól kezdve akármi megteszi. Ez végzi az AJAX műveleteke, valamint a linkekre kattintások kezelését. Ez most live segítségével történik, mivel az oldal tartalma dinamikusan változik. Így az oldalra később bekerülő linkekre kattintva is lefut az eseménykezelőnk, arról nem is beszélve, hogy valamivel gyorsabb lesz az események kezelése.

Ezen kívül Ben Alman által írt kiegészítők kellenek. Az egyik ilyen a jQuery urlInternal. Ezzel a URI-kről meg tudjuk állapítani, hogy belső linkek-e, vagy nem. Mivel az AJAX kérések csak az azonos domainen működnek, ezért mindenképpen csak belső linkekre támaszkodhatunk ez ügyben, a külső linkek úgy működnek majd, mint eddig.

A másik kiegészítő, amire szükséges van, az az jQuery hashchange event. Ez egy új eseménykezelővel egészíti ki a jQuery így is népes kelléktárát. Akkor vált ki új eseményt, amikor az oldalon URL-ének hash (vagy más néven fragment) része változik. Ez az URL-ekben a # és az utána szereplő rész. Ezt arra használjuk, hogy a felhasználó használni tudja az Vissza / Előre gombjait a böngészőnek, valamint, ha a felhasználó megosztja az aktuális URL-t akkor is a megfelelő tartalomra tudunk ugrani. Az egész megvalósítása nagyon egyszerű, körülbelül 20-30 sor.

A működés röviden a következő: A DOM rendelkezésre állása után a linkekre rakunk egy eseményt, amire kattintva megváltoztatjuk az oldal hash-ét: a link href -jének relatív részére. Ekkor kiváltódik egy hashchange esemény, amikor is jQuery load segítségével betöltjük az céloldalt, de annak csak egy meghatározott részét szúrjuk be a tartalomba.

// DOM ready esetén indulunk.
jQuery(function ($) {
  var reInternal = $.urlInternalRegExp(),
      id = '#main', // Ebbe az elembe szúrjuk be a betöltött oldal azonos nevű elemének tartalmát.
      title = $('title').text();

  // Bármilyen linkre kattintunk, lekezeljük
  $('a').live('click', function (event) {
    var link = $(this),
        href = link.attr('href'),
        match, uri;

    // Ha a link belső URL, akkor ahelyett hogy odaugranánk,
    // csak megváltoztatjuk a hash-t.
    if ($.isUrlInternal(href)) {
      // Megnézzük hogy abszolút URI-nek van-e álcázva,
      // ha igen, akkor leszedjük róla az abszolút részt.
      match = href.match(reInternal);
      uri = (match && href.substring(match[0].length - 1)) || href;

      // Megváltoztatjuk a hash-t az URI-re
      window.location.hash = '!' + uri.replace(/#.*/, '');
      // Megakadályozzuk az eseményt.
      event.preventDefault();
    }
  });

  // Kezeljük a megváltozott hash eseményt, és kiváltjuk is, hátha már van hash.
  $(window).hashchange(function () {
    var hash = window.location.hash,
        match = hash && hash.match(/^#?!(\/.*)/);

   // Ha megfelelő formátumú a hash, akkor betöltjük a tartalmat a content részbe.
   if (match) {
      // A #main gyermekeire van szükségünk.
      $(id).load(match[1] + ' ' + id + '>*', function () {
        // Betöltődött a tartalom, megnézzük van-e cím, és frissítjük az oldal címét
        var h1 = $('h1');
        document.title = (h1.length ? h1.text() + ' - ' : '') + title;
      });
    }
  }).hashchange();
});

A működés megtekinthető a tesztoldalon.