Статьи

Простой выбор элементов и AJAX с DOMAssistant

В этой статье моя цель — показать вам, как легко реализовать базовый выбор элементов, а затем добавить приятный динамический поиск контента через AJAX с помощью DOMAssistant .

Автор: Роберт Найман

Немного фона

Идея DOMAssistant состоит в том, чтобы предоставить облегченную библиотеку JavaScript, которая поможет вам в повседневных задачах сценариев. Одна из его самых сильных сторон — иметь самые быстрые и наиболее точно точные селекторы CSS, что является общей отправной точкой практически для всех задач сценариев, существующих в современном мире ссылок на элементы.

Так же, как веб-браузер Safari и его постоянный успех, мы считаем, что существует большой интерес к тому, чтобы что-то выполнялось как можно быстрее, а также имели небольшие, но в то же время надежные и простые в использовании функции. Для тех, кому нужно расширяться, в DOMAssistant есть очень мощный, но простой механизм плагинов для добавления нужной вам функциональности.

Демо-страница

Я настроил пример страницы с очень простой структурой HTML, чтобы продемонстрировать функции, описанные ниже. Давайте начнем с рассмотрения HTML внутри bodyэлемента:

<div id="container">
<h1>DOMAssistant Demo Page</h1>

<p>
There will be three alternatives below, and each
will make an AJAX call to dynamically add
content to the page.</p>
<ul>
<li>
<a id="html-link" href="content-through-html.html">
Content through HTML
</a>

</li>
<li>
<a id="json-link" href="content-through-json.js">
Content through JSON
</a>
</li>
<li>

<a id="xml-link" href="content-through-xml.xml">
Content through XML
</a>
</li>
</ul>
<h2>Content presentation</h2>

<p id="content-presentation">
The content retrieved will be presented here.
</p>
</div>

DOMAssistant.DOMReady

Во-первых, основная инициализирующая функция вызывается при загрузке DOM; в отличие от окна, когда со всеми его внешними ссылками должна быть закончена загрузка. Синтаксис для этого в DOMAssistant с помощью метода DOMAssistant.DOMReady :

DOMAssistant.DOMReady(function/functionRef/functionNameAsString)

Примеры:

DOMAssistant.DOMReady(function () {
alert("Hello, my friends!");
});

function sayWelcome () {
alert("Welcome!");
}
DOMAssistant.DOMReady(sayWelcome);

DOMAssistant.DOMReady("sayWelcome()");

Выбор элементов

Рассматривая большинство библиотек JavaScript на рынке, они основаны на использовании селекторов CSS для поиска и работы с одним или несколькими элементами на веб-странице. В основном, CSS-селекторы предлагают вам точно такую ​​же возможность с JavaScript, как и в CSS, чтобы ссылаться на элементы.

И, на самом деле, CSS-селекторы, предлагаемые DOMAssistant и другими библиотеками JavaScript, дают вам еще больше возможностей, поскольку они полностью поддерживают CSS 1 — 3; то, что в настоящее время недоступно ни в одном веб-браузере. Все комбинации селекторов CSS доступны на странице селекторов CSS .

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

Пример выбора

// Selects an element with the id "html-link"
$("#html-link");

/* Selects the link that is the child of an
LI element, which in turn is the
second child of its parent
*/
$("#container ul li:nth-child(2) a");

/* Selects the link that is the child of an
LI element, which in turn is the
last child of its parent
*/
$("#container li:last-child() a");

Добавление событий

События добавляются в ссылки с помощью addEventметода . Параметр fist представляет собой строку, представляющую событие, например «щелчок», а второй — функцию или ссылку на функцию для обработки события.

Чтобы предотвратить поведение по умолчанию ссылок для перехода на новую страницу, return falseиспользуется в конце функции обработки событий. Вы также можете использовать DOMAssistant.preventDefault(evt)и / или DOMAssistant.cancelBubble(evt)определить, как должны обрабатываться действия по умолчанию для события.

Получение контента с AJAX

Существует четыре основных метода получения содержимого AJAX с помощью DOMAssistant:

На демонстрационной странице я рассматриваю все, кроме post(что является материалом и основанием для другой статьи, посвященной отправке форм и тому подобным через AJAX).

loadметод

Этот loadметод является наиболее простым. Он принимает два параметра: первый — это URL-адрес, откуда следует получать контент, а второй — необязательный параметр, указывающий, следует ли динамически извлекаемый контент добавлять в существующий контент или заменять его. Если опущено, содержимое заменяется.

$("#html-link").addEvent("click", function (evt) {
$("#content-presentation").load(this.getAttribute("href"));
return false;
});

Что происходит в приведенном выше коде, так это то, что ссылка с id«html-ссылкой» при щелчке вызовет метод загрузки элемента с именем «content-presentation», с hrefатрибутом ссылки в качестве URL-адреса для получения содержимого из , Как только содержимое будет возвращено, оно поместит его в элемент «content-presentation», изменив innerHTMLсвойство этого элемента .

getметод

getМетод действует примерно так же , как loadметод, но он не будет автоматически загрузить содержимое в любом элементе. Вместо этого возвращаемое значение является ссылкой для вас, чтобы сделать все, что вы хотели бы представить.

$("#container ul li:nth-child(2) a").addEvent("click", function (evt) {
$("#content-presentation").get(this.getAttribute("href"),
function (response) {
var json = eval("(" + response + ")");
$("#content-presentation").replaceContent(json.content.text);
});
return false;
});

 

В этом примере возвращаемое значение имеет формат JSON . Затем он превращается в действительный объект JSON, а затем json.content.textзначение свойства извлекается и представляется на странице в элементе «content-presentation».

ajaxметод

ajaxМетод предлагает некоторые более расширенные функциональные возможности , такие как вручную с указанием метода, параметры, заголовки, типа ответа и т.д. В этом примере используются для запроса содержимого в формате XML:

function xmlResponse(xml) {
var content = xml.getElementsByTagName("text")[0].firstChild.nodeValue;
$("#content-presentation").replaceContent(content);
}

$("#container li:last-child() a").addEvent("click", function (evt) {
$("#content-presentation").ajax({
url: this.getAttribute("href"),
method : "GET",
callback : xmlResponse,
responseType : "xml"
});
return false;
});

Это было только начало

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