Сайт AJAXify

У меня есть законные причины делать то, что я пытаюсь объяснить. У меня есть существующий сайт abc.com который имеет регулярные страницы и т. д. все написано на php. Теперь я хотел бы AJAXify сайт т. е. когда пользователь нажимает на ссылку, он должен получить ссылку с помощью AJAX и заменить содержимое страницы. Это простая часть, и я могу достичь ее с помощью функции jQuery get.

теперь проблема возникает, когда пользователь закладывает страницу. Я могу использовать хэш-теги, чтобы указать, включен ли пользователь другая страница, но вместо того, чтобы использовать javascript для получения новой страницы снова, можно ли получить ее непосредственно с помощью PHP при вызове страницы.

не могли бы вы дать мне план о том, как достичь вышеуказанного. Эта функциональность похожа на то, что имеет Facebook.

Спасибо за ваше время.

13
ajax graceful-degradation javascript jquery php

6 ответов

Это довольно простой процесс (1) разбора хэш-тега и (2) загрузки содержимого через Ajax, как обычно.

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

здесь быстрый пример, чтобы поиграть с. Нажмите на имя и отметьте хэш-тег. Соответствующий Javascript выглядит так:

// Go straight to content if it's in the hash.
$(document).ready(function(){
   load_story_from_hash();
});

// Call this function whenever user clicks on a hash link
function set_hash(hash){
   window.location.hash = hash;
   load_story_from_hash()
}

// Actually load content based on the hash in the URL
function load_story_from_hash(){

   var hash = window.location.hash;
   hash = hash.replace(/^#/, '');

   if (hash) {

      $('#post_container').load(hash+'.html', {}, function(){
         $.scrollTo('#post_container', 1000);
      });

   }

}
3

ответ-Нет, вы не можете получить значение хэш-сервера URL. См.Как получить хэш Url ( # ) со стороны сервера.

вам нужно будет получить хэш-значение на стороне клиента и сделать дополнительный запрос.

3

история jQuery-мой предпочтительный выбор. Его можно найти здесь:http://www.balupton.com/projects/jquery-history/ обеспечить поддержку кросс-браузера, привязку к хэшам, перегрузку хэшей, все остальное.

существует также расширение Ajax для него под названием jQuery Ajaxy, что позволяет ему легко обновить вашу веб-страницу в надлежащее приложение Ajax без необходимости изменений на стороне сервера и оставшихся SEO и JS-отключенных дружественных: http://www.balupton.com/projects/jquery-ajaxy/

Это решение выбирают такие сайты, как http://wbhomes.com.au/ и http://www.balupton.com

в целом они оба хорошо документированы, поддерживаются и многофункциональная. Они также выиграли вопрос о щедрости здесь как показать запросы Ajax в URL?

1

также вы можете использовать один из этих инструментов или свернуть свой собственный. Использует окно.местоположение.хэш вместе с другими трюками.

0

недавно я написал статью об этом конкретном вопросе. Статья является учебным стилем. Используя событие изменения хэша, im показывает, как добавлять параметры в url-адрес, который может запускать ajax-запросы с бесконечным количеством параметров, поэтому функционирует довольно масштабируемым образом.

вы можете найти больше об этом здесь http://andresgallo.com/2012/06/08/ajaxifying-the-web-the-easy-way/

Часть I охватывает, как реагировать на хэш-ссылки, в то время как часть II описывает, как отправлять данные в хэш-url-адресе в запрос ajax, поэтому позволяет вам делать почти все, что вы хотите, из хэш-тегов в вашем url-адресе.

0

лучший способ сделать это-иметь один индекс.php, который загружает все остальные страницы на основе частей URL после него. Например:

http://www.example.com/index.php/reports/employees/hoursWorked

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

один из способов обойти эту проблему - поместить ссылку" Ссылка на эту страницу " на каждую страницу, содержащую эту форму URL-адреса для пользователей.

-1