Как отобразить запросы Ajax в URL?
Я хочу иметь ссылки, которые изменяют часть страницы, и динамический URL для нее, где я могу указывать такие переменные, как #calendar=10_2010tabview=tab2
Check this for an exact example: НАЖМИТЕ ЗДЕСЬ ДЛЯ ТОЧНОЙ ДЕМО
Итак, вот формат ссылки, что мне нужно:
#calendar=10_2010&tabview=tab2
Мне нужно иметь переменные в ссылках, как calendar а также tabview так что я могу изменить несколько вещей на одной странице без перерисовки.
Или другой формат, такой как на http://www.wbhomes.com.au/, это именно то , что я хочу, однако первый формат тоже хорош, но он намного красивее.
http://wbhomes.com.au/#/propertiesforsale/houseandland/quinnsbeach-waterland1
Требования
Требуется доступ из любого места, например, из почты или если я просто напишу в строке URL.
Ссылка должна быть в истории, поэтому, если я нажму кнопку "назад" или "вперед", страница должна быть открыта.
Обновление страницы тоже должно работать.
Некоторые источники:
Примеры:
http://www.facebook.com/ - ссылки на боковую панель на странице вашего профиля
http://wbhomes.com.au/ - 100% близко к тому, что я хочу
Некоторые уроки:
Пожалуйста, помогите мне! Я никогда не находил никакого решения для этого, но я не хочу использовать jquery или API, или любую библиотеку, я хочу иметь работающую Javascript/AJAX а также PHP скрипт.
7 ответов
Для демонстрации, связанной с вашим вопросом, добиться этой функциональности на самом деле очень просто - поскольку она вообще не использует AJAX (когда вы начинаете добавлять AJAX в микс, это становится более трудным - объяснено позже). Для достижения этой функциональности вы бы; обновите ваши ссылки, чтобы использовать хэши, затем привяжите к событию hashchange. К сожалению, событие hashchange не является кросс-браузерным, хотя, к счастью, доступно много "плагинов истории / удаленных плагинов" - нашим предпочтительным за последние годы оказалось jQuery History, он с открытым исходным кодом, получил отличную поддержку и активно развивается:-).
Хотя, когда речь заходит о добавлении функциональности AJAX в микс, таких как такие сайты, как Facebook, WBHomes и http://www.balupton.com/, тогда вы столкнетесь с целым рядом серьезных проблем! (Я знаю, как я был ведущим архитектором для последних двух сайтов!). Некоторые из этих проблем:
- Как изящно и легко обновить определенные внутренние ссылки, чтобы использовать историю и функциональность AJAX, и обнаружить, когда хэш изменился? при этом другие ссылки работают так же, как и раньше.
- Как перенаправить с "www.yoursite.com/myapp/a/b/c" на "www.yoursite.com/myapp/#/a/b/c"? и по-прежнему поддерживать удобство работы для пользователя таким образом, чтобы 3 необходимых перенаправления были как можно более плавными.
- Как отправить значения формы и данные с помощью AJAX и обновить хэш? и наоборот, если они не поддерживают Javascript.
- Как определить, какую именно область страницы запрашивает AJAX-запрос? Так, что подстраницы отображаются с правильной страницей.
- Как изменить заголовок страницы при изменении состояния AJAX? и другой нестраничный контент.
- Как выполнить хорошие вступительные / выходные эффекты, когда состояние AJAX загружается и изменяется? такой, что пользователь не остался в темноте.
- Как обновить информацию для входа на боковую панель при входе через AJAX? Очевидно, что мы не хотим, чтобы эта кнопка входа вверху слева была там.
- Как по-прежнему поддерживать сайт для пользователей, у которых не включен JS? Такой, что он грациозно ухудшается и все еще индексируется поисковыми системами.
Единственный известный мне проект с открытым исходным кодом, который пытается решить все упомянутые чрезвычайно сложные проблемы, - это jQuery Ajaxy. По сути, это расширение упомянутого выше проекта jQuery History, обеспечивающее приятный элегантный высокоуровневый интерфейс для добавления функциональности AJAX в микс, чтобы решать эти сложные проблемы за кулисами, чтобы нам не пришлось о них беспокоиться. Это также выбранное решение, используемое на нескольких последних коммерческих сайтах, упомянутых ранее.
Удачи, и если у вас есть дополнительные вопросы, просто оставьте комментарий к этому ответу, и я получу его как можно скорее:-)
Обновление: теперь есть HTML5 History API (pushState, popState), который не поддерживает HTML4. hashchange функциональность. History.js теперь является наследником jQuery History и обеспечивает кросс-браузерную совместимость для HTML5 History API и необязательный hashchange отступление для браузеров HTML4. JQuery Ajaxy будет обновлен для History.js
Szevasz..:)
HTML
<a href="/bye.php?user=abc&page=messages"
onclick="return goToWithAjax(this);">bye</a>
Javascript
function goToWithAjax(hash) {
hash = hash.href ? hash.getAttribute("href", 2) : hash;
ajax( hash, function( response ) {
document.getElementById("content").innerHTML = response;
});
hash = ("#!/" + hash).replace("//","/");
window.location.hash = hash;
return false;
}
//////////////////////////////////////////////////////////////////////////////
function getXmlHttpObject() {
var xmlHttp;
try {
xmlHttp = new XMLHttpRequest();
} catch (e) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function ajax(url, onSuccess, onError) {
var xmlHttp = getXmlHttpObject();
xmlHttp.onreadystatechange = function () {
if (this.readyState == 4) {
// onError
if (this.status != 200) {
if (typeof onError == 'function') {
onError(this.responseText);
}
}
// onSuccess
else if (typeof onSuccess == 'function') {
onSuccess(this.responseText);
}
}
};
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
return xmlHttp;
}
Я думаю, что вы можете сделать это очень легко, используя событие onHashChange, присутствующее в HTML5, или используя библиотеку JavaScript, которая эмулирует такое поведение "хэширования" в браузерах, которые не имеют полной поддержки HTML 5. Одной из таких библиотек может быть MooTools onhashchange, но есть и много других.
Если у вас есть браузер с поддержкой HTML 5 или такая библиотека, которая имитирует поведение, просто используйте:
window.sethash ("# newsection"); изменить что-то новое из javascript и / или обратный вызов этого события onHashChange, чтобы перехватить его, в зависимости от ваших сценариев использования.
CorMVC Jquery Framework сделан таким образом, это с открытым исходным кодом, вы можете копаться в источнике и получить логику из него.
И на самом деле это довольно просто. Создатель хорошо рассказывает об этом видео ниже.
http://www.bennadel.com/resources/jing/2009-12-21_0933.swf
PS извините не могу опубликовать вторую ссылку, потому что я новый пользователь.
То, что вы хотите, это способ поддержки истории в AJAX что можно сделать с помощью многих уже существующих библиотек. Я бы порекомендовал прочитать 3 страницы истории YUI.
Это то, что ускользает от большинства новых разработчиков AJAXian. Это довольно простой вопрос для решения.
Первое, что вам нужно, это ядро jQuery, которое бесплатно на jquery.com.
затем вам понадобится плагин jQuery для изменения хеша, разработанный Беном Алманом, который вы можете найти здесь: http://benalman.com/projects/jquery-hashchange-plugin/ Это не понадобится для более новых версий браузеров, поддерживающих html5. событие hashchange, но вы сделаете это для более старых версий браузеров. Вам не нужно ничего делать, но включить этот скрипт на своей странице, он обрабатывает все остальное.
Теперь для ваших ссылок вам нужно будет создать их в виде строки запроса, например:
<a href="user.php?q=/topic/article" class="dynlnk">Link Text/Image</a>
Теперь у вас есть ссылки, которые ведут на страницы и могут быть обработаны в php, если javascript отключен. все, что вам нужно сделать, это использовать суперглобальный $_GET и проанализировать строку запроса для обработки содержимого страницы.
теперь в вашем javascript на странице вам нужно, чтобы ваши ссылки вызывали hashchange. Вы можете сделать это, заменив? Q = на #, как это.
$(".dynlnk").each(function(){
$(this).attr("href", $(this).attr("href").replace("?q=", "#"));
});
теперь ваши ссылки будут вызывать хэш-обмен, единственное, что остается сделать - это связать хэш-обмен с функцией, которая что-то делает. Это можно сделать очень просто с помощью jQuery:
$(window).bind( 'hashchange', function(e){
//this splits the part after the hash so you can handle the parts individually.
//to handle them as one just use location.hash
pageparts = location.hash.split("/");
});
Теперь просто добавьте любой код, который вы делаете для обработки вашего ajax и контента.
теперь вам просто нужен последний бит javascript для запуска изменения хеша в случае, если страница была загружена хешем для начала, так что вы просто вызываете функцию триггера Windows, когда страница загружается
$(window).trigger( 'hashchange' );
Надеюсь, это достаточно ясно, если нет, не стесняйтесь связаться со мной, чтобы задать больше вопросов.
Использование хеш-ссылок позволяет создавать закладки / общие ссылки для запуска кода JavaScript вместо перезагрузки страницы. Событие hashchange Бена Альманса jQuery позволяет привязать обработчик события к событию hashchange. Этот плагин работает со старыми браузерами, которые обычно не поддерживают это. Обработчик события, связанный с hashchange, может прочитать хэш-часть URL-адреса и вызвать любую функцию.
// register event handler
function bindHashchange() {
$(window).bind('hashchange', function(event) {
event.preventDefault();
var label = location.hash.substring(1);
handleLabel(label);
});
// trigger event so handler will be run when page is opened first time
// otherwise handler will only run when clicking on hash links
$(window).trigger('hashchange');
}
// read and handle hash part of url
function handleLabel(label) {
if ( label.length > 0 ) {
// using label from url
switchPage(label);
} else {
// use the default label, if no hash link was present
switchPage('start');
}
}
// in this case, load hidden <div>'s into a <div id="content">
function switchPage(label) {
if ( label == 'start ) {
$('div#content').html($('div#start'));
} else if ( label == 'some_other_page' ) {
// do something else
}
}
Этот другой обработчик событий может обрабатывать 2 аргумента, разделенных точкой ('.') В том же URL.
function processHash() {
var str = location.hash.substring(1);
var pos = $.inArray('.', str);
var label = '';
var arg = '';
if ( pos > -1 ) {
label = str.substring(0, pos);
} else {
label = str.substring(0);
}
if ( pos > 1 ) {
arg = str.substring(pos+1);
}
if ( label.length == 0 ) {
// the default page to open of label is empty
loadContent('start');
} else {
// load page, and pass an argument
loadContent(label, arg);
}
}
Если используются регулярные выражения, любая комбинация символов может быть проанализирована.
var registry = {};
// split on character '.'
var args = label.split(/\./g);
for ( i in args ) {
var arg = args[i];
// split on character '='
var temp = arg.split('=');
var name = temp[0];
var value = temp[1];
// store argument in registry
registry[name] = value;
}
// registry is loaded, ready to run application that depends on arguments
Это преобразует URL:
MySite/#company.page=items.color= красный
В следующий объект JavaScript:
Object {company = undefined, page = "items", color = "red"}
Тогда это только вопрос запуска функций jQuery show() или hide() для выбранных вами элементов.
Это может быть преобразовано в не-jQuery JavaScript, но тогда вы потеряете функциональность, которую предоставляет Бен Алман, что крайне важно для портативного решения.