Как отобразить запросы Ajax в URL? - PullRequest
Новая
       42

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

31 голосов
/ 08 июля 2010

Мне нужны ссылки, которые изменяют часть страницы, и динамический 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

Требования

  • Требуется доступ из любого места, например, из почты или если я просто пишу в URLbar.

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

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

Некоторые источники:

Примеры:

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

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

Ответы [ 7 ]

25 голосов
/ 18 июля 2010

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

Хотя, когда речь заходит о добавлении функциональности AJAX в микс, таких как такие сайты, как Facebook, WBHomes и 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

1 голос
/ 19 июля 2010

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

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

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

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

1 голос
/ 19 июля 2010

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

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

window.sethash("#newsection");
, чтобы перейти на что-то новое из javascript, и / или вызов этого события onHashChange для его перехвата в зависимости от сценарии использования.
1 голос
/ 08 июля 2010

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;
}​
0 голосов
/ 24 июля 2010

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

0 голосов
/ 23 июля 2010

Использование хеш-ссылок позволяет создавать закладки / общие ссылки для запуска кода 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 аргумента, разделенных точкой ('.') В том же 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 = red

В следующий объект JavaScript:

Object {company = undefined, page = "items", color = "red""}

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

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

0 голосов
/ 20 июля 2010

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

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

далее вам понадобится плагин jQuery change hasn от Ben Alman, который вы можете найти здесь: http://benalman.com/projects/jquery-hashchange-plugin/ Это не понадобится для более новых версий браузеров, которые поддерживают событие hashchange html5, но вам будет нужно для более старых версии браузеров. Вам не нужно ничего делать, но включить этот скрипт на своей странице, он обрабатывает все остальное.

теперь для ваших ссылок вам нужно будет создать их в виде строки запроса, например: 

<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' );

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

...