Главная страница   /   16.3. Подготовка к Ajax (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

16.3. Подготовка к Ajax

Чтобы быть в курсе событий, я собираюсь добавить некоторые базовые элементы и стили, которые я буду использовать для отображения любых ошибок Ajax запросов, и установить базовую конфигурацию, которая будет применяться ко всем моим Ajax запросам. В листинге 16-3 показаны изменения, внесенные в документ.

Листинг 16-3: Настройка поддержки для Ajax запросов и обработки ошибок
<style type="text/css">
	a.arrowButton {
		background-image: url(leftarrows.png);
		float: left;
		margin-top: 15px;
		display: block;
		width: 50px;
		height: 50px;
	}

	#right {
		background-image: url(rightarrows.png);
	}

	h1 {
		min-width: 0px;
		width: 95%;
	}

	#oblock {
		float: left;
		display: inline;
		border: thin black solid;
	}

	form {
		margin-left: auto;
		margin-right: auto;
		width: 885px;
	}

	#bbox {
		clear: left;
	}

	#error {
		color: red;
		border: medium solid red;
		padding: 4px;
		margin: auto;
		width: 300px;
		text-align: center;
		margin-bottom: 5px;
	}
</style>
<script type="text/javascript">
	$(document).ready(function () {
		$.ajaxSetup({
			timeout: 5000,
			converters: {
				"text html": function (data) {
					return $(data);
				}
			}
		})

		$(document).ajaxError(function (e, jqxhr, settings, errorMsg) {
			$('#error').remove();
			var msg = "An error occurred. Please try again"
			if (errorMsg == "timeout") {
				msg = "The request timed out. Please try again"
			} else if (jqxhr.status == 404) {
				msg = "The file could not be found";
			}
			$('<div id=error/>').text(msg).insertAfter('h1');
		}).ajaxSuccess(function () {
			$('#error').remove();
		})

		var fNames = ["Carnation", "Lily", "Orchid"];
		var fRow = $('<div id=row3 class=drow/>').appendTo('div.dtable');
		var fTemplate = $('<div class=dcell><img/><label/><input/></div>');
		for (var i = 0; i < fNames.length; i++) {
			fTemplate.clone().appendTo(fRow).children()
			.filter('img').attr('src', fNames[i] + ".png").end()
			.filter('label').attr('for', fNames[i]).text(fNames[i]).end()
			.filter('input').attr({
				name: fNames[i],
				value: 0, required: "required"
			})
		}

		$('<a id=left></a><a id=right></a>').prependTo('form')
			.addClass("arrowButton").click(handleArrowPress).hover(handleArrowMouse);
		$('#right').appendTo('form');

		$('#row2, #row3').hide();

		var total = $('#buttonDiv')
			.prepend("<div>Total Items: <span id=total>0</span></div>")
			.css({ clear: "both", padding: "5px" });
		$('<div id=bbox />').appendTo("body").append(total);
		$('input').change(function (e) {
			var total = 0;
			$('input').each(function (index, elem) {
				total += Number($(elem).val());
			});
			$('#total').text(total);
		});

		function handleArrowMouse(e) {
			var propValue = e.type == "mouseenter" ? "-50px 0px" : "0px 0px";
			$(this).css("background-position", propValue);
		}

		function handleArrowPress(e) {
			var elemSequence = ["row1", "row2", "row3"];
			var visibleRow = $('div.drow:visible');
			var visibleRowIndex = jQuery.inArray(visibleRow.attr("id"), elemSequence);
			var targetRowIndex;
			if (e.target.id == "left") {
				targetRowIndex = visibleRowIndex - 1;
				if (targetRowIndex < 0) { targetRowIndex = elemSequence.length - 1 };
			} else {
				targetRowIndex = (visibleRowIndex + 1) % elemSequence.length;
			}
			visibleRow.fadeOut("fast", function () {
				$('#' + elemSequence[targetRowIndex]).fadeIn("fast")
			});
		}
	});
</script>

Я использовал глобальные события Ajax, чтобы настроить простое отображение ошибок. Если случится ошибка, на экране появятся новые элементы с описанием проблемы. Сообщения об ошибках, которые я показываю, основаны на информации, полученной от jQuery, но я ничего не усложняю. В реальном веб приложении эти сообщения должны быть более наглядными и, если это возможно, давать краткую информацию о том, как можно решить проблему. Я использовал глобальные события, таким образом, я могу использовать настройки success и error для индивидуальных запросов, не беспокоясь о конкатенации массивов функций. Пример простой ошибки можно увидеть на рисунке 16-2.

Рисунок 16-2: Отображение сообщения об ошибке для Ajax

Ошибка отображается до тех пор, пока запрос не будет успешно выполнен или произойдет другая ошибка, когда элементы удаляются из документа.

В дополнение к событиям я использовал метод ajaxSetup, чтобы определить значения для настройки timeout и добавить конвертер для HTML фрагментов, чтобы они были автоматически обработаны jQuery.