Метод load

Метод load загружает код HTML, полученный с сервера, в элемент на странице. Он принимает следующие параметры:

• url: обязательный параметр, содержащий адрес ресурса, к которому будет обращаться запрос

• data: необязательный параметр, содержащий простой объект javascript или строку, которые будут отправлены на сервер вместе с запросом

• complete(responseText, textStatus, XMLHttpRequest: необязательный параметр - функция обратного вызова, которая будет выполняться при завершении запроса.

В предыдущем параграфе был показан простейший пример использования метода load:

		<button>Загрузить</button>
		<div id="news"><h3>Нет новостей</h3></div>
		<script type="text/javascript">
		$(function(){
			$('button').click(function(){
				$('#news').load('ajax.php');
			});
		});
		</script>

Использование данных в запросе

Если второй параметр - data - не определен, то запрос выполняется как GET-запрос. Если же мы используем параметр data, то осуществляется POST-запрос, а данные передаются как при отправке формы. И, применив соответствующие методы на серверной стороне, мы можем получить переданные данные. Изменим предыдущий пример:

		<button>Загрузить</button>
		<div id="news"><h3>Нет новостей</h3></div>
		<script type="text/javascript">
		$(function(){
			$('button').click(function(){
				$('#news').load('ajax.php', {'event':'Начало чемпионата России', 'date':'13.07.2013'});
			});
		});
		</script>

Здесь в качестве второго параметра мы передаем объект javascript, в котором определены два свойства: event и date. Теперь получим эти данные на сервере и вернем их в ответ клиенту:

<?php
	$event=$_POST['event'];
	$date=$_POST['date'];
	echo "<h3>" . $event . "</h3><h5>" . $date . "</h5>";
?>

Теперь, нажав на кнопку, данные, переданные во втором параметре, возвратятся обратно клиенту:

Использование функции обратного вызова

Применяя третий параметр - функцию обратного вызова complete, мы можем произвести некоторые дополнительные сопутствующие действия при завершении запроса. Ну самый простейший пример: вывод уведомления о состоянии запроса:

$('#news').load('ajax.php', function(){alert('Запрос выполнен');});