Ajaxizace webu

• Definice: Provedení většiny operací na stránce pomocí AJAXu.
  • Návštěva odkazů
  • Odeslání formulářů
• Motivace: Rychlost
  • Běžný web
    
  • Ajaxizovaný web
    
  „Profesionála zdržují i milisekundy.“ (Radek Hulán)

Možnosti provedení

• Ignorovat stav aplikace
• Stav aplikace ukládat za mřížku (hashbang)
  • http://twitter.com/#!/webexpo
  • Nelze se odkázat na část stránky
  • Bez AJAXu vypadá URL jinak
  • První přístup znamená dva požadavky na server
  • Google umí indexovat, ale krkolomně
• Stav ukládat do normálního URL
  • https://github.com/vrana/notorm/
  • Umožňuje history.pushState (Firefox 4, Chrome, Opera 11.5, IE 10)
  • Staré prohlížeče a vyhledávače fungují transparentně po staru

Implementace

• Serverová část

  <?php
  header("Vary: X-Requested-With");
  if ($_SERVER["HTTP_X_REQUESTED_WITH"] != "XMLHttpRequest") {
  	// tady bude společná hlavička opakující se na všech stránkách
  	echo "<div id='content'>\n";
  	register_shutdown_function(function () {
  		echo "</div>\n";
  		// tady bude společná patička
  	});
  }
  ?>
  

• Klientská část

  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
  // zjednodušeno
  if (history.pushState) {
  	$('a[href]').live('click', function () {
  		var href = $(this).attr('href');
  		$('#content').load(href);
  		history.pushState('', '', href);
  		return false;
  	});
  
  	onpopstate = function (event) {
  		$('#content').load(location.href);
  	}
  }
  </script>
  

Demo

• Běžný web
• Ajaxizované odkazy

Na co si dát pozor

• Ignorovat externí URL a odkazy na část stránky

  !/:|^#/.test(href)

• Ignorovat jiná tlačítka myši a modifikátory klávesnice

  event.button || event.ctrlKey || event.shiftKey || event.altKey || event.metaKey

• Posunout stránku na začátek nahraného obsahu

  scrollTo(0, 0)

• Pamatovat si pozici stránky při procházení historie

  pageYOffset

• Google Chrome volá onpopstate i při prvním stažení

  active = true

• Balení do JSONu je zbytečné – nedá se zobrazovat průběžně

  xhr.readyState == 3

• Posílat titulek stránky

  X-AJAX-Title

  <title>

• Indikátor činnosti

  loader.toggle()

• Indikátor činnosti při přepnutí na jinou záložku

  $(window).blur(function () {
  	favicon.attr('href', 'loader.gif').replaceWith(favicon)
  });

• Zrušení zastaralých požadavků

  xhr.abort()

• Zrušení požadavků uživatelem

  $('body').keydown(function (event) {
  	if (event.keyCode == 27 // Esc
  		&& !(event.ctrlKey || event.shiftKey || event.altKey || event.metaKey)
  	) {
  		xhr.abort();
  	}
  });

• Nedostupnost serveru

  status == 'success'

• Pohyb v historii nahrává data ze serveru znovu

  history.pushState({ cache: html }, title, url)

Když to někde nechci

$('.no-ajaxify').live('click', function () {
	location.href = this.href;
	return false;
});

Nejen odkazy

• Odesílat lze i formuláře

  $[form.method](form.action, $(form).serialize())

• POST lze ukládat do stavu

  history.pushState({ post: data }, title, url)

• Neodesílat soubory

  !$('input:file[value]').length

• Přesměrování lze dělat vlastní HTTP hlavičkou

  X-AJAX-Redirect

• Ajaxizované formuláře

Závěr

• Výhody
  • Trochu rychlejší
  • Pro uživatele transparentní
• Nevýhody
  • Reimplementace chování prohlížeče
  • Pouhé změny stavu na stejném URL si nevšimne Selenium
• Srovnání
  • Ve všem lepší než hashbang
• pjax
  • Pouze odkazy
  • Vlastní indikátor činnosti (pomocí událostí)
  • Špatná obsluha klávesnice
  • Nepracuje s pozicí stránky
  • Ošetřuje jen timeout, jiné chyby ne
  • Nezobrazuje data průběžně
  • Nerozpozná zrušení požadavku uživatelem
• $(context).ajaxify('#target')
  • Vlastní indikátor činnosti
  • Nezobrazuje data průběžně
  • Nerozpozná zrušení požadavku uživatelem