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

Question

То, что я хочу, чтобы ссылки, которые изменяют часть страницы, и динамический URL для него, где можно указать переменные такие как #calendar=10_2010tabview=tab2

Check this for an exact example:CLICK HERE FOR EXACT DEMO

Так вот формат ссылка, что мне нужно:

#calendar=10_2010&tabview=tab2

Мне нужно иметь переменные в ссылках, например calendar и tabview, поэтому я могу изменить несколько вещей на одной странице без загрузки.

---

Или другой формат, например, как на http://www.wbhomes.com.au, это именно то, что я хочу, однако первый формат тоже хорошо, но это гораздо более красивым.

• http://wbhomes.com.au/#/propertiesforsale/houseandland/quinnsbeach-waterland1

---

Требования

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

• Ссылка должна быть в истории, поэтому, если я нажимаю кнопку «Назад» или «вперед», страница должна быть доступна.

• Обновление страницы должно также работать.

---

Некоторые:-ресурсы

Примеры:

• www.developer.yahoo.com/

• www.facebook.com - на боковой панели ссылки на ваша страница профиля

• www.wbhomes.com.au/ - 100% близко к тому, что я хочу

• www.flickr.com/

• www.youtube.com

Некоторые учебники:

• www.ajaxpatterns.org/

• www.contentwithstyle.co.uk/

---

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

Answer 1

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

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

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

Answer 2

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

Answer 3

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

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

window.sethash("#newsection");

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

Answer 4

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

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

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

PS извините не можете вторую ссылку Ьс я новый пользователь.

Answer 5

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

первое, что вам нужно это ядро ​​JQuery, который свободен в jquery.com

Далее вам потребуется хэш изменения JQuery даже плагин Бен Alman, который вы можете найти здесь: http://benalman.com/projects/jquery-hashchange-plugin/ Вам не нужно будет это для более новых версий браузеров, которые поддерживают событие hhml5 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=", "#")); 
}); 

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

$(window).trigger('hashchange'); 

Надеюсь, это достаточно ясно, если нет, не стесняйтесь обращаться ко мне, чтобы задать больше вопросов.

Answer 6

Использование хеш-ссылок позволяет заклассифицировать/разделяемые ссылки для запуска кода JavaScript вместо перезагрузки страницы. Ben Almans jQuery hashchange event позволяет связать обработчик событий с событием 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 аргументов, разделенных точкой («») в одной и той же ссылке.

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 = пункты.цвет = красный

В следующем JavaScript Object:

объектов {компании = не определено, страница = "элементы", цвет = "красный"}

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

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

Answer 7

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