Каково общее соглашение AJAX для знания определенного состояния при загрузке страницы?

Question

У меня был такой вопрос с тех пор, как я начал делать серьезные AJAX-вещи.Позвольте мне привести пример.

Допустим, вы извлекаете обычную HTML-страницу клиента с сервера.URL-адрес может выглядеть следующим образом:

/ myapp / customer / 54

После отображения страницы вы хотите предоставить функциональность ajax, действующую на этого клиента.Для этого вам нужно отправлять идентификатор «54» обратно на сервер в каждом запросе.

Какой самый лучший / самый распространенный способ сделать это?Я обнаружил, что помещаю это в скрытые формы.Я нахожу это легким для выбора, но это также кажется немного хрупким.Что если документ изменится и скрипт не будет работать?Что, если этот идентификатор будет продублирован для целей css через 3 месяца и, таким образом, нарушит работу страницы, поскольку существует 2 идентификатора с одинаковым именем?

Я мог бы проанализировать URL-адрес, чтобы получить значение "54".Этот подход лучше?Это будет работать для простых случаев неоднократно.Это может не очень хорошо работать в сложных случаях, когда вам может понадобиться передать несколько идентификаторов или списки идентификаторов.

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

Answer 1

Я думаю, что лучший способ сделать это - думать, что у вас нет Ajax.

Допустим, у вас есть форма, отправленная с использованием Ajax. Откуда вы знаете, на какой URL отправлять его?

Атрибут src. Просто попросите ваш скрипт отправить саму форму. Все данные уже в форме.

Допустим, у вас есть ссылка, которая загружает некоторые новые данные. Как вы знаете URL и параметры?

Атрибут href. Просто попросите скрипт прочитать URL.

Так что в основном вы всегда читали бы URL / данные из элемента, на который воздействовали, подобно тому, что делает браузер.

Поскольку ваш код на стороне сервера знает идентификаторы и т. Д. При загрузке страницы, вы можете легко создать эти URL-адреса там. Клиентскому коду нужно будет только прочитать атрибуты.

Этот подход имеет больше, чем одно преимущество:

• Упрощает, где хранятся URL-адреса и данные, потому что они помещаются точно в атрибуты, которые вы обычно находите в HTML.
• Если вы хотите, ваш код будет работать без JavaScript, потому что URL-адреса и все они уже находятся в тех местах, где браузер может их понять без JS.

Если вы делаете что-то более сложное, чем ссылки / формы

В случае, если вам нужно разрешить более сложные взаимодействия, вы можете хранить идентификаторы или другие соответствующие данные в атрибутах. HTML5 предоставляет data- * атрибуты для этой цели - я бы посоветовал вам использовать их, даже если вы не используете HTML5:

<div data-article-id="5">...</div>

Если у вас есть более полнофункциональное приложение на странице, вы можете также просто сохранить свой идентификатор в коде JS. Когда вы генерируете разметку в конце PHP, просто включите в разметку фрагмент, который присваивает идентификатор переменной или вызывает функцию или то, что вы считаете лучшим.

Answer 2

В идеале ваша форма должна работать без JavaScript, поэтому у вас, вероятно, есть скрытый ввод формы или что-то, что уже содержит значение id.Если нет, то, вероятно, вам следует это сделать.

Все это «хрупко» в том смысле, что небольшое изменение повлияет на все, мало что вы можете с этим поделать, но вы не всегда хотите помещать это в пользователя.руки, читая URL-адрес или строку запроса, которые могут быть легко изменены пользователем.(Конечно, это хорошо для URL, но не для всех. Здесь применяются те же правила, что и для доверия $ _GET, и для строк запросов).

Лично мне нравится строить весь AJAX поверх существующего функционального кодаи у меня никогда не было проблемы с "подключением" к тому, что уже есть.

---

Хотя не все является формой.Например, допустим, вы щелкаете «заголовок», и он становится редактируемым.Вы редактируете его, нажимаете ввод, и затем он становится недоступным для редактирования и снова становится частью страницы.Вы должны были отправить ID как часть этого.Кроме того, как насчет перемещения вещей, и вы хотите, чтобы эти позиции были обновлены?Вот еще один случай, когда использование формы не работает, потому что она не существует.

Все это все еще возможно, и не совсем сложно обойтись без javascript, поэтому форма может работать в любомдело, но я действительно вижу, что вы говорите.Почти в каждом случае есть какой-то уникальный идентификатор, будь то идентификатор базы данных или имя файла, который можно использовать в качестве атрибута «id» html, который его представляет.* Или атрибут data-, как упомянул Яни Хартикайнен.

Например, у меня есть система шаблонов, которая позволяет перетаскивать блоки содержимого.У каждого блока есть идентификатор, и у каждой области, в которую он может быть сброшен, тоже есть.Я буду использовать префиксы для содержащего div идентификатора, такого как «template-area_35» или «content-block_264».В этом случае я не утруждаю себя отступлением без JavaScript, но это может быть сделано (например, выпадающий список -> переместить это в область).В любом случае, это хороший вариант использования атрибута id.

Что если этот идентификатор будет продублирован для целей CSS через 3 месяца, и, таким образом, нарушит работу страницы, поскольку существует 2 идентификатора с одинаковым именем?

Если это произойдет (чего на самом деле не должно быть), кто-то что-то делает не так.Это будет их вина, если код не сработает, и они будут нести ответственность.Идентификаторы по определению должны быть уникальными .

Answer 3

Очевидно, у вас есть приложение, которое знает о сущности «Клиент», вы должны отразить это в своем Javascript (или PHP, но, поскольку вы делаете ajax, я бы поместил его в Javascript).

Вместо ручной обработки каждого вызова ajax вы можете заключить его в несколько функций, поддерживающих домен:

Старый сценарий:

var customer_id = fetch_from_url();  // or whatever
ajax("dosomething", { "customer": customer_id }, function () {
    alert("did something!");
});
ajax("dosomethingelse", { "customer": customer_id }, function () {
    alert("did something else!");
});

Новый сценарий:

var create_customer = function (customer_id) {

    return {
        "dosomething" : function () {
            ajax("dosomething", { "customer": customer_id }, function () {
                alert("did something!");
            });
        },
        "dosomethingelse": function () {
            ajax("dosomethingelse", { "customer": customer_id }, function () {
                alert("did something else!");
            });
        }
    };
}

var customer_id = fetch_from_url();  // or whatever
var customer = create_customer(customer_id);
// now you have a reference to the customer, you are no longer working with ids
// but with actual entities (or classes or objects or whathaveyou)
customer.dosomething();
customer.dosomethingelse();

Чтобы округлить его,Да, вам нужно отправлять идентификатор клиента для каждого запроса, но я бы обернул его в Javascript в соответствующие объекты.

Answer 4

ИМХО установка в параметре запроса (то есть? CustomerId = 54) была бы хороша, потому что даже если вы не можете обрабатывать AJAX (как в некоторых старых мобильных браузерах, браузерах командной строки и т. Д.), Вы все равно можете иметь ссылка на ссылку.