Головна → Налаштування Wi-Fi Ajax приклади на JavaScript. JavaScript - Асинхронні AJAX запити на прикладах Просте пояснення ajax з описом параметрів
Ajax приклади на JavaScript. JavaScript - Асинхронні AJAX запити на прикладах Просте пояснення ajax з описом параметрів
Коли доводиться розроблятися сучасні веб-додатки, Ajax розглядають як стандартний підхід. Інтерактивні рішення для лайтбоксів, перевірки форм, навігації, пошуку, спливаючих підказок і таблиць створюють за допомогою Ajax бібліотек і популярних Ajax скриптів. Ajax корисний і потужний. Як би там не було, при використанні технології Ajax, не варто забувати про юзабіліті і доступності програми. При надмірному використанні технології Ajax, ви легко можете запитати ваших користувачів надаючи їм занадто багато контролю над додатком і надаючи їм зайві можливості.
Тим не менш, важливо знати всі можливості даної технології, тоді в подальшому ви можете реалізувати всі ці можливості в окремо, тим самим ви підвищите якість ваших сайтів або сервісів.
У цьому пості підібрано понад 60 нових корисних Ajax скриптів, бібліотек і рішень, які ви зможете використовувати в своїх додатках. Умови ліцензійної угоди по використанню цих скриптів можуть змінюватися - вивчайте їх уважно перед тим як використовувати їх в комерційних веб-додатках.
Корисні AJAX скрипти:
Mocha бібліотека для створення призначеного для користувача інтерфейсу в веб додатках, заснована на javascript фреймворку - Mootools. Mocha GUI компоненти зроблені за допомогою тегів графіки
Swf взаємодіє з Ajax. Віджет для аплоаду файлів який дозволяє здійснити мульти аплоад (кілька файлів) і має прогрес бар для кожного з файлів, що.
iCarousel це опен Сорс ява скрипт інструмент для створення віджетів як на скріншоті.
Вичерпний JavaScript-фреймворк з численними модулями і компонентами, такими як таблиці, дерева, вікна, шари, форми, вкладкі.Все вони виглядають так, як на звичних десктопних додатках, на скріншоті приклад.
Tablecloth is lightweight, easy to use, ненав'язливий метод додати стиль і поведінку вашим таблицями. Додавши лише 2 рядки коду до вашої сторінці ви отримаєте стильні і активні таблиці які сподобаються вашим відвідувачам. Обов'язково спробуйте поводити мишкою по таблиці :).
FancyForm потужний скрипт для заміни стандартних чекбоксів (checkbox) додає зручність і красу вашим формам.Легка у використанні, підтримується всіма браузерами.
Starbox дозволяє легко орагінозовать будь-який вид рейтингу (голосування) при цьому використовується всього одне PNG зображення. Скрипт заснований на Prototype javascript фреймворку. Для деяких додаткових ефектів можете додати Scriptaculous бібліотеку. На сайті детально викладені варіанти впровадження і кастомізації скрипта.
Prototype UI. Карусель-галерея, зручно буде в ній прокручувати великі галерєї зображень.
Невелика і проста php / javascript онлайн фото-галерея, використовує AJAX, для роботи не вимагає ніяких баз даних або установки додаткових скриптів, дозволяє створити повноцінну галерею за пару хвилин.
Тимчасова шкала це скрипт заснований на DHTML і AJAX для для візуалізації подій пов'язаних з датами. Подивіться демо для того що б зрозуміти в яких цілях можна застосовувати даний скрипт. Змінюйте дані перетягуючи шкалу по горизонталі.
mooSlideBox v3 маленька і проста заміна "lightbox" Працює в браузерах IE 6/7, Opera and Firefox.
Запити способом Script на увазі тільки GET і мають складнощі з відстеженням помилок. Але зате - їх можна робити на будь-які домени, що і становить основну область застосування цього транспорту.
Будь-які теги можна створювати через DOM і додавати до документа. Якщо створити вузол
Браузер тут же обробить тег: запросить newMail.js з заданого URL і виконає.
Коли скрипт завантажиться - він повинен якось оголосити про себе, що дані довантажуючи і можна ними керувати.
Зазвичай для цього використовується каллбек, тобто в кінці скрипта робиться виклик спеціальної функції.
Щоб чітко вказати, якому скрипту - який каллбек викликати, ім'я функції передається окремим параметром. наприклад,
... // задати обробник var handler \u003d function (data) (...) // отримали номер для наступного скрипта handlerId ++ // насправді каллбек - не саме обробник, а службова функція, // яка додатково обробить успішну завантаження і почистить став зайвим тег script scriptHandlers [ "script _" + handlerId] \u003d makeHandler (handler) attachScript (handlerId, "/service/newMail.js?name\u003dVasya&callback\u003dscriptHandlers.script_"+handlerId)
Сервер дивиться на значення параметра callback, і додає до скрипту виклик scriptHandlers.script_XXX, де script_XXX - значення параметра callback.
Зазвичай, сервер просто віддає дані клієнта, відповідаючи на запит викликом типу
Такий формат називають JSONP: JSON with Padding, т.к для обміну даними використовуються javascript-об'єкти (НЕ XML тощо), і використовується додаткова функція (padding).
Відправлення великої кількості даних на сервер (Multipart)
Довжина URL в GET-запитах обмежена. Вона залежить від браузера-сервера, приблизно 1kb - безпечне значення. Тому для відправки на сервер більших фрагментів використовується multipart-протокол.
Кожен запит забезпечується двома параметрами: унікальним ID і номером частини part.
Перший елемент multipart-запиту має part \u003d 1, останній - не має параметра part. Сервер, таким чином, може підраховувати отримані шматки.
помилки комунікації
При кожному запиті створюється таймер. При успішному запиті - таймер очищається. Через 10 секунд таймер спрацьовує і генерує помилку запиту.
Така обробка - набагато гірше, ніж є в iframe або XmlHttpRequest, де помилка з боку сервера (404,500) стає видно відразу.
У всіх чотирьох статтях серії "Ajax на практиці", ми розбиралися, як використовувати цю технологію за допомогою бібліотеки jQuery і, зокрема, її метод $ .Ajax (), Але чи завжди потрібно вдаватися до допомоги фреймворків? Наприклад, якщо в своєму проекті, ви більше ніде не використовуєте бібліотеку, то зовсім не резонно навантажувати сторінки зайвими кілобайтами і особливо, якщо цих кілобайт близько дев'яноста. Висновок - пишемо ajax-запит на чистому JavaScript, тим більше, що та ж бібліотека jQuery, ні що інше, як підготовлений набір методів ( функцій), Написаний на нативном JS. Якщо взяти для порівняння JS-код зі статті "Отримання даних з форми", то переписуючи код, нам потрібно буде зробити наступне:
Дочекатися завантаження всього документа
Отримати в розпорядження елемент
Повісити на нього обробник події submit
Підготувати дані форми на відправку
Створити об'єкт XMLHttpRequest
За допомогою XHR відправити дані
Отримати, обробити і вивести на екран відповідь сервера
Поїхали покроково ... 1)
Замість звичних $ (function () ()) або $ (document) .ready (function () ()), встановлюємо свій обробник події onload. Але перш, хочу пояснити, чому ми не будемо використовувати конструкцію element.onevent \u003d func;. Це спосіб хоч і кросбраузерності, але головним його недоліком є \u200b\u200bте, що встановивши на один елемент два і більше обробника, останній "затрёт" попередні і вони "не відкатають свою обов'язкову програму". Тому, хоч коду на пару рядків вийде більше, але запишемо так:
// функція кросбраузерності установки обробників подій function addEvent (elem, type, handler) (if (elem.addEventListener) (elem.addEventListener (type, handler, false);) else (elem.attachEvent ( "on" + type, handler) ;) return false;) // Вішаємо обробник події завантаження документа - DOM-Ready addEvent (window, "load", init);
Після завантаження документа, буде викликана функція init, Де ми зможемо отримати доступ до нашої формі. Цей крок можна і пропустити, якщо весь js-код, буде розташований в самому кінці документа, перед закриває тего
, Але випадки бувають різні ... 2)
У функції init, ми звертаємося до нашої формі і, в свою чергу, встановлюємо на неї обробник події submit.
// Ініціалізація після завантаження документа function init () (output \u003d d.getElementById ( "output"); // елемент, куди ми виведемо отриманий у відповіді результат myform \u003d d.getElementById ( "my_form"); // форма addEvent (myform , "submit", sendAjaxRequest); // встановлюємо на форму обробник події submit return false;)
За подією submit, буде викликана функція sendAjaxRequest. І відразу ж переходимо до цієї функції, де сформуємо дані форми для запиту і відправимо ajax-запитом. Сформувати дані можна або за допомогою об'єкта FormData, З яким ви могли познайомитися ( якщо до цього не були знайомі) В статті "Отримання даних з форми", або ж звертатися до кожного елементу форми, отримуючи значення, з якого-небудь його селектору, або пробігтися по елементам форми в циклі. Але перш за все, нам потрібно скасувати звичайну поведінку форми на подію submit:
// Функція Ajax-запиту function sendAjaxRequest (e) (var evt \u003d e || window.event; if (evt.preventDefault) (evt.preventDefault (); // для нормальних браузров) else (evt.returnValue \u003d false; / / для IE старих версій) // .....)
У цій же функції, збираємо всі дані форми:
// формуємо дані форми var elems \u003d myform.elements, // всі елементи форми url \u003d myform.action, // шлях до обробника (беремо з атрибута action нашої форми) params \u003d, elName, elType; // проходимся в циклі по всіх елементах форми for (var i \u003d 0; i
На виході, в змінної url, ми отримаємо рядок виду "http://site.com/handler.php?name1\u003dval1&name2\u003dval2&nameN\u003dvalN". Якщо на попередніх етапах складнощів не виникло, то можна переходити безпосередньо до ajax-запиту і це все продовжуємо писати в функції sendAjaxRequest. Але і тут потрібно внести одну ремарку. Так як ще залишаються користувачі, які користуються старими версіями IE, то доводиться враховувати цей момент при створенні об'єкта XMLHttpRequest. Internet Explorer до десятої версії його не підтримує, а має власну реалізацію - об'єкт ActiveXObject. Тому напишемо ще одну функцію для створення свого об'єкта під певні браузери:
Function getXhrObject () (if (typeof XMLHttpRequest \u003d\u003d\u003d "undefined") (XMLHttpRequest \u003d function () (try (return new window.ActiveXObject ( "Microsoft.XMLHTTP");) catch (e) ());) return new XMLHttpRequest ();)
Ви могли бачити і більш "наворочені" реалізації, але запевняю вас, що на сьогоднішній день цього вполненниє досить, тому що кажучи про застарілі версіях IE, я не беру до уваги сьомий і нижче. Чому восьмий "ослик" ще потребує уваги? Для себе я це визначив просто: сьогодні ще досить популярна ОС Windows 7, а з нею за замовчуванням йде в комплекті IE8. Не всі мають можливість (напр., На роботі) або не вміють, або не хочуть оновлювати до більш гуманної версії і з цим доводиться миритися ... сподіваюся. що недовго;) А ми продовжуємо. Створюємо новий об'єкт XHR ( XMLHttpRequest), Відкриваємо з'єднання за допомогою його методу open (), Використовуємо собятіе onreadystatechange для перевірки стану виконання запиту ( readyState) І статусу відповіді сервера ( status) І відправляємо запит на сервер, використовуючи метод send (). коли readyState прийме значення рівне 4
(Запит завершено) і status значення 200
(OK), ми можемо виводити або використовувати для інших цілей відповідь сервера, який буде нам доступний у властивості responseText або responseXML, Якщо ми відповідаємо отримуємо повноцінний XML-документ.
Третій параметр в методі open (), вказує як буде проводитися запит: true - асинхронно, false - синхронно. У більшості випадків, використовують асинхронний запит, тобто такий, коли сторінка не блокує свою роботу, в очікуванні відповіді сервера. Якщо ви помітили, то в коді вище, я використав http-метод передачі даних "GET". Для методу "POST", треба ще додавати заголовки, які будуть передаватися разом із запитом на сервер, а так само робимо ще деякі зміни: другим параметром ( url) В методі open (), у нас буде тільки шлях до файлу-обробника, а сформований рядок з даними форми, ми передаємо в метод send ():
Ось, як би і все. Залишається тільки зібрати весь цей конструктор і привести повний лістинг.
Var d \u003d document, myform, output; // кросбраузерності установка обробника подій function addEvent (elem, type, handler) (if (elem.addEventListener) (elem.addEventListener (type, handler, false);) else (elem.attachEvent ( "on" + type, handler); ) return false;) // Універсальна функція для створення нового об'єкта XMLHttpRequest function getXhrObject () (if (typeof XMLHttpRequest \u003d\u003d\u003d "undefined") (XMLHttpRequest \u003d function () (try (return new window.ActiveXObject ( "Microsoft.XMLHTTP" );) catch (e) ());) return new XMLHttpRequest ();) // Функція Ajax-запиту function sendAjaxRequest (e) (var evt \u003d e || window.event; // Скасовуємо стандартне дію форми за подією submit if (evt.preventDefault) (evt.preventDefault (); // для нормальних браузров) else (evt.returnValue \u003d false; // для IE старих версій) // отримуємо новий XMLHttpRequest-об'єкт var xhr \u003d getXhrObject (); if ( xhr) (// формуємо дані форми var elems \u003d myform.elements, // всі елементи форми url \u003d myform.action, // шлях до обробника par ams \u003d, elName, elType; // проходимся в циклі по всіх елементах форми for (var i \u003d 0; i
Скінчено, такий кількість рядків коду, в порівнянні з записом в $ .ajax (), може відлякати особливо ледачих, але знати, що можна спокійно обійтися без всяких бібліотек - буде вам плюсом. І застосовувати його все ж потрібно, якщо у вашому проекті, ви більше ніде не використовуєте js-фреймворки, тому що підключивши бібліотеку, ви утяжелить сторінку на кілобайт 90, а написавши на нативном JS - всього на 4, а якщо ще й мініфіціровать код, то всього лише на 2Кб! Різницю відчуваєте? ;)
На цьому я закінчую серію статей присвяченій Ajax. Будуть питання - питайте, по мірі можливостей буду відповідати або доповнювати новими статтями. Успіхів!
Здійснює запит до сервера без перезавантаження сторінки. Це низькорівневий метод, який володіє великою кількістю налаштувань. Він лежить в основі роботи всіх інших методів ajax. Має два варіанти використання:
url - адреса запиту. settings - в цьому параметрі можна задати налаштування для даного запиту. Здається за допомогою об'єкта в форматі (ім'я: значення, ім'я: значення ...). Жодна з налаштувань не є обов'язковою. Встановити налаштування за замовчуванням можна за допомогою методу $ .ajaxSetup ().
список налаштувань
↓ назва: тип (значення за замовчуванням)
При виконанні запиту, в заголовках (header) вказуються допустимі типи вмісту, очікуваного від сервера. Значення цих типів будуть взяті з параметра accepts.
За замовчуванням, всі запити без перезавантаження сторінки відбуваються асинхронно (тобто після відправки запиту на сервер, сторінка не зупиняє свою роботу в очікуванні відповіді). Якщо вам знадобитися синхронне виконання запиту, то встановіть параметр в false. Кроссдоменние запити і запити типу "jsonp" не можуть виконуватися в синхронному режимі.
Майте на увазі, що виконання запитів в синхронному режимі може привести до блокування сторінки, поки запит не буде повністю виконаний.
Це поле містить функцію, яка буде викликана безпосередньо перед відправкою ajax-запиту на сервер. Така функція може бути корисна для модифікації jqXHR-об'єкта (в ранніх версіях бібліотеки (до 1.5), замість jqXHR використовується XMLHttpRequest). Наприклад, можна змінити / вказати потрібні заголовки (headers) і.т.д. Об'єкт-jqXHR буде переданий в функцію першим аргументом. Другим аргументом передаються настройки запиту.
У цьому полі можна вказати додаткові заголовки запиту (header). Ці зміни будуть введені до виклику beforeSend, в якій можуть бути зроблені остаточні правки заголовків.
При перекладі цієї настройки в true, запит буде виконаний зі статусом "успішно", лише в разі, якщо відповідь від сервера відрізняється від попереднього відповіддю. jQuery перевіряє цей факт звертаючись до заголовку Last-Modified. Починаючи з jQuery-1.4, крім Last-Modified перевіряється і "etag" (обидва вони надаються сервером і необхідні для оповіщення браузера про те, що запитувані дані з сервера не змінені з попереднього запиту).
Дозволяє встановити статус джерела сторінки локальним (як якщо б це відбувалося по протоколу file), навіть якщо jQuery розпізнав його інакше. Бібліотека вирішує, що сторінка запущена локально в разі наступних протоколів: file, * -extension, і widget.
Рекомендується встановлювати значення параметра isLocal глобально - за допомогою функциии $ .ajaxSetup (), а не в налаштуваннях окремих ajax-запитів.
Визначає ім'я параметра, який додається в url при jsonp-запиті (за замовчуванням, використовується "callback" - "httр: //siteName.ru? Callback \u003d ...").
Починаючи з jQuery-1.5, вказавши в цьому параметрі false, ви уникнете додавання в url додаткового параметра. В цьому випадку необхідно явно встановити значення властивості jsonpCallback. Наприклад так: (jsonp: false, jsonpCallback: "callbackName").
Визначає ім'я функції, яка буде викликана при відповіді сервера на jsonp-запит. За замовчуванням, jQuery генерує довільну назву цієї функції, що є кращим варіантом, що спрощує роботу бібліотеки. Один з причин, при якому варто вказувати власну функцію обробки jsonp-запиту, є поліпшення кешування GET-запитів.
Починаючи з jQuery-1.5, ви можете вказати функцію в цьому параметрі, для того, щоб обробити відповідь сервера самостійно. В цьому випадку, зазначена функція повинна повертати отримані від сервера дані (у зазначеній функції вони будуть доступні в першому параметрі).
За замовчуванням, всі передані на сервер дані, попередньо перетворюються в рядок (url-формату: fName1 \u003d value1 & fName2 \u003d value2 & ...) відповідну "application / x-www-form-urlencoded". Якщо вам необхідно відправити дані, які не можна піддавати подібній обробці (наприклад документ-DOM), то слід відключити опцію processData.
Цей параметр використовується для кроссдоменних ajax-запитів типу GET, dataType при цьому може бути або "jsonp", або "script". Визначає кодування, в якій буде виконаний кроссдоменний запит. Це необхідно, в разі, якщо сервер на чужому домені використовує систему кодування, відмінну від кодуванні на сервері рідного домену.
(Цей параметр з'явилася в jQuery-1.5) набір пар, в якому кодами виконання запиту зіставляються функції, які при цьому буде викликані. Наприклад, для коду 404 (сторінки не існують) можна зробити висновок повідомлення на екран:
$ .Ajax ((statusCode: (404: function () (alert ( "Сторінку не знайдено")
;
}
}
}
)
;
Функції, що реагують на коди успішного виконання запиту будуть отримувати ті ж аргументи, що і функції-обробники вдалого виконання запиту (зазначені в параметрі success), а функції, що спрацьовують на коди помилок, будуть такими ж, як і у error-функцій.
Функція, яка буде викликана в разі вдалого завершення запиту до сервера. Їй будуть передані три параметра: дані, надіслані сервером і вже пройшли попередню обробку (яка відмінна для різних dataType). Другий параметр - рядок зі статусом виконання. Третій параметр містить об'єкт jqXHR (в більш ранніх версіях бібліотеки (до 1.5), замість jqXHR використовується XMLHttpRequest). Починаючи з jQuery-1.5, замість однієї функції, цей параметр може приймати масив функцій.
Час очікування відповіді від сервера. Здається в в мілісекундах. Якщо цей час буде перевищено, запит буде завершено з помилкою і станеться подія error (див. Опис вище), яке буде мати статус "timeout".
Час відраховується з моменту виклику функції $ .ajax. Може трапитися так, що в цей момент буде запущено кілька інших запитів і браузер відкладе виконання поточного запиту. В цьому випадку timeout може завершитися, хоча фактично, запит навіть ще не був запущений.
В jQuery-1.4 і молодше, при завершенні часу очікування, об'єкт XMLHttpRequest перейде в стан помилки і доступ до його полях може викликати виключення. В Firefox 3.0 + запити типу script і JSONP НЕ будуть перервані при перевищенні часу очікування. Вони будуть завершені навіть після того як цей час закінчиться.
Функція, яка надасть об'єкт XMLHttpRequest. За замовчуванням, для браузерів IE цим об'єктом є ActiveXObject, а в інших випадках це XMLHttpRequest. За допомогою цього параметра ви можете впровадити власну версію цього об'єкта.
(Цей параметр з'явилася в jQuery-1.5.1) Набір пар (ім'я: значення) для зміни / додавання значень відповідних полів об'єкта XMLHttpRequest. Наприклад, можна встановити його властивість withCredentials в true, при виконанні кроссдоменного запиту:
В jQuery-1.5 властивість withCredentials не підтримує нативним XMLHttpRequest і при кроссдоменном запиті це поле буде проігноровано. У всіх наступних версіях бібліотеки, це виправлено.
обробники подій
Налаштування beforeSend, error, dataFilter, success і complete (їх опис є в попередньому розділі) дозволяють встановити обробники подій, які відбуваються в певні моменти виконання кожного ajax-запиту.
beforeSend відбувається безпосередньо перед відправкою запиту на сервер. error відбувається в разі невдалого виконання запиту. dataFilter відбувається в момент прибуття даних з сервера. Дозволяє обробити "сирі" дані, надіслані сервером. success відбувається в разі вдалого завершення запиту. complete відбувається в разі будь-якого завершення запиту.
Приклад простого використання. Виведемо повідомлення при вдалому виконанні запиту:
$ .Ajax ((url: "ajax / test.html", success: function () (alert ( "Load was performed.");)));
Починаючи з jQuery-1.5, метод $ .ajax () повертає об'єкт jqXHR, який крім іншого реалізує інтерфейс deferred, що дозволяє задавати додаткові обробники виконання. Крім стандартних для об'єкта deferred методів .done (), .fail () і.then (), за допомогою яких можна встановлювати обробники, в jqXHR реалізовани.success (), .error () і.complete (). Це зроблено для відповідності звичним назв методів, за допомогою яких встановлюються обробники виконання ajax-запитів. Однак починаючи з jQuery-1.8 ці три методи стануть небажаними для використання.
Для деяких типів запитів, таких як jsonp або кроссдоменних GET-запитів, що не передбачається використання об'єктів XMLHttpRequest. В цьому випадку, що передаються в обробники XMLHttpRequest і textStatus міститимуть значення undefined.
Усередині оброблювачів, змінна this буде містити значення параметра context. У разі, якщо він не був заданий, this буде містити об'єкт налаштувань.
параметр dataType
Функція $ .ajax () дізнається про тип надісланих сервером даних від самого сервера (засобами MIME). Крім цього, існує можливість особисто вказати (уточнити), як слід інтерпретувати ці дані. Це робиться за допомогою параметра dataType. Можливі значення цього параметра:
"Xml" - отриманий xml-документ буде доступний в текстовому вигляді. З ним можна працювати стандартними засобами jQuery (також як і з документом html). "Html" - отриманий html буде доступний в текстовому вигляді. Якщо він містить скрипти в тегах
