Метод load()

Начнём с самого простого – загрузка HTML-кода в необходимый нам DOM-элемент на странице. Для этой цели нам подойдет метод load(). Данный метод может принимать следующие параметры:

url	запрашиваемой страницы
data	передаваемые данные (необязательный параметр)
callback	функция, которая будет вызвана при завершении запроса к серверу (необязательный параметр)

Теперь на примерах. Откройте подопытную страницу:

Пример загрузки HTML посредством метода "load()"anton.shevchuk.name

С помощью следующего запроса, в элемент с id="content" будет вставлен весь HTML с указанной страницы:

// в элемент с id="content" будет вставлен HTML с указанной страницы
$("#content").load("example.html");

Как видите, подгружается весь HTML вместе со всеми стилями. Чтобы избежать подобного беспорядка, из подгружаемой странички следует выбрать лишь нужный нам элемент. Для этого достаточно через пробел указать селектор:

// в элемент с id="content" будет вставлен HTML с указанной страницы,
// но не весь, а только выбранный по указанному селектору тег main
$("#content").load("example.html main");

По окончании загрузки мы можем вызвать произвольную функцию для обработки подгружаемого HTML. Вот только данная функция сработает лишь после того, как контент будет добавлен в целевой элемент, а мне бы хотелось этим процессом управлять:

// обрабатываем полученные данные
$("#content").load("example.html main", function(data) {
    // ничего оригинальней не придумал
    alert("Мы загрузили HTML длиной в " + data.length + " символов");
});

Если вам надо передать на сервер какие-либо данные, то это можно легко сделать следующим образом:

// передаём данные на сервер вторым параметром
// вот только сервер наш их никак не обрабатывает
// но вы можете увидеть данные в консоли, в отправленных запросах
$("#content").load("example.html main", { id: 42 });

Из моего опыта работы – вам очень часто придётся пользоваться методом load() как описано в первом примере. А ещё советую запомнить второй пример, он может выручить, когда надо реализовать загрузку через AJAX, а доступа к сервер-сайду у вас нет или он ограничен.