Простой выбор элементов и 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:

• load
• get
• ajax
• post

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

loadметод

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

$("#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;
});

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