Урок - .load()

Группа вКонтакте
Лицензия: Лицензия Creative Commons.

Метод jQuery.load() позволяет получить с сервера HTML-код и вставить в указанное место на странице.

Синтаксиси метода jQuery.load().

.load( url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ] )

где

  • url - строка, содержит URL запроса, для отправки данных.
  • data - строка или Plain-объект (ассоциативный массив), данных для отправки на сервер.
  • complete(data, textStatus, jqXHR) - функция обратного вызова, вызывается когда запрос выполнен.

Примечание: При обработке собыйти также есть метод .load(). jQuery определяет разницу в зависимости от набора аргументов.

Метод jQuery.load() является самым простым способом получения данных с сервера. Метод jQuery.load() эквивалентен методу jQuery.get(url, data, success) кроме того, что это метод, а не глобальная функция и имеет не явную функцию обратного вызова. после успешного ответа (т.е. когда  textStatus равен "success" или "notmodified") метод jQuery.load() вставляет полученный HTML-код в указанные элементы. Это означает, что в большинстве случаев применение метода может быть довольно простым:

$('#result').load('ajax/test.html');

Если элементы указанные в селекторе не найдены на странице (в примере выше это элемент с id="result"), то запрос не будет отправлен.

Функция обратного вызова

Если обратный вызов "complete" определен, то он выполняется после пост-обработки и после вставки HTML-кода. Complete вызывается один раз для каждого элемента в коллекции jQuery и this устанавливается в соответсвии с очередным DOM-элементом.

$('#result').load('ajax/test.html', function() {
    alert('Load was performed.');
});

Получение части страницы

Метод jQuery.load() в отличие от jQuery.get(), позволяет указать какую часть получаемого HTML-документа следует вставить в текущую страницу. Это достигается с помощью специального синтаксиса  для параметра URL. Если в строку вклюячены один или несклько пробелов, то  значение после первого пробела рассматривается jQuery как селектор который указывает на содержание из получаемого HTML-документа.

Мы можем изменить приведенный выше пример, чтобы использовать только часть HTML-документа:

jQuery('#result').load('ajax/test.html #container');

При получении содержимого HTML-страницы ajax/test.html jQuery анализирует код, чтобы найти элемент с id="contaner". Этот элемент вместе с его содержимым вставляется в элемент с id="result" текщей страницы, а остальные данные игнорируются.

jQuery использует свойство браузеров innerHTML для разбора полученного документа и вставки его в текущий документ. Во время этого процесса, браузеры часто фильтруют некоторые элементы документа, такие как <html>, <title> и <head>. В результате, элементы извлекаемые jQuery.load() не могут быть точно такими же, как если бы указанная страница была получена непосредственно в браузере.

Выполенение скриптов.

При вызове метода jQuery.load() используя URL без суфикса выражение селктора, содержимое передается в метод jQuery.html() до удаления скриптов. Он выполняет блоки скриптов, до их отключения. Если метод jQuery.load() вызывается с селектором добавленным в URL, то скрипты вырезаются до обновления DOM и следовательно не выполняются. Примеры обоих случаев смотрите ниже:

В этом примере скрипты будут загружены в элемент с id="a" и как часть документа будет выполнен.

jQuery('#a').load('article.html');

Тем не менее в следующем примере блоки скриптов загружаемые в элемент с id="b" удаляются, и не выполняются.

jQuery('#b').load('article.html #target');

Дополнительное примечание.

  • Из-за ограничений безопасности браузеров, большинство AJAX-запросов ограничены той же политикой безопасности. AJAX-запросы не могут успешно извлекать информацию из других доменов, поддоменов или протоколов.

Примеры

Пример: Загрузка подножия главной страницы в список.

<!DOCTYPE html>
<html>
    <head>
        <style>
            body{ font-size: 12px; font-family: Arial; }
        </style>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head>
    <body>
        <b>Footer navigation:</b>
        <ol id="new-nav"></ol>
        <script>
            $("#new-nav").load("/ #jq-footerNavigation li");
        </script>
    </body>
</html>

Пример: Отобразить сообщение об ошибке, если при Ajax-запросе возникла ошибка.

<!DOCTYPE html>
<html>
    <head>
        <style>
            body{ font-size: 12px; font-family: Arial; }
        </style>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head>
    <body>
        <b>Successful Response (should be blank):</b>
        <div id="success"></div>
        <b>Error Response:</b>
        <div id="error"></div>
        <script>
            $("#success").load("/not-here.php", function(response, status, xhr) {
                if (status == "error") {
                    var msg = "Sorry but there was an error: ";
                    $("#error").html(msg + xhr.status + " " + xhr.statusText);
                }
            });
        </script>
    </body>
</html>

Пример: Загружаем файл feeds.html в div с id="feeds".

$("#feeds").load("feeds.html");

Пример: Передача данных в видже массива на сервер.

$("#objectID").load("test.php", { 'choices[]': ["Jon", "Susan"] } );

Пример: Передача данных в видже массива на сервер, с добавлением обработчика завершения запроса.

$("#feeds").load("feeds.php", {limit: 25}, function(){
    alert("The last 25 entries in the feed have been loaded");
});