Метод load()

Как было указано в предыдущей главе, существует много способов использовать AJAX в jQuery, и их выбор, разумеется, зависит от ситуации. Один из наиболее простых и, тем не менее, наиболее мощных методов для асинхронной загрузки данных - это метод load(). Вы можете использовать его, выбрав элемент, в который вы хотите загрузить содержимое и затем вызвав метод load() для него. Он принимает URL, который вы хотите загрузить, в качестве параметра. В данном примере нам нужен внешний файл, который мы сможем загрузить. Мы назовем его content.html и его содержимое должно выглядеть следующим образом:

<div id="divContent">
	<b>This is external content</b>
</div>
And there's more of it

Сохраните эту страницу под именем content.html, в той же директории, где вы храните другие примеры их этого руководства. Мы можем загрузить ее вот так просто:

<div id="divTestArea1"></div>
<script type="text/javascript">
$(function()
{
	$("#divTestArea1").load("content.html");
});
</script>

Если ваш файл контента находится в другой директории, или вы назвали его по-другому, вам придется кардинально изменить параметр для загрузки . Это все, что требуется, чтобы загрузить содержимое с внешнего файла с помощью jQuery и метода load. Фишка в том, что вы можете указать selector вместе с URL, чтобы получить часть страницы. В первом примере, мы загрузили весь файл, но в следующем примере мы будем использовать только div, который содержит первое предложение:

<div id="divTestArea2"></div>
<script type="text/javascript">
$(function()
{
	$("#divTestArea2").load("content.html #divContent");
});
</script>

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

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

<div id="divTestArea3"></div>
<script type="text/javascript">
$(function()
{
	$("#divTestArea3").load("no-content.html", function(responseText, statusText, xhr)
	{
		if(statusText == "success")
			alert("Successfully loaded the content!");
		if(statusText == "error")
			alert("An error occurred: " + xhr.status + " - " + xhr.statusText);
	});
});
</script>

Как вы можете видеть, в callback-функции заданы три параметра, которые jQuery соберет за вас. Первый параметр будет содержать полученный контент, если загрузка пройдет успешно. Второй параметр - это строка, которая определяет статус вызова, т.е. "success" (успешно) или "error" (ошибка). Вы можете использовать его, чтобы проверить, был ли вызов успешным или нет. Третий параметр - это объект XMLHttpRequest, который используется для выполнения AJAX-запроса. Он будет содержать свойства, которые вы можете использовать, чтобы понять, что пошло не так, и для других целей.