Как оптимизировать AJAX фоновую перезагрузку контента на странице?

Question

[PageUp]

Есть такой код, в принципе он работает. Ссылки перезагружают страницу в памяти выводя новый контент без полной перезагрузки с новыми GET параметрами, что передаются в ссылке.
Но в консоли все загажено запросами повторяющимися, как будто одно и то же действие вызывается множество раз.
Так же после определенного количества открытия ссылок начинается какая-то аномалия, страница в браузере скачет туда/сюда очень долго. Как будто нажимаются стрелки назад/вперед.
Иногда, обновив страницу через F5 (полностью), обновляет не текущую страницу, а оказываешься на одной из предыдущих страниц, на которой был ранее.
Некоторые действия делаются по несколько раз. Как будто на обнове стоит последнее событие.
В чем может быть проблема?

$(document).on("click", "a", function() {

      $.ajax({
        'url': $(this).attr('href'),
        success: function(responce) {
          $("#content").html(responce);

          $('#content').show(responce);

        }
      });

      event.preventDefault();
      return false; //что бы не выполнять переход дефолтный
    });

Страница Index которая изменяется в зависимости от входящих в нее GET и POST запросов написана на PHP и имеет места с переадресациями header() и подгрузку разных файлов по типу fuctions.php
Как оптимизировать JS что бы все работало исправно?

Comments

[ThunderCat]

1) $('#content').show(responce);это что? емнип show() принимает немного другие аргументы.
2)

Иногда, обновив страницу через F5 (полностью), обновляет не текущую страницу, а оказываешься на одной из предыдущих страниц, на которой был ранее.

Я уже писал, нужно использовать History.pushState().
3)

Некоторые действия делаются по несколько раз. Как будто на обнове стоит последнее событие.

Нормальной работы вы так не добьетесь, у вас все равно будет фигня, так как это так себе решение, и все равно местами будут глюки и лажа, не годится код из 3 строк на полноценную замену SPA. Учите vue/react, на жквери такие вещи не делаются. По крайней мере адекватно точно не получится.
4)

event.preventDefault();

у вас не работает, так как евент вы взяли из воздуха. И ставить эту конструкцию надо в начале функции.

[PageUp]

ThunderCat, вот так?

$(document).on("click", "a", function(evt) {
				evt.preventDefault();

				$.ajax({
					'url': $(this).attr('href'),
					cache: false,
					success: function(responce) {
						$("#content").html(responce);
					}
				});
				return false; //что бы не выполнять переход дефолтный
			});

Или так?

$(document).on("click", "a", function(evt) {

				$.ajax({
					'url': $(this).attr('href'),
					cache: false,
					success: function(responce) {
						evt.preventDefault();
						$("#content").html(responce);
					}
				});
				return false; //что бы не выполнять переход дефолтный
			});

А куда пихать History.pushState(). я так и не понял

[PageUp]

ThunderCat, Написал такое вот

$(document).on("click", "a", function() {

				var redirect_url = $(this).attr('href');
				$.ajax({
					'url': $(this).attr('href'),
					cache: false,
					data: {
						ajax: true
					},
					dataType: "json",
					success: function(json) {
						if (json.redirect) {
							if (json.load_html) {
								// If the History API is available  
								if (!(typeof history.pushState === 'undefined')) {
									history.pushState({
											url: redirect_url,
											title: document.title
										},
										document.title, // Can also use json.title to set previous page title on server
										redirect_url
									);
								}
								document.open();
								document.write(json.html);
								document.close();
							} else {
								window.location = redirect_url;
							}
						} else {
							$('#content').html(json.message);
						}
					},
				});
				return false; //что бы не выполнять переход дефолтный
			});

Приходит в консоль верная ссылка, ответ 200, ошибок так же не наблюдается. Но почему-то страница сама не обновляется в браузере. Контент не меняется. Почему?(

[ThunderCat]

PageUp, так будет правильней:

$(document).on("click", "a", function(evt) {
        evt.preventDefault();

Но почему-то страница сама не обновляется в браузере. Контент не меняется. Почему?(

Так надо смотреть, отладкой заниматься, хз что там вообще приходит, и что выполняется. Как самый простой вариант - используйте console.log() для понимания что и где выполняется/содержится.

[PageUp]

ThunderCat, в том и дело что в консоли нет ошибок и страница приходит какая нужно. С обновленным div. Но на экране он не обновляется

[PageUp]

ThunderCat, Если сделать логирование, то из сообщений приходит только первое here1, что идет до вызова основной функции.
Все остальные сообщения в консоли не появляются.
GET запрос в консоли видно со всеми новыми параметрами, включая и ajax=true.

<script>
				$(document).on("click", "a", function(evt) {
					evt.preventDefault();

					var redirect_url = $(this).attr('href');
					console.log("here1");
					$.ajax({
						'url': $(this).attr('href'),
						cache: false,
						data: {
							ajax: true
						},
						dataType: "json",
						success: function(json) {
							console.log("here");
							if (json.redirect) {
								if (json.load_html) {
									// Если доступен API истории  
									if (!(typeof history.pushState === 'undefined')) {
										history.pushState({
												url: redirect_url,
												title: document.title
											},
											document.title, // Можно также использовать json.title для установки заголовка предыдущей страницы на сервере
											redirect_url
										);
									}
									console.log("3");
									document.open();
									document.write(json.html);
									document.close();
								} else {
									console.log("2");
									window.location = redirect_url;
								}
							} else {
								console.log("1");
								$('#content').html(json.message);
							}
							console.log(json.html);
						},
					});
					return false; //что бы не выполнять переход дефолтный

				});
			</script>

[ThunderCat]

PageUp,

GET запрос в консоли видно со всеми новыми параметрами, включая и ajax=true.

Что отвечает сервер по коду? Что в респонсе? Там вообще json? И есть ли там что-то?

document.open();
document.write(json.html);

После этого скрипт может дальше не выполняться кстати, так как вы по сути переписываете текущий стек документа. Если вы возвращаете хтмл зачем тогда все эти танцы, проще перегрузить урл.

И еще раз - не стоит натягивать сову на глобус, проблем будет меньше если брать подходящий инструмент под задачу.

[PageUp]

ThunderCat, Я отказался от JSON и вернулся к HTML варианту, и все казалось бы работает, но почему то с каждым переходом по ссылке количество запросов одинаковых возрастает и растет пока скрипт не начинает глючить и начинает перебирать страницы из фона мотая то взад, то вперед
https://qna.habr.com/q/1246832