Цю статтю почав на прохання новачків, які тільки починають освоювати JS/jQuery і, рано чи пізно, стикаються з проблемою, як на практиці використовувати технологію Ajax. У цій частині, я спробую простою мовою ( нехай не бентежить це користувачів просунутих) пояснити, як застосувати цю "фішку" з використанням бібліотеки jQuery у своїх проектах.
Отже... У jQuery є кілька методів, які здійснюють запити на серверну частину сайту без перезавантаження сторінки. Ми не будемо розглядати кожен метод окремо "під мікроскопом", тому що всі вони є урізаними/скороченими функція методу $.ajax() . Для початку, давайте помимо на код нижче, а далі розберемо його докладніше:
HTML ( файл index.html)
Cool page site Клікни мене!
У цьому файлі у нас підключена бібліотека jQuery, файл з нашим JS-кодом, кнопка (id="btn"), за натисканням на яку запускатиметься ajax-запит та блок (id="output"), в який ми будемо виводити результат роботи ajax-запиту
JS/jQuery ( файл script.js)
$(function()( var output = $("#output"); // блок виведення інформації $("#btn").on("click", function()( $.ajax(( url: "path/ to/handler.php", // шлях до php-оброблювачу type: "POST", // метод передачі даних dataType: "json", // тип очікуваних даних у відповіді data: (key: 1), // дані, які передаємо на сервер beforeSend: function()( // Функція викликається перед відправкою запиту output.text("Запит відправлений. Чекайте на відповідь."); ), error: function(req, text, error)( // відстеження помилок під час виконання ajax-запиту output.text("Х'юстон, У нас проблеми!" + text + " | " + error); ), complete: function()( // функція викликається після закінчення запиту output.append("
Запит повністю завершено!
"); ), success: function(json)( // функція, яка буде викликана у разі вдалого завершення запиту до сервера // json - змінна, що містить дані відповіді від сервера. Обзывайте її як завгодно;) output.html(json) // виводимо на сторінку дані, отримані з сервера)));)));));Цей код я одразу прокоментував, тому якихось особливих питань виникнути не повинно. Єдине, що хочу відзначити для любителів копіпаста, те, що потрібно вказувати реальний шлях до оброблювача в параметрі url. І ще один момент - у прикладі ми передаємо дані прописані вручну (ключ "key" зі значенням "1"), але в реальних проектах ці дані підхоплюються з будь-яких джерел, але про це поговоримо далі.
PHP-обробник ( файл handler.php)
Сенс роботи файлу time.php – виводимо поточний час на екран.
Завантажити вихідні файли прикладу (16,6 кб):
Програма, що динамічно завантажує контент, на вибір користувача.
Вміст файлу index.html.
Яку сторінку бажаєте відкрити?
$(document).ready(function()( $("#btn1").click(function()( $.ajax(( url: "page1.html), cache: false, success: function(html)( $ ("#content").html(html); ) )); ));$("#btn2").click(function()( $.ajax(( url: "page2.html", cache: false, success: function(html)( $("#content").html(html); ) )); )); ));У тілі документа створено форму, що має дві кнопки, за допомогою яких користувач здійснює вибір бажаного контенту. І контейнер для завантаження вмісту.
Подія натискання на кнопку "Сторінка 1" обробляється функцією $("#btn1").click(), а подія натискання на кнопку "Сторінка 2" обробляється функцією $("#btn2").click().
Вміст файлів page1.html і page2.html, які завантажуються в область контенту динамічно, є простими HTML-сторінками або текстовими файлами з контентом.
Завантажити вихідні файли прикладу (18,4 кб):
Розглянемо приклад, який надсилає введене ім'я користувача на сервер. Сервер при отриманні імені видає привітання та підраховує кількість символів у введеному імені.
Вміст файлу index.html.
Введіть ім'я:
$(document).ready(function()( $("#myForm").submit(function()( $.ajax(( type: "POST", url: "greetings.php), data: "username=") +$("#username").val(), success: function(html)( $("#content").html(html); ) )); return false; )); ));
У тілі документа створено форму для введення імені користувача. І контейнер для завантаження динамічного вмісту.
Зауважимо, що сама форма не має звичних полів action та method. Як обробник події натискання на кнопку "Надіслати", виступає функція $("#myForm").submit(). Розглянемо цю процедуру.
$("#myForm").submit(function()( $.ajax(( type: "POST", url: "greetings.php", data: "username="+$("#username"))).val( ), success: function(html)( $("#content").html(html); ) ));return false; ));
Як бачимо, основна робота знову пов'язані з функцією $.ajax(). На цей раз з'являються додаткові параметри, не розглянуті у прикладах 1 та 2. А саме:
Type: "POST" Тип передачі. data: "username="+$("#username").val() Параметри сервера. У разі ми передаємо вміст поля username - ім'я користувача. У загальному випадку параметри записуються також, як у методі GET, одним рядком, наприклад:
data: "username=Vasya&age=18&sex=male"
Звернімо увагу, що наприкінці написано рядок:
Return false; Це зроблено для того, щоб форма не намагалася передати дані до файлу, з якого вона запускається і не відбувалося перезавантаження сторінки.
Зміст файлу greetings.php.
Виводимо на екран привітання та підраховуємо кількість символів у імені.
Завантажити вихідні файли прикладу (16,8 кб):
Варто сказати в висновку, що крім очевидних плюсів створення сторінок з використанням динамічного контенту, що оновлюється, є ряд недоліків, які слід враховувати при розробці сайту, а саме:
1. На сторінках із динамічним оновленням контенту, кнопка "Назад" у браузері не працює коректно.
2. Сторінки з динамічним оновленням контенту не змінюють URL-адресу залежно від вмісту, тому не можуть бути додані до закладок.
3. Сторінки з динамічним оновленням контенту індексуються пошуковими системами, т.к. вони не виконують JavaScript.
Від наведених недоліків можна позбутися програмним шляхом. У цій статті такі методи не розглядаються.
Як виводити html за допомогою AJAXЗ цієї статті Ви дізнаєтесь про те, як можна виводити будь-який HTML-код через спеціальну технологію AJAX. Це не дуже легко і вимагає певних знань, але не варто хвилюватись, що у вас не вийде. Нижче буде дано докладну інструкцію, за якою навіть новачок зможе розібратися. Перш ніж братися безпосередньо до інструкції, відповім на запитання, а взагалі навіщо це потрібно і які є варіанти.
Взагалі, є два способи виведення контенту: або через JavaScript, або через AJAX. Моя думка, що краще використовувати AJAX, ніж JS, але чому краще – запитаєте Ви? Адже обидві технології ховають текст в окремих файлах. А відповідь у тому, що пошукові системи дійшли дуже високого рівня і вже в змозі визначати посилання, які містяться в яваскрипті. Наприклад, Google вже заявив про це, мабуть, незабаром і Яндекс так само заявить про це досягнення.
Інструкція з виводу контенту через AJAX
1) Додати до заголовної директорії наступний скрипт:
... ...
Таким чином ми підключимо необхідні бібліотеки для роботи AJAX прямо з їхнього офіційного сайту.
2) Створіть html або php документ з кодом, який ви хочете виводити через AJAX. Наприклад, створимо файл text-dlya-ajax.html і пропишемо в ньому:
Цей текст буде виведено через AJAX
3) Створіть файл JavaScript (.js). Зазвичай я називаю його ajax.js, щоб відразу зрозуміти його вміст. Додайте до нього наступний код:
(function($) ( $(function() ( $("#blockajax").load("СЮДИ_ПРОПИСИМО_ШЛЯХ_ДО_ФАЙЛУ_html/text-dlya-ajax.html"); )) ))(jQuery)
Тепер blockajax характеризуватиметься файлом text-dlya-ajax.html.
Примітка
Якщо потрібно вивести багато таких прив'язок "блок" = "html-код", то можна прописати скільки завгодно багато різних відповідностей:
(function($) ( $(function() ( $("#block1").load("block1.html"); $("#block2").load("block2.php"); ....). ............................. $("#blockN").load("blockN.html"); )) )) (jQuery)
4) Підключіть файл ajax.js до документа через заголовковий тег:
... ...
5) У місці де потрібно вивести html-текст файлу text-dlya-ajax.html напишіть:
Замість підвантажитися наш html-код із файлу text-dlya-ajax.html. В цьому і є сенс: що коду на сторінці немає, а висновок потрібного нам контенту є.
Більше робити нічого не потрібно. Тепер можна легко виводити контент через AJAX.
Ви можете завантажити вищезазначений приклад за наступним посиланням: ajax.rar
Примітка
До речі, через AJAX також можна виводити та інтерпітувати PHP-код. А це відкриває великі можливості перед Вами.
Навіщо потрібно виводити html за допомогою AJAX (3 причини)
1. Якщо бути дуже коротким, це потрібно для просування сайту в пошукових системах. Справа в тому, що посилання всередині сайту як би передають вагу між собою. Ті сторінки, на кого посилаються частіше, мають більшу вагу. Тому, щоб більш рівномірно розподілити вагу сайту між сторінками (а не зливати його весь за наскрізними посиланнями), потрібно якось зробити так, щоб ці наскрізні посилання не враховувалися пошуковими машинами.
Наприклад, на багатьох сайтах можна зустріти посилання на теги, які стоять на кожній сторінці сайту в сайдбарі. Виходить, що сторінки з мітками мають найбільшу вагу, хоча не містять важливої інформації. Також сюди можна зарахувати інші зайві посилання на сторінках, які в принципі не потрібні.
Звичайно, можна закрити всі посилання в мітках в , проте дослідження показали, що таким способом втрачається вага на сайті, тобто. ця вага нікому не передається, він як би просто випаровується (звучить дивно, але це так).
2. Другою причиною використання виводити HTML через AJAX є зменшення коду на сторінці сайту. Знову ж таки це потрібно для пошукових систем. Наприклад, футер сайту постійно дублює той самий код, який тільки забирає зайву вагу зі сторінки, тому було б добре цей код прибрати, але залишити футер. Аякс ідеально підходить для вирішення цієї проблеми.
3. Сторінка з використанням AJAX вантажиться побічно, тобто кожен елемент вантажиться синхронно і не залежить від інших. Таким чином, "важкі" елементи на сайті не будуть гальмувати завантаження інших частин сайту. Це зручніше для користувача, оскільки він бачить, що сайт вантажиться і почувається спокійніше, ніж коли завантаження сайту на чомусь зупинилося.
AJAX – це абревіатура, яка означає Asynchronous Javascript and XML. Насправді, AJAX не є новою технологією, так як Javascript, і XML існують вже досить тривалий час, а AJAX - це синтез позначених технологій. AJAX найчастіше асоціюється з терміном Web 2.0 і подається як новітнє Web-додаток.
При використанні AJAX немає необхідності оновлювати щоразу всю сторінку, тому що оновлюється лише її конкретна частина. Це набагато зручніше, тому що не доводиться довго чекати, і економічніше, тому що не всі мають безлімітний інтернет. Правда в цьому випадку, розробнику необхідно стежити, щоб користувач був у курсі того, що відбувається на сторінці. Це можна реалізувати за допомогою індикаторів завантаження, текстових повідомлень про те, що відбувається обмін даними із сервером. Необхідно також розуміти, що не всі браузери підтримують AJAX (старі версії та текстові браузери). Плюс Javascript може бути вимкнений користувачем. Тому не слід зловживати використанням технології та вдаватися до альтернативних методів подання інформації на Web-сайті.
Узагальним переваги AJAX:
- Можливість створення зручного Web-інтерфейсу
- Активна взаємодія з користувачем
- Зручність використання
Для того, щоб здійснювати обмін даними, на сторінці має бути створений об'єкт XMLHttpRequest, який є своєрідним посередником між Браузером користувача та сервером (рис. 1). За допомогою XMLHttpRequest можна надіслати запит на сервер, а також отримати відповідь у вигляді різноманітних даних.
Обмінюватися даними із сервером можна двома способами. Перший спосіб – це GET-запит. У цьому запиті ви звертаєтеся до документа на сервері, передаючи йому аргументи через URL. При цьому на стороні клієнта логічно використовуватиме функція Javascript`а escape для того, щоб деякі дані не перервали запит.
Клієнт частина, написана на Javascript, повинна забезпечувати необхідну функціональність для безпечного обміну із сервером та надавати методи для обміну даними будь-яким із перерахованих вище способів. Серверна частина повинна обробляти вхідні дані і на основі їх генерувати нову інформацію (наприклад, працюючи з базою даних), і віддавати її назад клієнту. Наприклад, для запиту інформації з сервера можна використовувати звичайний GET-запит з передачею кількох і невеликих за розміром параметрів, а для оновлення інформації, або додавання нової інформації потрібно використовувати вже запит POST, так як він дозволяє передавати великі обсяги даних.
Як було зазначено, AJAX використовує асинхронну передачу даних. Це означає, що поки передача даних, користувач може здійснювати інші, необхідні йому дії. В цей час слід сповістити користувача про те, що йде якийсь обмін даними, інакше користувач подумає, що сталося щось не те і може покинути сайт, або повторно викликати функцію, що «зависла», на його думку. Індикація під час обміну даними у програмі Web 2.0 відіграє дуже важливу роль: відвідувачі могли ще не звикнути до таких способів оновлення сторінки.
Відповідь від сервера може бути не тільки XML, як випливає з назви технології. Крім XML, можна отримати відповідь у вигляді звичайного тексту, або JSON (Javascript Object Notation). Якщо відповідь була отримана простим текстом, її можна відразу вивести в контейнер на сторінці. При отриманні відповіді у вигляді XML зазвичай відбувається обробка отриманого XML документа на стороні клієнта і перетворення даних до (X)HTML. При отриманні відповіді у форматі JSON клієнт повинен лише виконати отриманий код (функція Javascript eval) для отримання повноцінного об'єкта Javascript. Але тут потрібно бути обережним та враховувати той факт, що з використанням цієї технології може бути переданий шкідливий код, тому перед виконанням отриманого з сервера коду слід його ретельно перевірити та обробити. Існує така практика, як «холостий» запит, при якому жодна відповідь від сервера не надходить, лише змінюються дані на стороні сервера.
У різних браузерах даний об'єкт має різні властивості, але в цілому він збігається.
Методи об'єкта XMLHttpRequestЗауважте, що назви методів записані в тому самому стилі (Camel-style), що й інші функції Javascript. Будьте уважні під час їх використання.
abort()- Скасування поточного запиту до сервера.
getAllResponseHeaders()- Отримати всі заголовки відповіді від сервера.
getResponseHeader(«ім'я_заголовка»)- одержати зазначений заголовок.
open («тип_запиту», «URL», «асинхронний», «ім'я_користувача», «пароль»)- ініціалізація запиту на сервер, вказівка методу запита. Тип запиту та URL - обов'язкові параметри. Третій аргумент - булеве значення. Зазвичай завжди вказується true або взагалі не вказується (за замовчуванням - true). Четвертий і п'ятий аргументи використовуються для аутентифікації (це дуже небезпечно, зберігати дані про аутентифікацію у скрипті, оскільки скрипт може переглянути будь-який користувач).
send(«вміст»)- надіслати HTTP запит на сервер і отримати відповідь.
setRequestHeader(«ім'я_заголовка»,«значення»)- Встановити значення заголовка запиту.
Властивості об'єкта XMLHttpRequestonreadystatechange- одна з найголовніших властивостей об'єкта XMLHttpRequest. За допомогою цієї властивості задається обробник, який викликається щоразу при зміні статусу об'єкта.
readyState- Число, що позначає статус об'єкта.
responseText- Подання відповіді сервера як звичайного тексту (рядки).
responseXML- об'єкт документа, сумісний із DOM, отриманого від сервера.
status- Стан відповіді від сервера.
statusText- Текстове подання стану відповіді від сервера.
Слід докладніше розглянути властивість readyState:
- 0 - Об'єкт не ініціалізований.
- 1 - Об'єкт завантажує дані.
- 2 – Об'єкт завантажив свої дані.
- 3 - Об'єкт не повністю завантажений, але може взаємодіяти з користувачем.
- 4 - Об'єкт повністю ініціалізований; отримано відповідь від сервера.
Як уже говорилося вище, створення даного об'єкта для кожного типу браузера є унікальним процесом.
Наприклад, для створення об'єкта в Gecko-сумісних браузерах, Konqueror`і та Safari, потрібно використовувати наступний вираз:
Var Request = новий XMLHttpRequest();
А для Internet Explorer`а використовується таке:
Var Request = новий ActiveXObject("Microsoft.XMLHTTP");
Var Request = новий ActiveXObject("Msxml2.XMLHTTP");
Тепер, щоб досягти кросбраузерності, необхідно скласти всі функції в одну:
Function CreateRequest() ( var Request = false; if (window.XMLHttpRequest) ( // Gecko-сумісні браузери, Safari, Konqueror Request = new XMLHttpRequest(); ) else if (window.ActiveXObject) ( //Internet explorer try ( Request = new ActiveXObject("Microsoft.XMLHTTP"); ) catch (CatchException) ( Request = new ActiveXObject("Msxml2.XMLHTTP"); ) ) if (!Request) ( alert("Неможливо створити XMLHttpRequest"); ) return Request; )
Після цього можна створювати даний об'єкт і не турбується за працездатність на популярних браузерах. Але створити об'єкт можна у різних місцях. Якщо створити його глобально, то певний момент часу можливий буде лише один запит до сервера. Можна створювати об'єкт кожного разу, коли відбувається запит до сервера (це майже повністю вирішить проблему).
Запит на серверАлгоритм запиту до сервера виглядає так:
- Перевірка XMLHttpRequest.
- Ініціалізація з'єднання із сервером.
- Посилання запиту серверу.
- Обробка даних.
/* Функція посилки запиту до файлу на сервері r_method - тип запиту: GET або POST r_path - шлях до файлу r_args - аргументи виду a=1&b=2&c=3... r_handler - функція-обробник відповіді сервера */ function SendRequest(r_method , r_path, r_args, r_handler) ( // Створюємо запит var Request = CreateRequest(); // Перевіряємо існування запиту ще раз if (! Request) ( return; ) // Призначаємо користувальницький обробник Request.onreadystatechange = function() ( // Якщо обмін даними завершено if (Request.readyState == 4) ( //Передаємо управління оброблювача користувача r_handler(Request); ) ) // Перевіряємо, якщо потрібно зробити GET-запит if (r_method.toLowerCase() == "get" && r_args.length > 0) r_path += "?" + r_args; //Ініціалізуємо з'єднання Request.open(r_method, r_path, true); if (r_method.toLowerCase() == "post") ( //Якщо це POST- запит //Встановлюємо заголовок Request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf-8"); //Посилаємо запит Request.send(r_args); ) else ( //Якщо це GET-запит //Посилаємо нуль-запит Request.send(null); ) )
Створювати запит стало набагато простіше. Для прикладу напишемо функцію, яка отримуватиме вміст файлу на сервері і виводитиме його в контейнер.
Function ReadFile(filename, container) ( // Створюємо функцію обробник var Handler = function(Request) ( document.getElementById(container).innerHTML = Request.responseText; ) //Надсилаємо запит SendRequest("GET",filename,"", Handler);
Саме таким чином відбувається взаємодія із сервером.
Обробка відповідіУ попередньому прикладі ми зробили запит до сервера. Але вона, по суті, небезпечна, тому що ми не обробляємо стан об'єкта і стан відповіді від сервера.
Доповнимо наш код, щоб він зміг виводити візуальне сповіщення про процес завантаження.
Request.onreadystatechange = function() ( //Якщо обмін даними завершено if (Request.readyState == 4) ( //Передаємо керування оброблювача користувача r_handler(Request); ) else ( //Оповідаємо користувача про завантаження ) ) ...
Як ви вже знаєте, об'єкт XMLHttpRequest дозволяє дізнатися про статус відповіді від сервера. Скористайтеся цією можливістю.
Request.onreadystatechange = function() ( //Якщо обмін даними завершено if (Request.readyState == 4) ( if (Request.status == 200) ( // Передаємо управління оброблювача користувача r_handler(Request); ) else ( // Сповіщаємо користувача про помилку , що відбулася ) ) else ( / / Сповіщаємо користувача про завантаження ) ) ...
Варіанти відповіді від сервераВід сервера можна отримати дані кількох видів:
- Звичайний текст
JSON- це об'єктна нотація Javascript. З її допомогою можна уявити об'єкт у вигляді рядка (тут можна навести аналогію з функцією серіалізації). При отриманні даних JSON ви повинні виконати їх, щоб отримати повноцінний об'єкт Javascript і зробити з ним необхідні операції. Пам'ятайте, що така передача даних та виконання їх не є безпечними. Ви повинні стежити за тим, що надходить на виконання.
Приклад коду JSON:
( "data": ( "misc": [ ( "name" : "JSON-елемент один", "type" : "Підзаголовок 1" )), ( "name" : "JSON-елемент два", "type" : " Підзаголовок 2 " ) ] ) )
При отриманні такого коду, робимо таку дію:
Var responsedata = eval("(" + Request.responseText + ")")
Після виконання цього коду вам буде доступний об'єкт responsedata.
Робота з серверними мовами програмуванняТака робота нічим не відрізняється від звичайної. Для прикладів я візьму PHP як серверну мову. У частині клієнта нічого не змінилося, але серверна частина тепер представлена PHP-файлом.
За традицією, почнемо з вітання нашому чудовому світу:
Echo "Hello, World!";
При зверненні до файлу клієнту повернеться рядок Hello, World. Як ви розумієте, це надає найширші можливості для побудови додатків. На основі передачі аргументів під час виклику сервера за допомогою XMLHttpRequest можна зробити параметризацію виводу, тим самим забезпечивши велику функціональність Web-програми.
Крім PHP, можна використовувати будь-яку іншу серверну мову програмування.
JQuery це бібліотека JavaScript, мета якої "пиши менше, роби більше". jQuery легко підключити до сайту та почати використовувати. За допомогою jQuery стає набагато простіше використовувати JavaScript на вашому сайті.
jQuery усуває цілу прорву рядків коду javascript, і дозволяє реалізувати цю прорву рядків лише одним методом.
Що таке AJAX?AJAX - це асинхронний (тобто браузер, надіславши запит, може робити будь-що, наприклад, показати повідомлення про очікування відповіді, прокручувати сторінку, тощо) JavaScript і XML. Він використовується для створення динамічних та швидких веб-сторінок. AJAX дозволяє нам оновлювати частину веб-сторінки без перезавантаження сторінки.
Що щодо jQuery та AJAX?Комбінація jQuery та AJAX забезпечують потужну функціональність. За допомогою jquery та ajax ви можете зробити запит та отримати інформацію у різних форматах, включаючи XML, HTML і навіть звичайний текст. Для обміну даними можна використовувати формат JSON. Дані отримані за запитом ajax ми можемо використовувати в нашій html сторінці.
jQuery робить існуючий браузерний Ajax API потужнішим і простішим у використанні. Створювати виклики ajax звичайним способом, використовуючи javascript, трохи важко: тому що ви повинні враховувати, що різні браузери потребують різних підходів до створення об'єкта XMLHttpRequest . Крім того, надсилати дані, наприклад, з форм, стає складніше, якщо ви використовуєте звичайний javascript для виклику ajax.
jQuery забезпечує просту та потужну функціональність, яка розширює javascript AJAX методи та забезпечує більш гнучкий підхід.
У цій невеликій статті я покажу вам, як використовувати jQuery та AJAX у простій php формі . Давайте почнемо... Щоб використовувати jQuery і AJAX нам знадобляться два файли, в першому файлі буде знаходитись код html/php, за допомогою якого і складатиметься ajax запит. У другому файлі ми будемо обробляти запит ajax і повертати результат на першу сторінку.
Крок 1. Створіть файл school.php та вставте в нього наступний код:У наведеному вище коді ми отримуємо ім'я та номер студента та, використовуючи jquery та ajax, відсилаємо їх у details.php .
function getdetails()( var name = $("#name").val(); var rno = $("#rno").val(); $.ajax(( type: "POST", url: "details .php", data: (fname:name, id:rno) )).done(function(result) ( $("#msg").html(" Address of Roll no " +rno +" is "+result) ;));
| Your Name: | ||
| Roll Number: | ||
У наведеному вище коді ми отримуємо адресу студента за допомогою порядкового номера та його імені.
Для даного прикладу вам знадобиться створити базу даних school та таблицю students. Таблиця student містить поля з іменами, порядковим номером та адресою.
Сподіваюся, ця стаття буде вам корисною.
