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

12 0 Новини високих технологій

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

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

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


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

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


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

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

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

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

    Селектор Jquery, Ajax Success - найважливіша функція jQuery - має спеціальний синтаксис $(). Він може приймати ім'я тега, атрибут id (з префіксом #) або ім'я класу (з префіксом точки). Фактично він підтримує всі CSS-селектори. Порівняно з функціями селектора в javascript, JQuery дуже простий і на клас вище. Він приєднує обробник подій, який буде спрацьовувати після того, як дерево DOM побудовано. Подія « » відрізняється від події javascript « », яке не чекає завантаження зовнішніх посилань, наприклад, зображень. Ці коди поміщаються в розділ, перш ніж створюються елементи, на які посилаються. Це звичайна практика jQuery:
    $(document).ready(handler)readyonloadready() Приклад - селектор jQuery і операції.
    Ajax Success: опис, можливості, інструкція по роботі
    Запит в JQuery відноситься до вибору елементів в HTML - документі для подальших маніпуляцій.
    Ajax Success: опис, можливості, інструкція по роботі
    Наприклад:
  • $(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 насправді мають справу з обробниками подій для набору вибраних елементів.
    Ajax Success: опис, можливості, інструкція по роботі
    Приклад ілюструє селектор jQuery і вбудовані функції.
    Ajax Success: опис, можливості, інструкція по роботі
    Послідовність дій:
  • Вибрати вихідні елементи через відповідний селектор jQuery.
  • Визначити подію, наприклад, клацання мишею, тип ключа.
  • Написати обробник подій і прикласти до джерела.
  • Можна приєднати обробник події до javascript, наприклад click, mouseover і submit, до елемента з допомогою методів JQuery.
  • Можна заборонити запуск обробника за замовчуванням, повертаючись з .click(handler).mouseover(handler).submit(handler)false.
  • Всередині функції $(this) посилається на поточний об'єкт. Хоча $(p) повертає елементів в масиві), можна використовувати один і той же синтаксис для прив'язки обробника подій до EACH елементів.
    Раніше поміщали обробник подій javascript в HTML-теги. Практика в даний час полягає в тому, щоб залишити їх за межами HTML-тегів і згрупувати їх у розділі для кращого дизайну MVC.

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

    Ajax Success: опис, можливості, інструкція по роботі
    Продовження процесу:
    Ajax Success: опис, можливості, інструкція по роботі
    Щоб протестувати 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.
  • Основи розширення javascript

    jQuery - це розширення для javascript, яке легко зрозуміти, якщо користувач володіє javascript. Йому просто потрібно простежити деякі операції jQuery з допомогою Firebug або інструментів веб-розробника. API jQuery доступний на сайті розробника. В jQuery поміщають операції в handlerunder, який запускається після створення дерева DOM, але перед завантаженням зовнішніх ресурсів, наприклад, зображень, що еквівалентно розміщення сценаріїв jQuery безпосередньо перед тегом закриття. Це ефективніше, ніж у обробника javascript. Крім того, можна використовувати кілька для реєстрації декількох обробників, які будуть виконуватися в тому порядку, в якому вони були зареєстровані. javascript можна використовувати тільки один раз: $(document).ready( handler )onloadwindow.onload = handler.ready()window.onload = handler Приймає аргумент, який є найбільш часто анонімної функцією або визначеної функції. Функція не має аргументів.
    Ajax Success: опис, можливості, інструкція по роботі
    Це так часто використовується, що є стенографія .$(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, використовуючи необроблений javascript. Однак 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 Success: опис, можливості, інструкція по роботі
    Це текст відповіді Ajax Request:
    Ajax Success: опис, можливості, інструкція по роботі
    Цей приклад запускається під HTTP-сервера (наприклад, Apache), оскільки він відправляє HTTP-запит, який буде використовуватися в якості заповнювача для тексту відповіді. Він також містить гіперпосилання для запуску запиту Ajax (через функцію loadAjaxText()). Запит Ajax з параметрами POST для PHP-HTTP-сервер для отримання динамічного відповіді.
    Ajax Success: опис, можливості, інструкція по роботі
    Клієнтський HTML-код містить два "с" для введення та виведення відповідно. Він також містить гіперпосилання для запуску запиту Ajax Success php (через функцію javascript loadText()).
    Ajax Success: опис, можливості, інструкція по роботі
    Отримані результати роботи скрипта процесу асинхронного обміну даними з веб-сервера за допомогою javascript підтверджують, що навіть без оновлення сторінки онлайн-додатки працюють швидко і якісно. Додатки, Web застосовують модель запиту або відповіді від сервера HTML, отримуючи повну сторінку. В результаті користувач отримує результат після натискання кнопки і очікування відгуку сервера, знову натискання і очікування відповіді. Ajax виконує операції запит/відповідь, не вимагають від користувачів очікувань відповідей з сервера.