Как показать запросы Ajax в URL?

Для демонстрации, связанной с вашим вопросом, достижение этой функциональности на самом деле очень просто – поскольку она вообще не использует AJAX (когда вы начинаете добавлять AJAX в микс, это становится сложнее – объясняется позже). Для достижения этой функциональности вы бы это сделали; обновите свои ссылки, чтобы использовать хеши, затем привяжитесь к событию hashchange. К сожалению, событие hashchange не совместимо с кросс-браузером, хотя, к счастью, существует множество доступных «истории / удаленных плагинов» – наш предпочтительный на протяжении многих лет, как оказалось, был jQuery History , он с открытым исходным кодом, получил большую поддержку и активно развивается: -).

Хотя, когда дело доходит до добавления функциональности AJAX в микс, например, таких сайтов, как Facebook, WBHomes и Balupton.com, тогда вы столкнетесь с целым рядом серьезных проблем! (Я знаю, поскольку я был ведущим архитектором для последних двух сайтов!). Некоторые из этих проблем:

• Как изящно и легко обновлять некоторые внутренние ссылки для использования функций History и 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, упомянутого ранее, предоставляя приятный элегантный интерфейс высокого уровня, чтобы добавить функциональность AJAX в микс, чтобы заботиться о тех трудных проблемах за кулисами, поэтому нам не нужно беспокоиться о них. Это также выбранное решение, используемое в последних нескольких коммерческих сайтах, упомянутых ранее.

Удачи, и если у вас возникнут какие-либо дополнительные вопросы, просто опубликуйте комментарий к этому ответу, и я подойду к нему как можно скорее 🙂

Обновление: теперь есть API истории HTML5 (pushState, popState), который hashchange функциональность hashchange HTML4. History.js теперь является помощником в истории jQuery и обеспечивает кросс-браузерную совместимость для API истории HTML5 и дополнительный hashchange для браузеров HTML4. jQuery Ajaxy будет обновлен для History.js

Я думаю, вы можете сделать это очень легко, используя событие onHashChange, присутствующее в HTML5, или используя библиотеку JavaScript, которая эмулирует это поведение «хэша» в браузерах, которые не имеют полной поддержки HTML 5. Одной из таких библиотек может быть MooTools onhashchange , но есть и многие другие.

Если у вас есть браузер с поддержкой HTML 5 или такая библиотека, которая имитирует поведение, просто используйте:

  window.sethash ( "# newsection"); 

чтобы перейти к чему-то новому из javascript и / или обратному вызову к событию onHashChange, чтобы перехватить его, в зависимости от ваших сценариев использования.

CorMVC JQuery Framework выполняется таким образом, это opensource, который вы можете выкопать в исходный код и получить от него логику.

И на самом деле это довольно прямолинейно. Создатель прекрасно рассказывает об этом видео ниже.

http://www.bennadel.com/resources/jing/2009-12-21_0933.swf

PS извините, не могу опубликовать вторую ссылку bc. Я новый пользователь.

Севаш .. 🙂

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; }​ 

Это то, что ускользает от большинства новых разработчиков AJAXian. Это довольно простая проблема.

Первое, что вам понадобится, – это ядро ​​jQuery, свободное на jquery.com

далее вам понадобится изменение хэша jQuery даже плагина Ben Alman, которое вы можете найти здесь: 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 на странице вам понадобится сделать ваши ссылки триггером обмена. Вы можете сделать это, заменив? 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 Ben Almans 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-объект:

Объект {company = undefined, page = "items", color = "red"}

Тогда это только вопрос запуска функций jQuery show () или hide () для выбранных вами элементов.

Это можно было бы преобразовать в JavaScript без jQuery, но тогда вы потеряете функциональность, которую предлагает Ben Alman, что имеет решающее значение для портативного решения.

Вы хотите, чтобы поддерживать историю в AJAX что может быть сделано с использованием многих уже существующих библиотек. Я бы рекомендовал прочитать страницу YUI 3 по истории .