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

Ответ 1

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

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

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

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

Ответ 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;
}​

Ответ 3

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

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

window.sethash("#newsection");

Ответ 4

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

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

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

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

Ответ 5

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

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

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

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

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

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

Ответ 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> 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, что имеет решающее значение для портативного решения.

Ответ 7

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