Скрипт загрузки контента с помощью Ajax, JavaScript (location.hash) и PHP. В чем его минусы?

Question

[Магжан Биргебайулы]

JavaScript:

$(window).on('hashchange', function(){
	var u = location.hash.replace('#/','');
	if( u == '' ) return false;
	
	$.ajax({
		url: '/?src='+u, dataType: 'html', async: false,
		success: function(html){ $('#content').html(html); }
	});
});

И сам index.php файл:

if( empty($_GET['src']) ){ include 'template.php'; exit; }

$src = $_GET['src'];
while( $src[0] == '/' ) $src = substr( $src, 1, strlen($src) );
while( substr( $src, strlen($src)-1, 1 ) == '/' ) $src = substr( $src, 0, strlen($src)-1 );
$src = explode('/', $src);

$f = 'pages/'.$src[0].'.php';
if( is_file($f) ){ include $f; exit; }		// file
include 'pages/404.php'; exit;			// 404 not found

Answer 1

[Дмитрий Королёв]

Самый главный минус заключается в том, что с отключенным JS контент не увидеть никак.
Остальные проблемы, в общем-то, типичны для подобных решений (в частности - hashbang): отсутствие семантики, проблемы с расшариванием в соцсетях, проблемы с индексированием и так далее.
По сути, нужно решить две вещи: первая - при переходе по ссылке сразу отдавать нужный контент, без всяких аяксов. Вторая - строить нормальные урлы, без всяких левых хешей и прочих хаков. Для этого существует History API, которое, в принципе, уже неплохо поддерживается (caniuse.com/history).

Comments

[Магжан Биргебайулы]

Основная задача - частичная загрузка страниц как в ВК. Какие ещё варианты есть? Так как /#feat=input-file-accept не красиво смотрится...

[Дмитрий Королёв]

Магжан Биргебайулы: повторюсь, History API. По-человечески это делается так: сервер по заданному урлу сразу выдает нормально сгенерированную страницу. При переходе на другие страницы проверяется, поддерживает ли браузер history API, если нет - пусть просто переходит без всяких аяксов. Если поддерживает (а в 90% случаев поддерживает) - делаем preventDefault, определяем, на какую страницу должен был быть сделан переход, подгружаем нужные данные аяксом (хоть так же, как вы в вопросе написали, почти ничего менять не придётся) и, в качестве финального аккорда, history.pushState c новым урлом. Всё.

[Дмитрий Королёв]

Собственно, в ВК это всё примерно так и работает, насколько можно судить.