Главная страница   /   15.1. Создание простого Ajax запроса при помощи Low-Level API (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

15.1. Создание простого Ajax запроса при помощи Low-Level API

Создание запроса при помощи low-level API не намного сложнее, чем использование сокращенных и удобных методов, которые я описал в главе 14. Разница заключается в том, что вы можете конфигурировать многие различные аспекты запроса и получать намного больше информации о выполняемом запросе. Метод, который является сердцем низкоуровневого API, – это ajax, и в листинге 15-1 на простом примере показано его использование.

Листинг 15-1: Использование метода ajax
<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
	<script src="jquery-1.7.js" type="text/javascript"></script>
	<script src="jquery.tmpl.js" type="text/javascript"></script>
	<script src="jquery.validate.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="styles.css" />
	<script type="text/javascript">
		$(document).ready(function () {
			$.ajax("mydata.json", {
				success: function (data) {
					var template = $('#flowerTmpl');
					template.tmpl(data.slice(0, 3)).appendTo("#row1");
					template.tmpl(data.slice(3)).appendTo("#row2");
				}
			});
		});
	</script>
	<script id="flowerTmpl" type="text/x-jquery-tmpl">
		<div class="dcell">
			<img src="${product}.png" />
			<label for="${product}">${name}:</label>
			<input name="${product}" data-price="${price}" data-stock="${stocklevel}"
				value="0" required />
		</div>
	</script>
</head>
<body>
	<h1>Jacqui's Flower Shop</h1>
	<form method="post" action="http://node.jacquisflowershop.com/order">
		<div id="oblock">
			<div class="dtable">
				<div id="row1" class="drow">
				</div>
				<div id="row2" class="drow">
				</div>
			</div>
		</div>
		<div id="buttonDiv">
			<button type="submit">Place Order</button></div>
	</form>
</body>
</html>

Вы используете метод ajax, передавая URL, который вы хотите запросить, и объект-карту, чьи свойства определяют набор пар ключ-значение, каждая из которых конфигурирует настройки для запроса.

Примечание

В этой главе также используется Node.js, как и в главе 14.

В этом примере у моего объекта есть одна настройка: настройка success указывает функцию, которая будет вызвана, если запрос пройдет удачно. Я запрашиваю с сервера файл mydata.json и использую его с шаблоном данных для создания и вставки элементов в документ, так же как я делал в предыдущей главе при помощи сокращенных методов. По умолчанию метод ajax делает HTTP GET запрос, что обозначает, что это пример эквивалентен использованию методов get или getJSON, которые я показал в главе 14. Далее я покажу вам, как конфигурировать POST запросы.

Тут доступно множество настроек, и я буду раскрывать их на протяжении оставшейся части главы, в дополнение к некоторым полезным методам, которые предоставляет jQuery для более простого использования Ajax.