Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
Міністерство освіти і науки , молоді та спорту України
Черкаський державний технологічний університет
Кафедра інформаційних технологій проектування
Реферат
на тему:
«Переваги і недоліки використання технології AJAX.»
з дисципліни:
«Web-технології та Web-дизайн»
|
Перевірила: Гамоцька Сніжана Леонідівна __ __________ 2012р. Підпис: _____ |
Виконала: Ст.групи ПР-122 Кагамлик Інна Русланівна Група: ПР - 122 Підпис:_________ |
AJAX 3
Історія 4
Порівняння класичного підходу до завантаження сторінки та AJAX 4
Класична модель веб-застосування: 4
Модель AJAX: 4
Браузери, які підтримують AJAX 4
Переваги та недоліки сайтів на AJAX 5
Основні переваги 5
Недоліки, які необхідно враховувати при розробці 6
Наскільки доцільно використовувати AJAX в web-сторінках? 6
Висновки: 12
Інформаційні джерела: 13
Коли існуючих можливостей ставати мало, а вдосконалювати існуюче вже нікуди, тоді і відбувається технологічний прорив. Таким проривом і є AJAX (Asynchronous JavaScript and XML) - підхід до побудови призначених для користувача інтерфейсів веб-додатків, при якому web-сторінка, не перезавантажуючись, сама довантажує потрібні користувачу дані. AJAX - один з компонентів концепції DHTML.
Що ж дає нам ця технологія. В даний час розробка WEB додатків прагне до розмежування клієнтської частини і серверної, цим і обумовлюється повсюдне використання шаблонів, таких як Smarty і XSLT. Зараз проекти стають складніше, і переплітати між собою різні технології ставати занадто дорого для часу розробника. Так, наприклад, всі стилі форматування виносяться в CSS або в XSL файли, HTML або XML дані зберігаються в інших розділах, серверні обробники в третіх, бази даних в четвертих. І якщо ще 5-6 років тому практично скрізь можна було побачити переплетіння всього цього в одному файлі, то зараз це все частіше ставати рідкістю.
При розробці більш складних проектів виникає необхідність у структурованості коду. Не слід засмічувати код програміста кодом верстальника, а код верстальника - правками дизайнера, і так далі.
Виникає необхідність в розмежуванні роботи. Так, наприклад, дизайнер буде робити свою роботу, верстальник свою, програміст свою, і при цьому ніхто один одному заважати не буде. У підсумку кожному учаснику проекту достатньо буде знати тільки ті дані, з якими йому доведеться працювати. У такому випадку продуктивність групи і якість проекту підвищується в рази. В даний час ця проблема з успіхом вирішується шляхом використання шаблонів, однак це теж створює певні труднощі, так як щоб, скажімо, підключити Smarty, необхідно підключити програмний модуль обробки шаблонів, і чітко пов'язати зі структурою проекту. А це далеко не завжди можливо і вимагає певних витрат. Трохи простіше при використанні зв'язки XML + XSL, так як вони надають більше можливостей, однак це альтернатива, не більше. А що якщо подивитися у бік чогось радикально нового, що дозволяло б об'єднати все краще, використовуючи можливості того, що є? Спробуйте уявити JavaScript, який володіє всім можливостями PHP або Perl, включаючи роботу з графікою та базами даних, який має набагато більш зручну розширюваність і практичність, і до того ж крос-платформа.
Про AJAX заговорили після появи в лютому 2005-го року статті Джесі Джеймса Гарретта (Jesse James Garrett) «Новий підхід до веб-застосунків». AJAX — не самостійна технологія. Це ідея.
Зауважте, що це загальний список і підтримка застосувань AJAX залежатиме від особливостей підтримки оглядача:
Використання технологій AJAX для розробки сайтів перетворилося на поширену тенденцію, якої дотримуються багато сучасних веб-студії. Які переваги це дає і які можливі недоліки необхідно враховувати? Перш за все необхідно сказати, що мова йде не про одну самостійної технології, а про комплекс технологій. Назва походить від англійського Asynchronous Javascript and XML («асинхронний JavaScript і XML»). Звернення до сервера здійснюється без перезавантаження сторінки. Для реалізації цього створюються дочірні фрейми або контент завантажується через тег <script>, створюваний динамічно. Вперше комплекс технологій був реалізований в поштовому клієнті Gmail і картах Google Maps і буквально відразу ж став популярним. На сьогоднішній день він активно використовується у величезній кількості сайтів Рунета.
Розробка сайту з використанням AJAX дає безліч переваг:
-поліпшення юзабіліті (за рахунок підвищення зручності додатків для користувачів), - зниження навантаження на сервер,
- підвищення швидкості реакції інтерфейсу у відповідь на дії користувача,
-економія трафіку для відвідувачів
- і багато інших.
За рахунок звертання до сервера без перезавантаження сайт стає зручнішим для користувачів. Наприклад, при заповненні форм реєстрації, онлайн-замовлення та інших, де потрібно вказувати будь-яку інформацію про себе і вводити пароль. Якщо дані з форми не прийняті і їх необхідно ввести заново, після перезавантаження інформація збережеться. Підвищення швидкості реакції користувача інтерфейсу досягається за рахунок того, що сторінка змінюється не повністю, а лише в певних частинах. Однак необхідно знати: на інтернет-ресурсах, повністю створених на AJAX, загальна швидкість завантаження сторінок може зменшитися. Це відбувається у зв'язку з тим, що програмний код таких сайтів набагато складніше.
Говорячи про переваги, необхідно згадати і можливі недоліки. Далеко не завжди технології можна інтегрувати з інструментами браузерів користувачів. Через це відвідувачі, приміром, не зможуть скористатися кнопкою «Назад» або додати поточну сторінку в закладки («Вибране»). Час відповіді сервера на користувальницький запит не визначається, тому в браузері не відображається, що йде процес завантаження. Передана інформація не кешується, що також може викликати деякі складності.
Важливо знати, що текстовий контент, який динамічно завантажується на сформованій за допомогою AJAX сторінці, не індексується пошуковиками. Якщо після розробки проекту планується кампанія по його просуванню, необхідно передбачити альтернативні варіанти доступу до SEO-текстів. Або застосовувати AJAX для вирішення другорядних завдань, пов'язаних тільки з підвищенням юзабіліті, і не використовувати на оптимізуються цільових сторінках.
Визначити, наскільки виправдане впровадження технології і які вигоди вона принесе, допомагає комплексний аудит сайту. Практика показує, що оптимальний варіант по швидкості завантаження, якості індексації сторінок і загальної вартості - комбінування елементів технології з іншими.
Технологія реалізується в різних мовах програмування. Впроваджувати її доцільно ще на стадії розробки. Якщо використання AJAX не закладено в модулі, згодом їх доведеться коригувати. За рахунок цього обсяг робіт збільшується. Зростає і загальна вартість створення сайту.
Суть технологій AJAX
AJAX — це не самостійна технологія, а швидше концепція використання декількох суміжних технологій. AJAX підхід до розробки призначених для користувача інтерфейсів комбінує кілька основних методів і прийомів:
•Використання DHTML для динамічної зміни змісту сторінки.
•Використання XMLHttpRequest для звернення до сервера «на льоту», не перезавантажуючи всю сторінку повністю
•Альтернативний метод — динамічне підвантаження коду JavaScript в тег <SCRIPT> з використанням DOM, що здійснюється із використанням формату JSON)
•Динамічне створення дочірніх фреймів
Використання цих підходів дозволяє створювати набагато зручніші веб-інтерфейси користувача на тих сторінках сайтів, де необхідна активна взаємодія з користувачем. AJAX — асинхронний, тому користувач може переглядати далі контент сайту, поки сервер все ще обробляє запит. Браузер не перезавантажує web-сторінку і дані посилаються на сервер без візуального підтвердження (крім випадків, коли ми самі захочемо показати процес з’єднання з сервером). Використання AJAX стало найпопулярніше після того, як компанія Google почала активно використовувати його при створенні своїх сайтів, таких як Gmail, Google Maps і Google Suggest. Створення цих сайтів підтвердило ефективність використання даного підходу.
Отже докладніше: якщо взяти класичну модель WEB-додатки:
Клієнт, набираючи в рядку пошуку адресу даного його ресурсу, потрапляючи на сервер, робить до нього запит. Сервер виробляє обчислення відповідно до запиту, звертається до бази даних і так далі, після чого отримані дані йдуть клієнтові і, в разі необхідності підставляються в шаблони і обробляються браузером. Результатом є сторінка, яку ми бачимо, і яку 80% населення країни знаходиться в WEB називають Інтернетом. Це класична модель, яка встигла себе зарекомендувати і заслужити собі почесне місце під сонцем. Це найпростіша модель взаємодії і, як наслідок, найпоширеніша. Однак її все частіше стає все менше і менше. Уявіть собі, on-line гру "Морський бій", в яку грають два закоренілих одного - житель ПАР і житель Японії. Як за допомогою такої моделі зробити їх гру максимально приємною? У будь-якому випадку дані потоплених кораблів будуть зберігається на сервері, і що б перевірити не походив чи опонент, необхідний буде кожен раз оновлювати сторінку і подгущать застарілі дані. "Але ж люди придумали кешування" - скажете ви і будете абсолютно праві, але легше від цього не стає. Кешування всього лише прискорить час взаємодії з сервером, але не позбавить від необхідності перезавантажувати сторінку. Як варіант можна поставити певний час самооновлення, але і в цьому випадку сторінка буде перезавантажуватися повністю.
Тепер подивимося на модель взаємодії AJAX:
Послідовність дій клієнта зберігається і він, швидше за все не зрозуміє того, що буде відбуватися, а слово AJAX буде асоціюватися тільки з назвою футбольного клубу. Але на стороні сервера все виглядає інакше.При зверненні до сервера, генерується сторінка, яка буде відображатися користувачу, і пропонувати йому зробити потрібну йому послідовність дій. При свідомому (хоча і не обов'язково) виборі клієнта, його запит буде звертатися до AJAX модулю, який і буде виробляти все цікавлять його обчислення і роботу з сервером як таким. Але в чому ж нововведення? Основна відмінність в тому що цей метод дає нам можливість динамічно звертатися до сервера і виконувати цікавлять нас дії. Наприклад, нам потрібно виконати звернення до бази даних і отримати цікавлять нас дані які потім будемо використовувати. Дані ми будемо зберігати в XML файлі який буде формуватися динамічно, таким чином:Створюємо новий об'єкт JavaScript:
var req = new ActiveXObject ("Microsoft.XMLHTTP"); (для IE)var req = new XMLHttpRequest (); (Для всього іншого)
Потім пишемо функцію використовуючи цей об'єкт
var req;
function loadXMLDoc(url) {
// branch for native XMLHttpRequest object
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null);
// branch for IE/Windows ActiveX version
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send();
}
}
}
Тепер HTML файлу пишемо скрипт, який буде:
function checkName(input, response)
{
if (response != ''){
// Response mode
message = document.getElementById('nameCheckFailed');
if (response == '1'){
message.className = 'error';
}else{
message.className = 'hidden';
}
}else{
// Input mode
url = 'http://localhost/xml/checkUserName.php?q=' \\
+ input;
loadXMLDoc(url);
}
}
У файлі localhost / xml / checkUserName.php ми обробляємо дані, отримані з командного рядка в даному випадку в змінної q. А результат зберігаємо в XML структурі, яку зберігаємо в цьому ж файлі. Так ми можемо отримати і обробити дані, отримані з БД, або що-небудь інше необхідне нам. До того ж сервер буде обробляти тільки ті дані, які нам необхідно оновити, а не всю сторінку в разі її перезавантаження.Тепер повернемося до двох друзів - любителям морського бою: з огляду на появу даного нововведення, ми можемо зробити наступне: поставити перевірку в плині кожних трьох секунд XML файлу дана перевірка на увазі під собою перевірку бази даних на предмет нового запису, тобто - зробленого опонентом ходу. Якщо хід був зроблений, сторінка без перезавантаження топить кораблі, тим самим, псуючи настрій учасникам водних баталій. Дана функціональність досягається елементарним використанням Javascript і таблиць стилів. Цей приклад досить наочний, однак далеко не повний, застосування даної технології набагато істотніше.Проте не все так просто. Давайте тепер розглянемо негативні риси.По-перше - ми можемо передавати дані тільки методом GET, відповідно великі обсяги даних доведеться залишити в спокої. Дана проблема вже не раз піднімалася в різних джерелах, але панове, є ж сookies, які цілком прийнятні у випадках передачі великих даних, ніж може вмістити в себе GET запит, а Javascript у свою чергу має функції для роботи з ними.Друга проблема - крос-браузерність. Об'єкт XMLHttpRequest ще не є частиною будь-якого стандарту (хоча щось подібне вже було запропоновано в специфікації W3C DOM Level 3 Load and Save). Тому існує два відмінних один від одного методу виклику цього об'єкта в коді скрипта. В Internet Explorer об'єкт ActiveX викликається так:
var req = new ActiveXObject("Microsoft.XMLHTTP");
У Mozilla і Safari це робиться простіше (так як там це об'єкт, вбудований в JavaScript):
var req = new XMLHttpRequest();
Всі сучасні браузери підтримують даний об'єкт і проблеми виникнуть лише в 1,8% користувачів (згідно даними статистики компанії SpyLog), які користуються дуже старими версіями браузерів, не підтримують цей об'єкт.
І, нарешті, захищеність. На цьому зупинимося детальніше. Основна проблема полягає в тому, що всі дані і вихідний код JavaScript функцій можна побачити шляхом перегляду вихідного коду сторінки, відповідно зловмисник може простежити логіку виконання запитів і при певному збігу обставин виконати необхідний йому набір команд. Це не грає особливої ролі, коли у нас йде просте зіставлення даних, але що робити в більш складних ситуаціях, наприклад при авторизації, і як у такому разі передавати паролі. Як вже було сказано вище, на допомогу приходять Cookies. Необхідні дані можна пересилати з їх допомогою, так само їх і обробляти. Візьмемо приклад, в якому користувач буде проходити аутентифікацію за допомогою технології якій присвячена стаття.
Генерації сторінки, ми формуємо унікальні значення, які потім поміщаємо в змінні сервера. І в Cookies браузера, потім при авторизації ми отримуємо ім'я користувача та його пароль, які нам необхідно передати модулю обробки на сервері.
Після того як користувач ввів дані і натиснув кнопку Submit його пароль заноситися в Cookies, а ім'я користувача передається відкрито - посиланням наприклад http://www.mubestajax.com/ajax.php?login=pupkin при отриманні даних сервер, в першу чергу проводить звірку отриманих даних. Так як значення які ми генерували з початку роботи сервера а потім передавали їх глобальним змінним сервера і cookies повинні збігатися, то при перевірці цілісності переданих даних у разі неспівпадання програма перестає працювати. Якщо ж все пройшло добре, то витягуються всі необхідні дані і проводяться необхідні обчислення і роботи. Такий спосіб захисту досить простий і ефективний. Але для великих проектів він не підійде.
Коли на перший план виходить безпечність, краще використовувати більш складні і надійні рішення. Але в більшості випадків даних заходів обережності буде більш ніж достатньо, так як використання більш складних модулів спричиняє за собою використання технологій які не завжди входять до складу стандартного програмного забезпечення сучасних серверів, основна риса яких - простота. Саме з цього такі технології як MySQL і PHP одержали дуже широке поширення, тому що вони забезпечують простоту роботи при своїй невеликій ресурсоємності та достатньої надійності. А до рамок даного програмного забезпечення як не можна краще підійде рішення запропоноване вище.
У висновку хотілося б сказати, що AJAX з одного боку - величезний стрибок у WEB інженерії, але з іншого боку це давно назріваючу етап еволюції, який відкрив нові горизонти в сфері розробки програмного забезпечення. У теж час ця технологія ще досить "сира" так як її використання на даний момент скоріше приємне виключення. Але я впевнений, що про неї ще не раз всі почують. На сьогоднішній день у всю набирає обертів технологія Ajax. Все частіше ми можемо бачити її в дії на тому чи іншому сайті. Розглянемо принципи роботи даної технології, а так само її недоліки і переваги. Взагалі то Ajax - це не одна технологія, а кілька, зібраних воєдино. Вона включає в себе такі технології використовуються для розробки сайтів як: Javascript, Html, Xml, і DOM. Розбиратися в кожній з-них займе дуже багато часу, тому ми зупинимося лише на самих основних моментах.
Так ось вся принадність технології Аjax (Asynchronous JavaScript and XML) полягає в асинхронних запитах до серверу.Что значить асинхронних? А значить це наступне. Браузер виконує запити до сервера, а ви в цей час, можете робити все, що захочете. Наприклад, всі знають таку програму як Word, яка зберігає документ у той час, поки ви набираєте документ і ви цього навіть не помічаєте. За допомогою технології Ajax це можна реалізувати і при редагуванні контенту в панелі управленія.Данний метод у всю використовується такими системами, як Word Press. Недолік цієї технології полягає в неможливості використати таку можливість браузера як історія. Кнопка назад перестає працювати, проте це можна вирішити, при додаткових зусиллях програміста.Другий недолік - це проблеми з індексацією сторінок, відвіданих за допомогою технології Ajax. І ця проблема може бути вирішена, але кількість коду в цьому випадку сильно виросте. До основних достоїнств можна віднести економію трафіку - сторінки вантажаться набагато швидше.Динамічність додатка сильно зростає, можна витворяти приголомшливі речі з тим же пошуком, який незабаром нам продемонструє Google.Використання технології спрощується з появою різних фреймворків наприклад jQuery. Створювати Ajax додатка на ньому-суцільне задоволення. Створення сайтів на цій технології - це не данина моді, а високий рівень програмування.
Інтернет джерела:
1.AJAX — Википедия [Электронный ресурс].–Режим доступа : \www/ URL:http://ru.wikipedia.org/wiki/AJAX
2. CodeNet - все для программиста! [Электронный ресурс].–Режим доступа : \www/ URL:http://www.codenet.ru/webmast/js/ajax/
3.Mozilla Developer Network [Электронный ресурс].–Режим доступа : \www/ URL:https://developer.mozilla.org/en-US/docs/AJAX
4. AjaxTips [Электронный ресурс].–Режим доступа : \www/ URL:http://www.ajaxtips.ru/blog/javascript/40.html
5. Преимущества и недостатки AJAX! [Электронный ресурс].–Режим доступа: \www/ URL: http://www.petralexeev.ru/Courses/Slide/WebTe/6/5