Функция jQuery ajax () — это абстракция самого низкого уровня
Функция jQuery ajax() — это самый низкий уровень абстракции, доступный для XMLHttpRequests (он же AJAX ). Все остальные функции jQuery AJAX, такие как load() , используют функцию ajax() . Использование функции ajax() обеспечивает максимальную функциональность, доступную для XMLHttpRequests . jQuery также предоставляет другие высокоуровневые абстракции для выполнения очень специфических типов XMLHttpRequests . Эти функции по сути являются ярлыками для метода ajax() .
Эти быстрые методы:
Суть в том, что хотя ярлыки иногда хороши, все они используют ajax() за кулисами. И, когда вам нужны все функции и настройки, которые предлагает jQuery, когда дело доходит до AJAX, вам следует просто использовать метод ajax() .
Примечания. По умолчанию функции ajax() и load() AJAX используют протокол GET HTTP.
JQuery поддерживает междоменный JSONP
JSON with Padding ( JSONP ) — это метод, который позволяет отправителю HTTP-запроса, в котором возвращается JSON, предоставить имя функции, которая вызывается с объектом JSON в качестве параметра функции. Эта техника не использует XHR. Он использует элемент script, поэтому данные могут быть перенесены на любой сайт, с любого сайта. Цель состоит в том, чтобы обойти ограничения политики одного источника XMLHttpRequest.
Используя функцию jQuery getJSON() , вы можете загружать данные JSON из другого домена, когда к URL-адресу добавлена функция обратного вызова JSONP. В качестве примера, вот как будет выглядеть URL-запрос с использованием Flickr API.
? значение используется в качестве ярлыка, который сообщает jQuery вызвать функцию, которая передается в качестве параметра функции getJSON() . Вы могли бы заменить ? с именем другой функции, если вы не хотите использовать этот ярлык.
Ниже я использую API-интерфейс Flickr JSONP — самые последние фотографии с тегом «resig». Обратите внимание, что я использую ? ярлык, поэтому jQuery будет просто вызывать функцию обратного вызова, которую я предоставил функцию getJSON() . Параметр, передаваемый в функцию обратного вызова, представляет собой запрошенные данные JSON.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function($){
$.getJSON(«http://api.flickr.com/services/feeds/photos_public.gne?tags=resig&tagmode=all&format=json&jsoncallback=?»,
// Using ?
function (data) { // Data is the JSON object from Flickr
$.each(data.items, function (i, item) { $(‘<img />’).attr(«src», item.media.m).appendTo(‘body’); if (i == 30) return false; });
});
})(jQuery);
</body>
</html>
|
Примечания: Убедитесь, что вы проверяете API службы, которую вы используете, для правильного использования обратного вызова. Например, Flickr использует имя jsoncallback=? тогда как Yahoo! и Digg используют имя callback=? ,
Остановить браузер от кэширования запросов XHR
При выполнении запроса XHR Internet Explorer будет кэшировать ответ. Если в ответе содержится статическое содержимое с длительным сроком хранения, кэширование может быть полезным. Однако, если запрашиваемое содержимое является динамическим и может изменяться с точностью до секунды, вы должны убедиться, что запрос не кэшируется браузером. Одним из возможных решений является добавление уникального значения строки запроса в конец URL-адреса. Это гарантирует, что для каждого запроса браузер запрашивает уникальный URL-адрес.
|
1
2
|
// Add unique query string at end of the URL
url: ‘some?nocache=’+(newDate()).getTime()
|
Другое решение, которое является более глобальным, состоит в том, чтобы настроить все AJAX-запросы по умолчанию, чтобы они содержали логику отсутствия кэширования, которую мы только что обсудили. Для этого используйте функцию ajaxSetup чтобы глобально отключить кэширование.
|
1
2
3
|
$.ajaxSetup({
cache: false // True by default.
});
|
Теперь, чтобы перезаписать этот глобальный параметр отдельными запросами XHR, вы просто измените параметр кэширования при использовании функции ajax() . Ниже приведен кодированный пример выполнения запроса XHR с использованием функции ajax() , которая перезаписывает глобальные настройки и кэширует запрос.
|
1
2
3
4
|
$.ajaxSetup ({
cache: false // True by default.
});
jQuery.ajax({ cache: true, url: ‘some’, type: ‘POST’ } );
|