60% AJAX

Что такое AJAX, я, думаю, рассказывать не стоит, ибо с приходом веб-два-нуля большинство пользователей уже воротят носом от перезагрузок страниц целиком, а с появлением jQuery реализация упростилась в разы…

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

url – запрашиваемой страницы

data – передаваемые данные (необязательный параметр)

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

Теперь на примерах.

Подгрузим на подопытную страницу информацию со странички html.example.html:

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

▷

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

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

▷

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

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

▷

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

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

▷

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

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