Подключение jquery библиотеки от cdn google
Содержание:
- Подключение jQuery на страницы своего сайта с внешних источников
- Плюс: простой доступ к странице
- Проверить, правильно ли подключён jQuery
- чтобы правильно подключить jQuery библиотеку от CDN Google
- How to use jQuery CDN
- link jQuery Migrate Plugin
- About Browser Support
- Current Active Support
- Плюс: кроссбраузерность
- Минус: нет понимания технологии
- jQuery Easy
- link Downloading jQuery using Bower
- Минус: вы контролируете не всё
- Commonly Used jQuery Event Methods
- CDN при подключении jQuery в WordPress
- link jQuery Migrate Plugin
- More Examples of jQuery Selectors
- A Callback Function for text(), html(), and val()
- Создаем обобщенный запрос AJAX с помощью $.ajax()
- Минус: много всего
Подключение jQuery на страницы своего сайта с внешних источников
Данный способ хорош тем, что библиотека подключается с сайта и не валяется на жестком диске. Особенно это актуально при большом количестве маленьких проектов и для обучения.
Этот способ подключения называется «Подключение с CDN». Сеть доставки контента или как ее чаще называют CDN (Content Delivery Network) является сетью серверов по всему миру. Они помогают улучшить производительность вашего веб-сервера и уменьшают нагрузку на ваш трафик.
Наиболее популярные CDN для подключения jQuery:
- jQuery CDN
- CDNJS CDN
Я обычно использую подключение от Google Developers. На странице проекта для нас уже подготовлены несколько сниппетов, достаточно скопировать строчку нужного нам и подключить ее в файл. При таком способе подключения код будет выглядеть так:
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Заголовок сайта</title>
<script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js»></script>
</head>
<body>
</body>
</html>
|
1 |
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Заголовоксайта<title> <script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js»></script> <head> <body> <body> <html> |
Преимуществом данного способа, является то, что многие сайты подключают jQuery через Google API, а это значит, что с большой долей вероятности эта библиотека уже присутствует в кэше браузера пользователя, и она не будет загружаться второй раз вообще.
Плюс: простой доступ к странице
В чистом JavaScript обратиться к объекту на странице можно одним из способов:
document.getElementById(«myElement»)document.getElementsByTagName(«td»)document.getElementsByClassName(«myClass»)
и еще несколько подобных
В jQuery то же самое делает одна прекрасная команда. Заодно она же совмещает в себе кучу других функций. Фактически она говорит jQuery: «Возьми ЭТО и сделай с ним что-то»:
$(«myElement»)
Поэтому какие-то простые манипуляции с объектами на странице выглядят элегантнее именно с jQuery. Это не значит, что их нельзя делать с простым JavaScript — можно. Но это не так красиво.
Пример манипуляции с объектами
Представьте, что у нас есть страница, на которой есть важные плашки. Такие же, как на этой, и у всех задан класс “SomeClass”. И в зависимости от времени суток, браузера или настроения программиста сайт должен эти плашки скрывать, добавлять новые или как-то их менять. Вот, что можно, к примеру, с ними делать:
удалять все плашки:
var $elem = $(«.SomeClass») //Выбираем элементы.
$elem.remove(); //Удаляем их.
добавлять новые:
$elem.prepend($someOtherElem);
вставлять ещё одни перед ними:
$elem.before($someOtherElem);
заменять их на что-то другое:
$elem.replaceWith($someOtherElem);
и просто плавно показывать на экране:
$elem.fadeIn();
Проверить, правильно ли подключён jQuery
Проверить, что jQuery загружен браузером и работает нормально, можно несколькими способами. Во-первых, можно написать скрипт, который будет что-то делать с помощью jQuery. Пример такого скрипта может быть:
<script type="text/javascript">
$(document).ready(function(){
$(''body'').append(''<br/>Этот текст добавлен с помощью jQuery'');
});
</script>
Этот код выполняется, когда страница будет полностью загружена (это обеспечивается методом ready). К содержимому тега BODY добавляется ещё некое содержимое с помощью функции append. Подробнее я описывать не буду, так как в этой статье я всего лишь пытаюсь рассказать о подключении jQuery.
Ещё один способ проверить, что jQuery работает, это использовать консоль, которая есть в расширении Firebug для Firefox. Выглядит она так:
Можно написать туда какую-либо команду JavaScript, в которой будет использоваться функциональность jQuery, например:
alert($(''body'').html());
Или же выполнить такой вот-код, который выводит в консоль версию jQuery:
if ($ === undefined) {
console.log(''jQuery не подключён.'');
} else {
console.log(''Версия jQuery: '' + $.fn.jquery);
}
чтобы правильно подключить jQuery библиотеку от CDN Google
Возможные варианты Redirect 301
…нужно знать и помнить, что в ядре вордпресс теперь возможны варианты подключения jquery… пара функций — наиболее распространённая эта .
…метод просто необходим для использования! и он хорош тем, что, например, исключает конфликты с подключенными некими плагинами библиотек jQuery (конфликтных версий или одноимённых!)…
Это общие правила и порядок… а порядок — это здорово))
Однако, при всём при этом, у многих владельцев сайтов подключения библиотек выполнены кустарно: или напрямую (видал и такое — хотя это и не самый скверный вариант) или каким-то неведомым скриптом, внедряющим мета-строку в для подгрузки библиотеки.
…хотя, сейчас, этот процесс подключения автоматизирован… так что не буду об этом…
Короче, если открыть исходный код, то в большинстве случаев будет так (вариант WP):
— можно исключить из строки: валидаторы и нынешние правила позволяют…
Итак, чтобы подключить библиотеку, правильнее использовать функцию, о которой говорилось выше.
Преимущества: если подобная библиотека используется плагинами, то никаких повторных (а следовательно — времязатратных) подключений не будет! Библиотека подключиться только один раз! это важно!
1 — файл библиотеки принимается/отдаётся в сжатом его виде…
2 — а, главное, то, что если посетитель уже был на каком-то сайте где использовано подобное подключение, то его кэш-браузера будет хранить эту самую библиотеку, и отдаст при случае «нам»: т.е процесс загрузки сократится вдвое, ибо это даже не близко расположенный сервер… а тут же!
3 — немаловажно: файл библиотеки jQuery подгружается в отдельном потоке (загрузки полной страницы)
How to use jQuery CDN
Normally we all first download & put the jQuery file in the website’s folder. Then we reference this file on the page head section.
<head>
<script src="files/jquery-3.2.1.min.js"></script>
</head>
Instead we can use jQuery CDN by just providing the link of jQuery directly from Google, Microsoft, CloudFlare, etc.
So when using jQuery from the jQuery’s own CDN, you can do:
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
Notice the src path that links to jQuery file from code.jquery.com domain.
Ads: For additional local iphone repair Knoxville visit ubreakifix.
jQuery CDN hosted by Google
In the same way we can use jQuery CDN hosted by Google, as shown below:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
jQuery CDN hosted by Microsoft
Microsoft also hosts jQuery and this CDN is used below:
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
</head>
jQuery CDN hosted by CloudFlare
CloudFlare is a great CDN and also very popular too. It also has jQuery CDN which you can use in your website.
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
If you want to learn and understand all about the CloudFlare CDN technology then visit – How does CloudFlare works?. You can also host your full website in CloudFlare free of charge.
link jQuery Migrate Plugin
We have created the
to simplify the transition from older versions of jQuery. The plugin restores deprecated features and behaviors so that older code will still run properly on newer versions of jQuery. Use the uncompressed development version to diagnose compatibility issues, it will generate warnings on the console that you can use to identify and fix problems. Use the compressed production version to simply fix compatibility issues without generating console warnings.
There are two versions of Migrate. The first will help you update your pre-1.9 jQuery code to jQuery 1.9 up to 3.0. You can get that version here:
The second version helps you update code to run on jQuery 3.0 or higher, once you have used Migrate 1.x and upgraded to jQuery 1.9 or higher:
About Browser Support
jQuery is constantly tested with all of its supported browsers via unit tests. However, a web page using jQuery may not work in the same set of browsers if its own code takes advantage of (or falls prey to) browser-specific behaviors. Testing is essential to fully support a browser. The Microsoft Edge Developer site makes available virtual machines for testing many different versions of Internet Explorer. Older versions of other browsers can be found at oldversion.com.
Only the most current version of jQuery is tested and updated to fix bugs or add features. Users of older versions that find a bug should upgrade to the latest released version to determine if the bug has already been fixed. The may be helpful in identifying and fixing problems during a version upgrade.
Current Active Support
Desktop
- Chrome: (Current — 1) and Current
- Edge: (Current — 1) and Current
- Firefox: (Current — 1) and Current, ESR
- Internet Explorer: 9+
- Safari: (Current — 1) and Current
- Opera: Current
Mobile
- Stock browser on Android 4.0+
- Safari on iOS 7+
Workarounds for Android Browser 4.0-4.3 are present in the code base, but we no longer actively test these versions.
Any problem with jQuery in the above browsers should be reported as a bug in jQuery.
(Current — 1) and Current denotes that we support the current stable version of the browser and the version that preceded it. For example, if the current version of a browser is 24.x, we support the 24.x and 23.x versions.
Firefox ESR (Extended Support Release) is a Firefox version for use by organizations including schools, universities, businesses and others who need extended support for mass deployments. It is based on a regular release of Firefox and synced from the next regular Firefox every few releases — example ESR versions include Firefox 47, 52 & 60. At any given time there are at most two ESR versions available; jQuery supports both of them. See the Mozilla site for more information.
If you need to support older browsers like Internet Explorer 6-8, Opera 12.1x or Safari 5.1+, use .
Плюс: кроссбраузерность
Многие пользователи используют старые браузеры, например Internet Explorer 11. Они это делают не потому, что не знают, как обновиться, а потому что на работе админ запретил установку любого софта; или в госучереждениях давно не обновляли компьютеры.
Тут и спасает jQuery: разработчики сами предусмотрели поддержку старых браузеров. Например, вот как может выглядеть проверка на версии Intertet Explorer:
И такие условные блоки есть для всех старых версий IE.
Если всё настолько круто, как здесь написано, то все должны уже были давно перейти на jQuery и забыть про JavaScript, но этого не происходит. Более того, у jQuery есть свои существенные минусы и ограничения.
Минус: нет понимания технологии
Чрезмерное увлечение jQuery может привести к тому, что программист просто не будет понимать, как работают механизмы у него на странице и не сможет их исправить, если что-то пойдёт не так.
Например, программист прикрутил на страницу какой-то эффект на базе jQuery. Потом еще один, и они начали конфликтовать. Если программист не может разобраться в устройстве этих библиотек, он не сможет разрешить конфликт — а для этого нужно понимать чистый javaScript и уметь отлаживать код.
Получается, что знать jQuery всё-таки полезно, но нужно понимать, когда без него можно обойтись.
Скоро возьмем эту библиотеку за основу и сделаем какой-нибудь полезный проект. Подписывайтесь, мы напишем, когда что-нибудь такое выйдет.
jQuery Easy
Еще один метод подключения – это использование плагина jQuery Easy. Он обеспечит noconflict подключение и работу библиотеки, чтобы в Joomla не возникало каких-либо противоречий при использовании двух фреймворков. Если вы никогда не решали проблемы, связанные с noconflict в коде, тогда вы буквально обязаны себя выручить, установив специальный плагин Easy jQ.
Причины возникновения конфликтных ситуаций в коде могут быть разные
К примеру, вы могли установить очередное расширение, не особо обратив внимание на совместимость его с библиотеками. После активации такого дополнения обязательно возникнет противоречие в коде – Easy jQ вам поможет
Аналогично инструмент Easy jQ выручит вас, если возникли какие-то стычки jQuery с библиотекой MooTools. В любом случае плагин Easy jQ восстановит положение noconflict – конфликты будут устранены и Joomla заработает нормально.
Установка библиотек на Joomla при помощи плагина происходит в автоматическом режиме при помощи возможностей поисковика Гугл. Но с расширением делать это лучше, так как он добавляет на сайт библиотеки с кодом noconflict. Эта функция noconflict является профилактикой для устранения возможных противоречий в работе двух библиотек. Если бы вы не использовали плагин, тогда бы вам пришлось вручную прописывать в коде тег noconflict. А теперь представьте, как бы вам это было “легко” сделать, если вы используете сжатую версию. Но не стоит жертвовать скоростью работы библиотек, ради того, чтобы иметь возможность вписать noconflict вручную – лучше сразу установите на сайт Easy jQuery.
Тем более, что инструмент Easy jQ можно будет гибко настроить. К примеру, есть возможность активировать его только для отдельных страниц сайта. Так вы еще больше ускорите работу ресурса. Вы сможете настроить работу различных библиотек, а также их стили отображения. Чтобы еще больше увеличить скорость загрузки, можно будет изменить способ закачивания файлов на сайт. Но самое главное – это то, что вам будет очень легко подключить любую доступную версию библиотек. После установки фреймворка вы сможете обновлять версии и удобно переключаться между ними в настройках плагина.
link Downloading jQuery using Bower
jQuery is also registered as a package with Bower. You can install the latest version of jQuery with the command:
|
1 |
This will install jQuery to Bower’s install directory, the default being . Within you will find an uncompressed release, a compressed release, and a map file.
The jQuery Bower package contains additional files besides the default distribution. In most cases you can ignore these files, however if you wish to download the default release on its own you can use Bower to install jQuery from one of the above urls instead of the registered package. For example, if you wish to install just the compressed jQuery file, you can install just that file with the following command:
|
1 |
Минус: вы контролируете не всё
Если вам нужен максимальный контроль за всем, что происходит на сайте, то лучше использовать чистый JavaScript. В этом случае вы полностью уверены в том, как ведёт себя страница, и не зависите от стороннего кода.
Если используете редкий плагин, есть риск, что он может не работать настолько надёжно, как вам нужно. К тому же, не все сторонние плагины так же хорошо оптимизированы, как сам jQuery: в итоге у вас ради какого-то одного эффекта или блока на странице появится огромная библиотека, которая будет всё страшно замедлять.
Commonly Used jQuery Event Methods
$(document).ready()
The method allows us to execute a function when the
document is fully loaded. This event is already explained in the
jQuery Syntax chapter.
click()
The method attaches an event handler function to an HTML element.
The
function is executed when the user clicks on the HTML element.
The following example says: When a click event fires on a element; hide
the current element:
$(«p»).click(function(){
$(this).hide();
});
dblclick()
The method attaches an event handler function to an HTML element.
The function is executed when the user double-clicks on the HTML element:
$(«p»).dblclick(function(){
$(this).hide();
});
mouseenter()
The method attaches an event handler function to an HTML
element.
The function is executed when the mouse pointer enters the HTML element:
$(«#p1»).mouseenter(function(){
alert(«You entered p1!»);
});
mouseleave()
The method attaches an event handler function to an HTML
element.
The function is executed when the mouse pointer leaves the HTML element:
$(«#p1»).mouseleave(function(){
alert(«Bye! You now leave p1!»);
});
mousedown()
The method attaches an event handler function to an HTML
element.
The function is executed, when the left, middle or right mouse button is pressed down, while the
mouse is over the HTML element:
$(«#p1»).mousedown(function(){
alert(«Mouse down over p1!»);
});
mouseup()
The method attaches an event handler function to an HTML
element.
The function is executed, when the left, middle or right mouse button is released, while the
mouse is over the HTML element:
$(«#p1»).mouseup(function(){
alert(«Mouse up over p1!»);
});
hover()
The method takes two functions and is a combination of the and
methods.
The first
function is executed when the mouse enters the HTML element, and the second
function is
executed when the mouse leaves the HTML element:
$(«#p1»).hover(function(){
alert(«You entered p1!»);
},
function(){
alert(«Bye! You now leave p1!»);
});
focus()
The method attaches an event handler function to an HTML form field.
The function is executed when the form field gets focus:
$(«input»).focus(function(){
$(this).css(«background-color», «#cccccc»);
});
blur()
The method attaches an event handler function to an HTML form field.
The function
is executed when the form field loses focus:
CDN при подключении jQuery в WordPress
- Файл отдается в сжатом виде и весит меньше.
- Если посетитель уже заходил на сайт где jQuery подключался также, то в его кэше уже есть этот скрипт и он вообще не будет загружаться, при посещении вашего сайта. Читал в сети аналитическо-статистическую статью на эту тему — порядка 15-20% сайтов используют подключение CDN Google для jQuery и этот показатель растет.
- Файл подгружается в отдельный поток.
Чтобы подключить jQuery с CDN Google, нужно сначала отметить уже зарегистрированный в WordPress скрипт jQuery и зарегистрировать его еще раз с новым адресом. Делается это путем добавления в такого кода:
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method() {
// отменяем зарегистрированный jQuery
// вместо "jquery-core", можно вписать "jquery", тогда будет отменен еще и jquery-migrate
wp_deregister_script( 'jquery-core' );
wp_register_script( 'jquery-core', '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
wp_enqueue_script( 'jquery' );
}
В результате мы получим такие строки в head части документа:
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script> <script type='text/javascript' src='http://example.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
Здесь означает, что заменяется ссылка на сам скрипт jQuery и не затрагивается дополнительный скрипт , который нужен для перехода к версии jQuery 1.9.x, с ранних версий.
Подключение плагина означает, что если у вас есть ошибки несовместимости с версией 1.9.x (т.е. ваш код был написан под более ранние версии), jQuery продолжит работать, а ошибки можно будет исправить по мере выявления.
Если не нужен, а нужен только jQuery, то используйте такой код для подключения jQuery:
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method() {
// отменяем зарегистрированный jQuery
wp_deregister_script('jquery-core');
wp_deregister_script('jquery');
// регистрируем
wp_register_script( 'jquery-core', 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', false, null, true );
wp_register_script( 'jquery', false, array('jquery-core'), null, true );
// подключаем
wp_enqueue_script( 'jquery' );
}
Тут отменив jquery мы автоматически отменяем привязку mirgate к jQuery. В результате получим только такую строку:
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
true в конце значит, что скрипт, по возможности, будет подключен в подвал сайта.
Если есть другие скрипты которые подключаются в head часть и зависят от jQuery, то несмотря на последний аргумент true, все равно будет подключен в head часть документа, что логично…
Пример ниже показывает, как подключить jQuery той версии, которая используется в WordPress, но с сервиса CDN:
add_action( 'wp_enqueue_scripts', 'my_scripts_method', 99 );
function my_scripts_method() {
// получаем версию jQuery
wp_enqueue_script( 'jquery' );
// для версий WP меньше 3.6 'jquery' нужно поменять на 'jquery-core'
$wp_jquery_ver = $GLOBALS->registered->ver;
$jquery_ver = $wp_jquery_ver == '' ? '1.11.0' : $wp_jquery_ver;
wp_deregister_script( 'jquery-core' );
wp_register_script( 'jquery-core', '//ajax.googleapis.com/ajax/libs/jquery/'. $jquery_ver .'/jquery.min.js' );
wp_enqueue_script( 'jquery' );
}
Статьи до этого: jQuery
- Символ табуляции (\t) в textarea при нажатии TAB на клавиатуре
- Динамический архив блога с использованием jQuery (Ajax)
- Кнопка «Наверх» с плавным прокручиванием
Статьи до этого: Оптимизация
- Отключаем создание копий картинок в WordPress
- SHORTINIT константа: WordPress среда с минимальной нагрузкой
Статьи до этого: Теория WordPress (базовые знания)
- Must-Use плагины в WordPress
- API настроек (опций)
- SHORTINIT константа: WordPress среда с минимальной нагрузкой
link jQuery Migrate Plugin
As with the major changes made in jQuery 1.9/2.0, we have created a new version of the to simplify migration of older code to version 3.0. We strongly recommend that you use this plugin as an upgrading tool, it will give specific advice about most of the major changes that may affect your code.
does not warn about or restore behaviors that were removed in previous major version changes such as jQuery 1.9/2.0. Use the following steps to upgrade from a version of jQuery older than 1.11.0 or 2.1.0 to this new version 3.0:
- Upgrade the version of jQuery on the page to the latest 1.x or 2.x version.
- Add the uncompressed to the page.
- Optional but recommended, update any plugins in use since later versions are usually the most compatible with recent versions of jQuery.
- Test the page and resolve any warnings that appear on the console, using the JQMIGRATE 1.x warning documentation as a guide.
- Remove the jQuery Migrate 1.x plugin and ensure that the updated jQuery code on the page continues to work properly with only the latest jQuery 1.x/2.x in use.
- Upgrade the version of jQuery on the page to the latest 3.x version and add the uncompressed to the page.
- Test the page and resolve any warnings that appear on the console, using the JQMIGRATE 3.x warning documentation as a guide. Report any bugs in third-party plugins to the plugin author.
- Remove the jQuery Migrate 3.x plugin and ensure that the page continues to work properly with only the latest jQuery 3.x in use.
Running both Migrate 1.x and Migrate 3.x simultaneously on the same page is not supported.
The uncompressed development version of the Migrate plugin includes console log output to warn when specific deprecated and/or removed features are being used. This makes it valuable as a migration debugging tool for finding and remediating issues in existing jQuery code and plugins.
The compressed version of the Migrate plugin does not generate any warnings, although it does issue a solitary console message that it has been installed to simplify debugging. Migrate can be used on production sites when jQuery 3.0 or higher is desired but older incompatible jQuery code or plugins must also be used. Ideally this is only used as a short-term solution, since restoring old behavior may cause conflicts with new jQuery code that expects the new behavior.
More Examples of jQuery Selectors
| Syntax | Description | Example |
|---|---|---|
| $(«*») | Selects all elements | Try it |
| $(this) | Selects the current HTML element | Try it |
| $(«p.intro») | Selects all <p> elements with class=»intro» | Try it |
| $(«p:first») | Selects the first <p> element | Try it |
| $(«ul li:first») | Selects the first <li> element of the first <ul> | Try it |
| $(«ul li:first-child») | Selects the first <li> element of every <ul> | Try it |
| $(«») | Selects all elements with an href attribute | Try it |
| $(«a») | Selects all <a> elements with a target attribute value equal to «_blank» | Try it |
| $(«a») | Selects all <a> elements with a target attribute value NOT equal to «_blank» | Try it |
| $(«:button») | Selects all <button> elements and <input> elements of type=»button» | Try it |
| $(«tr:even») | Selects all even <tr> elements | Try it |
| $(«tr:odd») | Selects all odd <tr> elements | Try it |
Use our jQuery Selector Tester to demonstrate the different selectors.
For a complete reference of all the jQuery selectors, please go to our jQuery Selectors Reference.
A Callback Function for text(), html(), and val()
All of the three jQuery methods above: , ,
and , also come with a callback function. The callback function has two
parameters: the index of the current element in the list of elements selected
and the original (old) value. You then return the string you wish to use as the
new value from the function.
The following example demonstrates and with a callback
function:
Example
$(«#btn1»).click(function(){
$(«#test1»).text(function(i, origText){
return «Old text: » + origText + » New text: Hello world!
(index: » + i + «)»;
});
});
$(«#btn2»).click(function(){
$(«#test2»).html(function(i, origText){
return «Old html: » + origText + » New html: Hello
<b>world!</b>
(index: » + i + «)»;
});
});
Создаем обобщенный запрос AJAX с помощью $.ajax()
Высокоуровневые методы AJAX, которые мы рассмотрели ранее (, , , и открывают простой и легкий путь к использованию общих типов запросов AJAX в своих приложениях. Но иногда требуется более сильный контроль над запросом, или нужно решить задачу, которая недоступна высокоуровневым методам.
В такой ситуации нужно использовать низкоуровневый метод jQuery . Вызов метода делает AJAX запрос к указанному URL. Обобщенный синтаксис вызова следующий:
$.ajax( url );
Аргумент является адресом URL к которому производится запрос, а является опциональным объектом, который содержит различные значения, которые определяют, как запрос будет выполняться.
Параметры, которые можно использовать с методом :
| Параметр | Описание | Значение по умолчанию |
|---|---|---|
| Устанавливаем значение , чтобы разрешить кеширование ответа от сервера, или значение чтобы всегда производить запрос. Значение также принуждает jQuery добавлять случайное число к запросу для предотвращения кеширования.. | (, когда используется со значениями и параметра ) | |
| Задает возвратную функцию, которая выполняется по завершению запроса (независимо от успешности операции). | Нет | |
| Данные, которые пересылаются на сервер в запросе. | Нет | |
| Ожидаемый тип данных ответа. Дополнительно можно использовать значение для выполнения запроса JSONP. | Автоматическое определение данных | |
| Задает возвратную функцию, которая выполняется. если запрос завершился ошибкой. | Нет | |
| Дополнительный заголовок HTTP , который отправляется вместе с запросом в виде пар ключ/значение. | ||
| Пароль, который используется, если сервер HTTP требует аутентификации. | Нет | |
| Задает возвратную функцию, которая выполняется, если запрос завершается успешно. | Нет | |
| Время ожидания (в миллисекундах) завершения запроса AJAX. Значение 0 означает, что jQuery будет ждать без ограничения во времени. | ||
| Тип запроса: или . | ||
| Имя пользователя, если сервер HTTP требует аутентификации. | Нет |
Полный список параметров приводится в документации jQuery.
Изменим наш пример для использования метода . Мы можем для нашего прогноза отказаться от кеширования и будем обрабатывать ошибки. Вот модифицированный код страницы :
<!doctype html>
<html lang="ru">
<head>
<title>Прогноз погоды</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$( function() {
$('#getForecast').click( function() {
var data = { city: "Васюки", date: "20120318" };
$.ajax( "getForecast.txt", {
cache: false,
data: data,
dataType: "json",
error: errorHandler,
success: success
} );
} );
function success( forecastData ) {
var forecast = forecastData.city + ". Прогноз на " + forecastData.date;
forecast += ": " + forecastData.forecast + ". Максимальная температура: " + forecastData.maxTemp + "C";
alert( forecast );
}
function errorHandler() {
alert( "Есть проблемы с получением прогноза. Наверно, Васюки смыло в море." );
}
} );
</script>
</head>
<body>
<button id="getForecast">Получить прогноз погоды</button>
<div id="forecast"></div>
</body>
</html>
Запускаем код демонстрации и наслаждаемся результатом.
В данном примере мы используем метод для генерации запроса AJAX. Мы передаем URL в запрос () вместе со списком опций. Три из данных опций (, и ) соответствуют аргументам, которые мы передаем в метод . Остальные два ( и ) отключают кеширование и устанавливают функцию обработки ошибок
Функция просто выдает сообщение об ошибке пользователю.
Минус: много всего
Подключать целую библиотеку ради одного эффекта — не самая лучшая идея. Иногда проще потратить лишних пять минут и сделать то же самое на JavaScript, чем тащить в проект лишних 64 килобайта кода.
Например, чтобы однократно вызвать обработчик события, можно подключить jQuery и написать так:
$elem.one(«click», someFunc);
А можно ничего не подключать и использовать простой JavaScript, который уже научился делать то же самое через третий, необязательный, параметр в addEventListener:
elem.addEventListener(‘click’, someFunc, { once: true, });
