ugrás a tartalomhoz

AJAX-os oldal - URL + Ha nincs JS

KMartinR4 · 2013. Jan. 29. (K), 20.37
Sziasztok!

Számomra az AJAX elég idegen, eddig nem igazán volt rá szükségem. Most azonban úgy gondoltam, nem ártana használnom.
Szeretném ezt jQuery-ben lehetőleg megoldani, mert akkor a különböző böngészőkkel kevesebbet kell foglalkozni, meg egyszerűbb is.

Rögtön 2 dolog érdekelne:
1) változó URL-ek
2) keresőoptimalizálás, és JS-t nem használó userek

1)
Az URL-ekhez, mint az AJAX-hoz, javascriptben nem értek, nem tudom, hogy lehet JS-sel megváltoztatni az URL-t. Erről szeretnék linkeket, tutorialokat [lehetőleg magyar] kérni.
htacces-hez alapszinten értek, így a szép URL-lel alapból nincsen baj (bár néhány speciális jelöléshez szintén alig értek), de ez még egyelőre ráér.
Ugyanakkor ebben is szívesen fogadok tanácsot.

2)
A másik része a keresőoptimalizálás, meg az olyan userek, akik nem használnak JS-t.
Itt már több támpontom van, azonban nem vagyok benne biztos, hogy amit elképzeltem, valóban megvalósítható-e:

Arra gondoltam, hogy mivel amolyan CMS-rendszerhez tervezem az egészet, egy sablonba lenne legenerálva minden.

Tehát legenerálná a menüt úgy, hogy aki nem használ JS-t, az is tudjon navigálni az oldalon, így a robotok is.
De a head-be legenerálna egy javascriptet, ami a a JS-t használóknak átalakítaná a hivatkozást (oldal ==> javascript:linkAJAX('oldal')), és egy alap jQuery AJAX kódot, hogy így is lehessen váltogatni az weblap oldalai között..
______
Ebben kérném a segítségeteket, köszi!
‹ Google Chrome Frame mennyire felhasználóbarát? wrapperből kilépés ›
 ■
1

Nagy fába vágtad a fejszédet.

Hidvégi Gábor · 2013. Jan. 29. (K), 20.54
Nagy fába vágtad a fejszédet. Mit akarsz tulajdonképpen az AJAX-osítással elérni? A kérdések, amiket feltettél, igazából az utolsóak közül valóak az összes közül, amik felmerülhetnek.
5

Az oldalt, mármint a készülő

KMartinR4 · 2013. Jan. 29. (K), 21.15
Az oldalt, mármint a készülő rendszerem több funkcióval szeretném bővíteni (pl. chat, hirdetések, galéria), amiket szeretnék AJAX-szal megvalósítani.
És akkor úgy gondoltam, hogy ha a hirdetéseket stb. jQuery AJAX-szal meg tudom oldani, akkor megpróbálkozom magának az oldalnak az AJAX-osításával.

Az adatforgalom csökkentése, illetve a weblap gyorsítása lenne a célom. Mivel, mint mondtam, több funkció, az pedig több adat. És a jQuery AJAX meg elég gyors. Haverom csinált az oldalára egy teszt AJAX-chatet, ami elég jól és gyorsan működött.
Azonban, ha mégsem válik be, az nem olyan nagy gond. Elsősorban kényelmi szempontból gondoltam.

De mint írtam, nem nagyon értek az AJAX-hoz, ezért sem tudom, mik a fent említetteken kívül fontos tényezők, amikre figyelni kell.
6

Ahogy szabo.b.gabor is írja a

Hidvégi Gábor · 2013. Jan. 29. (K), 21.27
Ahogy szabo.b.gabor is írja a 3-as kommentben, nagyon gondold át, hogy tényleg ezt szeretnéd-e, mert rengeteg problémát felvet egy teljes AJAX-osítás, ami egy normál oldalnál nem jön elő. Ezek egyik csoportja a használhatósági dolgok, például, ha egy hosszú szöveg végén egy linkre kattintasz, akkor ugorjon az oldal tetejére, lassú kapcsolat kezelése és így tovább. A másik csoport a megjelenített információk számontartása - például az egyik oldalcsoportnak ez van a bal hasábjában, a másiknak más, a harmadiknak ugyanaz, mint az elsőnek, az oldalak különböző építőkövekből állnak.

Szerintem előbb mindenképp érdemes megcsinálni hagyományos módon, hogy minden működjön, az AJAX pedig legyen addícionális. Így nem kell optimalizálással foglalkoznod, mert a keresők látni fognak mindent.

Ha csökkenteni szeretnéd a forgalmat, használd okosan a http fejléceket (Expires, Etag és társaik) és tömörítsd a tartalmat, ezzel a két eszközzel csodát lehet művelni, AJAX-szerűen gyors lesz az oldalad.
2

History API Használhatsz

Poetro · 2013. Jan. 29. (K), 21.02
  1. History API Használhatsz hozzá keretrendszert, és akkor nem fog problémát jelenteni, ha a böngésző nem támogatja.
  2. A linkeket nem kell átalakítani, legyenek azok hagyományos linkek. Viszont eseménykezelőt kell rájuk rakni, ami az oldal betöltődését végzi.

Pár éve csináltam egy kis jQuery kódot, ahol demonstrálom, hogy lehet megcsinálni az oldal "AJAX-osítását", ugyanakkor ez még nem használ History API-t.
3

nem kell erőltetni..

szabo.b.gabor · 2013. Jan. 29. (K), 21.10
gondold át, hogy érdemes-e ebbe energiát fektetni, tényleg megéri-e, jobb lesz tőle a felhasználói élmény?

pl ha van egy képlistázó oldalad, és annak az alján van egy 'további képek' hivatkozás, akkor teljesen jó, ha ajax-szal kéred le a többi képet és betöltöd a meglévők alá.

de ha ajax-szal töltögeted be az egyes tartalmakat és nem figyelsz rá, hogy mondjuk a vissza gomb is működjön, vagy lehessen új ablakban megnyitni hivatkozást, akkor bizony csorbul a felhasználói élmény.

szerintem egy cms rendszerbe 'top level' nem szükséges ajax-szal varázsolni, de ha mégis elvárás akkor valahogy így csinálnám meg.

a hivatkozásokhoz semmiképp sem nyúlnék.

maradna minden
<a href="/cikk/25/jani-jo-arc.html">Jani jó arc</a>
formában.

az egész alapja kb ennyi lenne.
$(function(){
	/* ha barmely hivatkozasra klikkolnak */
	$('body').on('click','a',function(e){
		var $a=$(this),url=$a.attr('href');
		/* ne tortenjen meg a klikkolas */
		e.preventDefault();
		
		/* hanem csinaljunk egy ajax kerest */
		$.ajax({
			url:url,
			type:'GET',
			dataType:'html',
			/* es a valaszt tegyuk be a helyere */
			success:function(result){
				$('#content').html(result);
				/* valamint az url-ben a # utani reszt allitsuk be a betoltott oldalra */
				window.location.hash = url;
			}
		});
	});
});
itt még figyelni kell arra, hogy mivan ha épp http://valami.hu/cikk/13/elek-jo-arc.html oldalra érkezünk, ilyenkor mindenképp http://valami.hu/#/cikk/25/jani-jo-arc.html oldalra kerüljünk (egy sima kérés a kezdőlapra, valamint egy ajax kérés a tartalomhoz, miután megérkeztünk a kezdőlapra).

valamint kezelni kell azt is, ha változik a hash a location-ben, nézni kell, hogy betöltéskor van-e valami a hash-ben.

ilyenek asszem, de javítsatok ki.
4

no tessék.. szóval használj

szabo.b.gabor · 2013. Jan. 29. (K), 21.12
no tessék..

szóval használj history apit :D