Подводные камни .load() и .get()

Очень часто возникает потребность в подключении каких-либо шаблонов или какого-либо контента из другого файла. К сожалению, не все могут воспользоваться функцией inlude в PH из-за ограниченности возможностей хостинга. Отсюда возникает потребность к обращению AJAX функций .load() и .get().

Свойства

.load() — Загрузка данных с сервера и размещение возвращаемого HTML в указанный элемент.

url
Типа: Строка
Строка, содержащая URL, к которому направляется запрос.
Данные

Тип: Объект или Строка
Простой объект или строка, которая отправляется на сервер с запросом.

Функция «выполнено»

Тип: Функция( Строка responseText, Строка textStatus, jqXHR jqXHR )
Функция обратного вызова, которая выполняется, когда запрос завершается

.get() — Загрузка данных с сервера, используя запрос HTTP GET.

url
Типа: Строка
Строка, содержащая URL, к которому направляется запрос.

Данные

Тип: Объект или Строка
Простой объект или строка, которая отправляется на сервер с запросом.

Функция «выполнено»

Тип: Функция( Строка responseText, Строка textStatus, jqXHR jqXHR )
Функция обратного вызова, которая выполняется, когда запрос завершается.

Тип данных

Тип: Строка
Тип данных, ожидаемых от сервера. По умолчанию: Intelligent Guess (XML, JSON, script или HTML).

Таким образом мы получаем почти одинаковые функции за исключением одного НО , который пришел с опытом. Если мы хотим подключить содержимое файла и не более того, например содержимое файла head.html, и поместить его в секцию , то обе функции дадут нам один и тот же результат. Но если нам надо дополнять содержимое секций(head, div), то есть если мы уже имеем какой-то контент, то тут функция .load() заменит полностью содержимое блока, а при любой попытки использовать функции JQUEY для дополнения, например получить текст и сделать html() + …, то результатом будет вечное зацикливание дописанных функций.

Когда в то же время функция .get() работает с остальными функциями (.append(), .html()) уже разумно и не вызывает зацикливание. Но то же не стоит забывать, что по умолчанию .get() заменяет контент полностью, а если использовать в функции success() appen(), то код дополниться.

Пример

.load()

$('article').each(function () { $(this).load("template/head.html"); // загрузит в страницу и заменит код блока article }); 

.get()

$('article').each(function () { $(this).get("template/head.html"); // загрузит в страницу и заменит код блока article }); 

.load()

$('article').each(function (i, elem) { $(this).load("template/head.html", function (data) { $(elem).append(data); }); // загрузит в страницу и дополнит код head, вызвав зацикливание break, continue не помогут }); 

.get()

$('article').each(function (i, elem) { $(this).get("template/head.html", function (data) { $(elem).append(data); }); // загрузит в страницу и дополнит код head }); 

.load() — функция для обращение больше к PHP скриптам из HTML файла;
.get() — функция для общение между HTML файлами или для получения дополняемого контента файла.

ссылка на оригинал статьи https://habrahabr.ru/post/280298/