Новини високих технологій
» » Ajax Success: опис, можливості, інструкція по роботі

Ajax Success: опис, можливості, інструкція по роботі

19-11-2018, 11:09
449
Ajax Success - це засоби завантаження даних з сервера веб-браузер без перезавантаження всієї сторінки. У своїй роботі використовує об'єкт XMLHttpRequest на основі jаvascript для відправки та отримання інформації на сервері асинхронно, у фоновому режимі без втручання користувача. Метод став настільки популярним, що навряд чи знайдеться ще додаток, яке не використовує Ajax. Прикладом деяких широкомасштабних онлайн-додатків, керованих Ajax Success, є: Gmail, Google Maps, Google Docs, YouTube, Facebook, Flickr та інші.

Крос-браузерні можливості

Ajax означає: A – синхронний, jаvascript, A nd X ml. Як видно з позначення, процес використовує jаvascript, точніше скрипт під назвою jquery.js. jQuery - це бібліотека jаvascript. Файл важить всього 96 кбайт, написаний на jаvascript і функціонує з назвою jquery.js, що спрощує програмування jаvascript, надаючи крос-браузерні можливості для вибору і обробки елементів DOM, обробки подій, запиту Ajax Success і анімації.


jQuery дуже популярний. У травні 2015 року файл використовується на 642% усіх веб-сайтів. Серед бібліотек і фреймворків jаvascript частка ринку jQuery становить 952%. Іншими словами, велика частина сучасних розробників працює в jQuery, а не в сирому jаvascript. Переваги jQuery : Підтримка крос-браузера. Тобто один і той же код jQuery запускається в різних браузерах: Chrome, Firefox, IE, Safari і Opera. З іншого боку, для забезпечення крос-браузерної підтримки в необробленому jаvascript необхідно перевірити браузер і видати відповідні коди, оскільки різні браузери (особливо IE) реалізують функції по-різному. Вибір і маніпулювання елементами DOM. «Запит» ставиться до вибору елементів DOM у веб-документі для подальшої маніпуляції. Потужна функція селектора для вибору елементів на основі HTML-тегів назв, наприклад, HTML атрибут ID #debug, ім'я класу CSS .error, у разі застосування Ajax Success error.

Обробка подій

jQuery спрощує обробку подій jаvascript і має спеціальні ефекти і анімацію, адаптує програмування для show/hide, fade-in/fade-out, slide-in /slide-out і користувальницької анімації. Ajax Success надає простий інтерфейс Ajax для відправки асинхронних запитів HTTP GET/POST і обробки відповіді.


За допомогою jQuery можна написати кілька рядків кодів для заміни десятка кодів jаvascript і запускати на всіх браузерах без необхідності окремого тестування на кожному з них. Підтримка крос-браузера особливо важлива для виробництва, так як користувач не може тестувати свої коди jаvascript у всіх браузерах. Jquery, Ajax Success використовують понад 60% веб-сайтів в інтернеті. Для роботи з процесом передбачається, що користувач знайомий з HTML5 CSS3 і jаvascript, які є необхідними передумовами для переходу на jQuery.

Використання jQuery

JQuery має дві версії. Друга версія не підтримує IE <9. Поскольку по-прежнему существует довольно много старых IE (v7, v8), первая версия намного более популярна в производственных системах.
Процес встановлення та налаштування: Завантажити бібліотеку jQuery з сайту. Скопіювати файл jаvascript (наприклад, jquery-1.xx.x.min.js) в кореневий каталог документа, як правило, під підкаталог «js». «min.js» - це міні - версія, призначена для виробництва, яка видаляє додаткові пробіли та коментарі, щоб зменшити розмір файлу для швидкого завантаження. Для тестування і вивчення кодів використовують «.js» версію. Включити в HTML-документ. В HTML4/XHTML1.0 необхідно включити в відкриваючий тег атрибут type = "text/jаvascript". В якості альтернативи замість того, щоб обслуговувати jquery.js сервер, користувач може використовувати одну з CDN (мережа розповсюдження контенту) для обслуговування. Це заощадить частина мережевого трафіку і, ймовірно, забезпечить більш швидку відповідь. Крім того, завантаження jquery.js буде кешуватися для повторного використання: CDN jQuery.com; CDN Google; Microsoft CDN. Деякі користувачі вважають за краще розміщувати jаvascript безпосередньо перед кінцем body ( ) замість розділу для кращої швидкості, також завантажують CSS перед jаvascripts, так як він часто посилається на CSS.

Селектори скрипта і операції

Селектор Jquery, Ajax Success - найважливіша функція jQuery - має спеціальний синтаксис $(). Він може приймати ім'я тега, атрибут id (з префіксом #) або ім'я класу (з префіксом точки). Фактично він підтримує всі CSS-селектори. Порівняно з функціями селектора в jаvascript, JQuery дуже простий і на клас вище. Він приєднує обробник подій, який буде спрацьовувати після того, як дерево DOM побудовано. Подія « » відрізняється від події jаvascript « », яке не чекає завантаження зовнішніх посилань, наприклад, зображень. Ці коди поміщаються в розділ, перш ніж створюються елементи, на які посилаються. Це звичайна практика jQuery:
$(document).ready(handler)readyonloadready() Приклад - селектор jQuery і операції.
Запит в JQuery відноситься до вибору елементів в HTML - документі для подальших маніпуляцій.
Наприклад: $(document) вибирає поточний документ. $(p)вибирає все. Елементи (Tag-Selector). $(#hello)і $(#message) вибирає один елемент з атрибутом id="hello"(ID-Selector). $(.red)вибирає всі елементи, що мають атрибут class="red"(Class-Selector). Фактично $() - це скорочення (псевдонім) для основної jQuery() функції.

Способи керування вмістом елемента

Користувач може використовувати ланцюжка функцій для «Line» і «To», так як більшість функцій повертають елемент, що знаходиться в роботі. У багатьох методах, наприклад, html) jQuery використовує одне і те ж ім'я методу, як для getter, так і для setter, диференціюючи його аргумент. Наприклад, html) без аргументу повертає innerHTML. Документ ready зазвичай використовується в jQuery, який надає скорочений запис, написану як $(function() {}). Види керування вмістом вибраного елемента: html()- отримати innerHTML; html(value)- встановити innerHTML; append(value)- додайте в кінець innerHTML; prepend(value)- додати перед innerHTML; before(element)- додати element перед поточним елементом; after(element)- додати element після поточного елемента; addClass(value), removeClass(value), toggleClass(value)- додати, видалити або переключити значення class атрибута. JQuery створює автоматичну циклічну функцію «Line?» і «to?», наприклад, $('p') вибирає всі елементи. $('p').append() застосовує append() до кожного з обраних елементів в неявному циклі.

Користувач також може використовувати явний цикл через .each(function() {}) (Line? To?), якщо йому потрібно застосувати кілька операцій до вибраних елементів. Всередині .each - $(this) позначає елемент при роботі.

Приклад обробки подій

У цьому прикладі показано, як програмувати обробник подій для дій користувача. Більшість кодів jQuery насправді мають справу з обробниками подій для набору вибраних елементів.
Приклад ілюструє селектор jQuery і вбудовані функції.
Послідовність дій: Вибрати вихідні елементи через відповідний селектор jQuery. Визначити подію, наприклад, клацання мишею, тип ключа. Написати обробник подій і прикласти до джерела. Можна приєднати обробник події до jаvascript, наприклад click, mouseover і submit, до елемента з допомогою методів JQuery. Можна заборонити запуск обробника за замовчуванням, повертаючись з .click(handler).mouseover(handler).submit(handler)false. Всередині функції $(this) посилається на поточний об'єкт. Хоча $(p) повертає елементів в масиві), можна використовувати один і той же синтаксис для прив'язки обробника подій до EACH елементів.
Раніше поміщали обробник подій jаvascript в HTML-теги. Практика в даний час полягає в тому, щоб залишити їх за межами HTML-тегів і згрупувати їх у розділі для кращого дизайну MVC.

Код запиту і відповіді AJAX

Продовження процесу:
Щоб протестувати Success function data Ajax, запускають скрипт веб-сервером, наприклад, Apache : $(:submit) selector selects all $(:text[name="message"]) select Можна використовувати $.ajax() для відправки запиту Ajax: ajax()приймає в якості аргументу асоціативний масив (пар "ключ-значення"); type визначає метод запиту, наприклад, get або post, для Ajax post Success; url вказує URL-адресу дії, за замовчуванням - поточний документ; Data надає рядок запиту у вигляді асоціативного масиву; .done() відправляє назад, коли буде отримано відповідь з кодом стану 200 (OK). В якості аргументу потрібна функція з повідомленням відповіді HTTP; .fail() відправляє назад, коли буде отримано відповідь з кодом стану NO 200 (OK); .always() відправляє назад після того, як .done і .fail завершує. Як аргумент він приймає функцію no-arg.

Основи розширення jаvascript

jQuery - це розширення для jаvascript, яке легко зрозуміти, якщо користувач володіє jаvascript. Йому просто потрібно простежити деякі операції jQuery з допомогою Firebug або інструментів веб-розробника. API jQuery доступний на сайті розробника. В jQuery поміщають операції в handlerunder, який запускається після створення дерева DOM, але перед завантаженням зовнішніх ресурсів, наприклад, зображень, що еквівалентно розміщення сценаріїв jQuery безпосередньо перед тегом закриття. Це ефективніше, ніж у обробника jаvascript. Крім того, можна використовувати кілька для реєстрації декількох обробників, які будуть виконуватися в тому порядку, в якому вони були зареєстровані. jаvascript можна використовувати тільки один раз: $(document).ready( handler )onloadwindow.onload = handler.ready()window.onload = handler Приймає аргумент, який є найбільш часто анонімної функцією або визначеної функції. Функція не має аргументів.
Це так часто використовується, що є стенографія .$(document).ready( handler ) $ ( handler ).

Ітерація через вибрані елементи

Селектор jQuery може вибирати нульові або DOM-елементи. Вибрані елементи обгорнуті всередині об'єкта, так як[0],[1] і т. д. Можна виконувати ітерацію по кожному з цих елементів: Неявна ітерація із застосуванням append() функції для кожного з обраних елементів в неявному циклі. Явна ітерація через .each (function). $ (this). Припустимо, що користувач хоче застосувати серію операцій до кожного з обраних елементів, він може використовувати ітерацію з виділеними елементами. Приймає в якості аргументу функцію, яка може бути анонімною, або вирішеною, або змінною функцією. Всередині функції можна використовувати посилання на елемент, що знаходиться в роботі: .each(function).each()$(this). Крім того, $(this) відноситься до об'єкту jQuery, який перебуває під управлінням, вона також може використовувати this, який відноситься до використовуваного елемента DOM. Тобто: $ (this)[0]=== this І може застосувати методи JQuery, такі як .append(), .html() до $(this), але не this. З іншого боку, він може застосувати операцію DOM this, наприклад, this.id.substring(05), що означає перші п'ять символів атрибута id елемента DOM в процесі роботи.

Написання Ajax із застосуванням jQuery

Ajax-запит за замовчуванням є асинхронним. Іншими словами, .ajax() буде випущений, сценарій не буде чекати відповіді, але перейде до наступного твердженням, щоб не замикати і не заморожувати екран. Користувач може написати Ajax Success Json, використовуючи необроблений jаvascript. Однак jQuery робить його набагато простіше, використовуючи $ .Ajax налаштування або $ .ajax URL-параметри. Ці настройки є об'єктом пар "ключ-значення". Часто використовувані клавіші: URL-адреса запиту, який може бути розміщений за межами settings останньої форми. Type - GET або POST. Ajax data Success - запитує параметри (ім'я = пари значень) і виражений як об'єкт, наприклад, {name:"peter", msg:"hello"} або рядок запиту "name=peter&msg=hello". DataType - очікуваний тип даних відповіді, такі як текст, xml, json, script або html. Headers - об'єкт для пар "ключ-значення" заголовка запиту. Перевірка сервера для запиту Ajax Success php має заголовок "X-Requested-With: XMLHttpRequest". Серверна програма може перевірити, чи з'являється запит Ajax через цей заголовок, наприклад, в PHP.

Питання безпеки

Щоб запобігти атаку XSS (Cross-Site Scripting), об'єкт XMLHttpRequest може запитувати дані з вихідного сервера, що обслуговує сторінку. Потрібно бути обережним при завантаженні скрипта. HTML елемент $ завантажує дані з сервера і поміщає повертається HTML межах узгодженого елемента. Це найпростіший метод Ajax для завантаження даних з сервера. Наведемо приклад для запиту Ajax Success function на HTTP-сервер для простого тексту. У цьому прикладі використовуємо Ajax для відправки запиту POST асинхронно для запиту текстового файлу.
Це текст відповіді Ajax Request:
Цей приклад запускається під HTTP-сервера (наприклад, Apache), оскільки він відправляє HTTP-запит, який буде використовуватися в якості заповнювача для тексту відповіді. Він також містить гіперпосилання для запуску запиту Ajax (через функцію loadAjaxText()). Запит Ajax з параметрами POST для PHP-HTTP-сервер для отримання динамічного відповіді.
Клієнтський HTML-код містить два "с" для введення та виведення відповідно. Він також містить гіперпосилання для запуску запиту Ajax Success php (через функцію jаvascript loadText()).
Отримані результати роботи скрипта процесу асинхронного обміну даними з веб-сервера за допомогою jаvascript підтверджують, що навіть без оновлення сторінки онлайн-додатки працюють швидко і якісно. Додатки, Web застосовують модель запиту або відповіді від сервера HTML, отримуючи повну сторінку. В результаті користувач отримує результат після натискання кнопки і очікування відгуку сервера, знову натискання і очікування відповіді. Ajax виконує операції запит/відповідь, не вимагають від користувачів очікувань відповідей з сервера.
Цікаво по темі
Відправка форми ajax на сервер за допомогою jquery
Відправка форми ajax на сервер за допомогою jquery
Як багато раз ви стикалися з тим, що ввели неправильні дані, з-за чого сторінка перезавантажувалася і повністю усувала введені в полях символи. Щоб
Jquery, Ajax: використання і функції
Jquery, Ajax: використання і функції
Термін Ajax розшифровується як Asynchronous jаvascript and XML (асинхронний jаvascript і XML) і позначає технологію побудови запитів без
Як швидко підключити jQuery
Як швидко підключити jQuery
JQuery - бібліотека готових рішень на мові jаvascript, що дозволяє легко додати на сторінку інтерактивність. Вона складається з набору функцій,
Checkbox html: приклади гарних кнопок на чистому CSS, створення "акордеона", отримання даних з форм за допомогою PHP і jQuery
Checkbox html: приклади гарних кнопок на чистому CSS, створення "акордеона", отримання даних з форм за допомогою PHP і jQuery
Варіанти застосування html input checkbox дуже великі, але найчастіше цей елемент використовується у формах передачі даних. Однак він вміє виконувати
Метод appendTo в jQuery: вставка елементів
Метод appendTo в jQuery: вставка елементів
Синтаксис і особливості використання методу appendTo в бібліотеці jQuery. Контекст виклику, вхідні параметри і значення, що повертається. Специфіка
Приклад jQuery. Прості приклади скриптів на jQuery
Приклад jQuery. Прості приклади скриптів на jQuery
jQuery — це бібліотека jаvascript, яка дозволяє веб-розробникам додавати додаткові функції на свої веб-сайти. Він доступний з відкритим