→ JavaScript - Асинхронні AJAX запити на прикладах. Як виводити html за допомогою AJAX Ajax вставка html коду

JavaScript - Асинхронні AJAX запити на прикладах. Як виводити html за допомогою AJAX Ajax вставка html коду

Якщо ви тільки почали вивчати PHP і вже створювали форми для відправки даних GET і POST запитами, то напевно замислювалися: «Як обробляти дані і оновлювати їх без перезавантаження сторінки?». У цій статті ми на простому прикладі покажемо, як реалізувати таку обробку, а допоможе нам в цьому AJAX.

AJAX (Asynchronous Javascript and XML) це технологія, яка дозволяє web-додатків виконувати код Javascript без перезавантаження сторінки. Вірніше оновлюється не вся сторінка, а тільки та частина, яка нам потрібна, в результаті чого значно зростає швидкодія інтерфейсу.

Реалізуємо відправку даних із списку, обробку цих даних на сервері, і повернення оброблених даних назад клієнту.

Для початку потрібно імпортувати бібліотеку JQuery для працездатності AJAX. усередині тега

вашого проекту прописуємо:

AJAX працює з HTML елементами через атрибут id, тому не забуваємо прописати його нашої формі.

Поза форми створимо кнопку для відправки і блок div, в який будемо виводити отриманий результат:

При натисканні на кнопку буде запускатися функція, прописуємо її назву в атрибуті onclick. Задаємо id для блоку.

Ну і тепер перейдемо до найцікавішого - створення функції.

Дамо їй назву send. За допомогою функції serialize перетворимо набір елементів з нашої форми в рядок, придатну для передачі в оброблювач. У url пропишемо шлях до обробника, який створимо пізніше. Передамо в data дані з msg. Відбувається запит в обробник.

Тепер потрібно створити обробник. Ім'я йому ми вже поставили - auto_result.php. Додамо в нього наступний код:

Даний обробник отримує дані про категорії методом POST, і відправляє номер категорії клієнта. Якщо категорія не була обрана, то відправляється значення «no».

Повернемося до функції send. Всередині неї функція success отримує номер категорії, відправлений оброблювачем. Після цього відбувається вибір виведеного повідомлення на основі отриманої категорії.

На цьому реалізація найпростішої динамічної обробки завершена.

Урок, в якому на прикладах розглянемо створення простих асинхронних AJAX запитів до сервера. В якості методу передачі запитів будемо використовувати як метод GET, так і метод POST. На сервері обробку запитів виконаємо за допомогою скриптів PHP.

Що таке асинхронний запит AJAX?

Технологія AJAX в основному використовується для створення асинхронних запитів до сервера. Асинхронний запит - це такий запит, який виконується в фоновому режимі і не заважає користувачеві взаємодіяти зі сторінкою.

При відправці асинхронного запиту, браузер (сторінка) не «заморожується", тобто з нею, як і раніше, можна працювати. Але тоді як дізнатися, коли прийде відповідь з сервера. Щоб це визначити, необхідно відстежувати властивість браузера readyState (стан готовності). Дана властивість містить число, за значенням якого можна судити про те, в якій стадії знаходиться запит. У наступній таблиці наведено основні значення властивості readyState і відповідні їм стану.

Тобто виходить, що нам необхідно відстежити, коли значення у властивості readyState дорівнюватиме 4. Це буде означати те, що на відправлений запит, прийшла відповідь з сервера. Решта значення на практиці використовуються досить рідко, і деякі браузери можуть їх не підтримувати.

Для того щоб визначити на якій стадії знаходиться запит, необхідно використовувати подія об'єкта XMLHttpRequest onreadystatechange. Дана подія відбувається кожного разу, коли змінюється значення властивості readyState. Отже, в обробнику цієї події (неіменованого або іменованої функції) можна прописати дії, які будуть перевіряти одно дана властивість 4 І хоча б одно, то наприклад, вивести відповідь сервера на сторінку.

Створення асинхронного AJAX запиту (метод GET)

Розглянемо створення асинхронного AJAX запиту на прикладі, який буде після завантаження сторінки вітати користувача і відображати його IP-адресу.

Для цього необхідно створити на сервері 2 файли в одному каталозі:

  1. welcome.html - HTML-сторінка, яка буде відображатися користувачеві. У цій же сторінки помістимо скрипт, який буде здійснювати всі необхідні дії для роботи AJAX на стороні клієнта.
  2. processing.php - PHP-файл, який буде обробляти запит на стороні сервера, і формувати відповідь. Почнемо розробку зі створення основної структури файлу welcome.html
Приклад роботи AJAX

Приклад роботи AJAX

Розглянемо послідовність дій, які необхідно виконати на стороні клієнта (в коді JavaScript):

    Підготуємо дані, необхідні для виконання запиту на сервері. Якщо для виконання запиту на сервері дані ніякі не потрібні, то даний етап можна пропустити.

    Створимо змінну, яка буде містити примірник об'єкта XHR (XMLHttpRequest).

    Налаштуємо запит за допомогою методу open ().

    Вказуються такі параметри:

    • Метод, за допомогою якого буде надсилатися запит на сервер (GET, POST).
    • URL-адресу, який буде обробляти запит на сервері.
    • Тип запиту: синхронний (false) або асинхронний (true).
    • Ім'я та пароль при необхідності.

  1. Передплатимо подія onreadystatechange об'єкта XHR і вкажемо обробник у вигляді анонімної або іменованої функції. Після цього створимо код всередині цієї функції, який буде перевіряти стан відповіді, і виконувати певні дії на сторінці. Відповідь, який приходить з сервера, завжди знаходиться у властивості responseText.

    Додатково з перевіркою значення властивості readyState числу 4, можна перевіряти і значення властивості status. Дана властивість визначає статус запиту. Якщо воно дорівнює 200, то все OK. А інакше сталася помилка (наприклад, 404 - URL не знайдене).

    Відправимо запит на сервер за допомогою методу send ().

    Якщо використовуємо для відправки запиту метод GET, то передавати дані в параметр даного методу не треба. Вони передаються в складі URL.

    Якщо використовуємо для відправки запиту метод POST, то дані необхідно передати в якості параметра методу send (). Крім цього, перед викликом даного методу необхідно встановити заголовок Content-Type, щоб сервер знав в якому кодуванні прийшов до нього запит і зміг його розшифрувати.

Вміст елемента script:

// 2. Створення змінної request var request \u003d new XMLHttpRequest (); // 3. Налаштування запиту request.open ( "GET", "processing.php", true); // 4. Підписка на подію onreadystatechange і обробка його за допомогою анонімної функції request.addEventListener ( "readystatechange", function () (// якщо стану запиту 4 і статус запиту 200 (OK) if ((request.readyState \u003d\u003d 4) && (request.status \u003d\u003d 200)) (// наприклад, виведемо об'єкт XHR в консоль браузера console.log (request); // і відповідь (текст), що прийшов з сервера у вікні alert console.log (request.responseText) ; // отримати елемент c id \u003d welcome var welcome \u003d document.getElementById ( "welcome"); // замінити вміст елемента відповіддю, які прийшли з сервера welcome.innerHTML \u003d request.responseText;))); // 5. Відправлення запиту на сервер request.send ();

В результаті файл welcome.html матиме наступний код:

Приклад роботи AJAX

Приклад роботи AJAX

На сервері (за допомогою php):

  1. Отримаємо дані. Якщо дані послані через метод GET, то з глобального масиву $ _GET [ "ім'я"]. А якщо дані передані за допомогою методу POST, то з глобального масиву $ _POST [ "ім'я"].
  2. Використовуючи ці дані, виконаємо деякі дії на сервері. В результаті яких отримаємо деяку відповідь. Виведемо його за допомогою echo.

Створення асинхронного AJAX запиту (метод POST)

Змінимо вищенаведений приклад. Тепер AJAX запит до сервера буде виконуватися після натискання на кнопку. Він буде отримувати ім'я, яке ввів користувач в елемент input і відправляти його за допомогою методу POST на сервер. Після отримання відповіді з сервера, замінимо їм вміст елемента div на сторінці.

Приклад роботи AJAX

Приклад роботи AJAX



Як виводити 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.

Примітка
Якщо потрібно вивести багато таких прив'язок "блок" \u003d "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. Якщо бути дуже коротким, то це потрібно для просування сайту в пошукових системах. Справа в тому, що посилання всередині сайту як би передають вагу між собою. Ті сторінки на кого посилаються частіше, мають більшу вагу. Тому щоб більш рівномірно розподілити вагу сайту між сторінками (а не зливати його весь за наскрізними посиланнями) потрібно якось зробити так, щоб ці наскрізні посилання не враховувалися пошуковими машинами.

Наприклад, на багатьох сайтах можна зустріти посилання на мітки, які стоять на кожній сторінці сайту в сайдбарі. Виходить, що сторінки з мітками мають найбільші ваги, хоча не містять важливої \u200b\u200bінформації. Також сюди можна віднести інші зайві посилання на сторінках, які в принципі не потрібні.

Звичайно, можна закрити всі посилання в мітках в, однак дослідження показали, що таким способом втрачається вага на сайті, тобто ця вага нікому не передається, він як би просто випаровується (звучить дивно, але це так).

2. Другою причиною використання виводити html через AJAX є зменшення коду на сторінці сайту. Знову таки це потрібно для пошукових систем. Наприклад, футер сайту постійно дублює один і той же код, який тільки забирає зайву вагу зі сторінки, тому було б добре цей код прибрати, але футер залишити. Аякс ідеально підходить для вирішення цієї проблеми.

3. Сторінка з використанням AJAX вантажиться по блоках, тобто кожен елемент як би вантажитися синхронно і не залежить від інших. Таким чином "важкі" елементи на сайті не будуть гальмувати завантаження інших частин сайту. Це більш зручно для користувача, оскільки він бачить, що сайт вантажиться і відчуває себе більш спокійно, ніж коли завантаження сайту на чимось застопорилася.

В даній статті поговоримо про взаємодію ajax з php. Як зв'язати роботу ajax скрипта і php коду? Як застосувати ajax в веб розробці? Якщо вас цікавлять такі питання, ви знайдете на них відповіді в нашій статті. А також приклади ajax php коду.

Застосування ajax + php

Для того, щоб зрозуміти, чи потрібен нам взагалі ajax з php, давайте розберемося для чого він може бути корисний. Застосування ajax + php може бути різноманітним, єдине, то що, не можна конструювати елементи сторінки за допомогою даної технології, які несуть в собі релевантність для пошукових систем. Тому що ajax підвантажує елементи сторінки після її завантаження при виклику js подій, але як нам відомо, пошукові системи не вміють читати javascript коду, тому потрібно ретельно вибирати де потрібно, а де не потрібно застосовувати ajax з php.

Де можна застосуватиajax +php?

1. Додавання нового коментаря

4. Організація пошуку на сайті (автозавершення)

5. Покрокова реєстрація користувача на сайті

6. Підписка на e-mail

7. Перегляд фотографій

Та інші…

Як бачите варіантів застосування ajax + php маса. Тобто, можна застосувати там, де перезавантаження сторінки буде не доречною, де потрібно просто обмінятися даними з сервером.

Де не варто застосовуватиajax +php

Моя думка об'єктивне, може ви думаєте інакше, але покладаючись на мій досвід скажу що ajax + php не варто застосовувати:

1. Для реалізації меню

2. Реалізації вкладок на сторінці (Наприклад: коли в інтернет магазині на сторінці товару ви бачите огляд, інформація, коментарі, фото, відео ... не потрібно робити завантаження даних при перемиканні даних вкладок.)

І інші негативні приклади, які можуть нашкодити краще ранжирування вашої сторінки.

Взаємодія ajax з php

По суті, технологія ajax не може існувати без php скриптів, так як ajax, тільки відправляє дані на сервер і приймає зворотний відповідь, при цьому без перезавантаження сторінки. Тому правильніше запитати, як зв'язати роботу ajax і php. Але про це ми поговоримо в наступному пункті статті (ajax php приклад), а зараз розберемося з специфікою роботи ajax.

Для відправки даних на сервер, потрібно створити об'єкт XMLHTTPRequest. За допомогою нього відкрити url (php скрипт), послати на нього дані (POST або GET метод), отримати відповідь, і засобами знань мови js вивести отриману відповідь сервера на монітор (відповіддю може бути будь-який фрагмент або елемент сторінки сайту).

Для прояснення подивіться нижче надану схему яка ілюструє взаємодію ajax з php.


Ajax + php приклад

Для прикладу взаємодії ajax з php, створимо два файли:

1. ajax_page.html

2. get_ajax.php

Спочатку розглянемо призначену для користувача бік додатки, тобто ajax_page.html:

Ajax + PHP: приклад | сайт

Тут будемо приймати звіти про роботу ajax додатки і відповідь сервера.

Поле введення 1

Поле введення 2

ajax_page.html:


Розберемо javascript сторону даного прикладу:

XmlHttp () - функція яка створює об'єкт XMLHttpRequest (), вона написана максимально компактно і кросбраузерності.

ajax (param)- наш обробник при виклику подій (onclick), приймає в масиві paramнеобходімие дані:

url - куди відсилати дані, причому він може бути в такому вигляді page.php?parameter \u003dvalue, Тобто інформація може передаватися по методу GET.

statbox - ід html блоку який буде приймати результати роботи ajax + php додатки.

method - метод відправки даних, може бути POST або GET. У нашому прикладі ми використовуємо POST метод, але в той же час через url можна передавати інформацію GET методом.

data - масив даних, що передаються. У нашому прикладі, дані автоматично беруться з поля 1 і 2, хоча можна просто писати data: (name: "value").

success - ім'я функції або сама функція, яка буде обробляти отримані дані (текст).

Виклик функції ajax як ви бачите зроблений подією onclick \u003d ajax ().

Тепер розберемо серверну сторону ajax + php додатки, тобто файл get_ajax.php:

"; While (list ($ key, $ val) \u003d each ($ _POST)) ($ val \u003d iconv (" UTF-8 "," CP1251 ", $ _POST [$ key]); echo" ". $ Key.": "."

".Stripslashes ($ val)."
"; } ?>

Тут все набагато простіше. Спочатку встановлюємо кодування виходять даних, за допомогою header. Встановлюємо заборона на кешування даних. sleep (2) - призупиняє роботу скрипта на 2 секунди, це для того, щоб побачити запропонований анімацію очікування wait.gif. Виводимо отримані дані, при цьому читаючи всі елементи масиву $ _POST і перетворюючи їх в потрібне кодування (для кирилиці).

Для запуску нашого ajax php додатки завантажуємо в браузер сторінку ajax_page.html

Ось що у мене вийшло при натисканні кнопки TEST AJAX:


Це відповідь, отриманий від файлу get_ajax.php:


Залишилися ще питання з приводуajax +php? Задайте їх в коментарях нижче ...

Дану статтю почав на прохання новачків, які тільки починають освоювати JS / jQuery і, рано чи пізно, зіштовхуються з проблемою, як же на практиці використовувати технологію Ajax. У цій частині, я спробую простою мовою ( нехай не буде злою це користувачів просунутих) Пояснити, як застосувати цю "фішку" з використанням бібліотеки jQuery в своїх проектах.

Отже ... В jQuery є кілька методів, які здійснюють запити до серверної частини сайту без перезавантаження сторінки. Ми не будемо розглядати кожен метод окремо "під мікроскопом", з тієї простої причини, що всі вони є урізаними / скороченими функція методу $ .Ajax (). Для початку, давайте помотрім на код нижче, а далі розберемо його детальніше:

HTML ( файл index.html)

Cool page site

У цьому файлі у нас підключена бібліотека jQuery, файл з нашим JS-кодом, кнопка (id \u003d "btn"), після натискання на яку буде запускатися ajax-запит і блок (id \u003d "output"), в який ми будемо виводити результат роботи ajax-запиту

JS / jQuery ( файл script.js)

$ (Function () (var output \u003d $ ( "# 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)

0) $ req \u003d "

Отримали значення рівне: ". $ Key."

"; // присвоюємо змінної потрібні дані echo json_encode ($ req); // повертаємо дані відповіддю, перетворивши в JSON-рядок exit; // зупиняємо подальше виконання скрипта)

І нарешті, PHP-обробник, в якому обробляються дані запиту і формується відповідь, який повертається назад на розтерзання нашому JS-коду. Тут все гранично просто. Чому ми перетворюємо дані в JSON-рядок - тому, що ми вказали в параметрі dataType, Що саме такі дані потрібно очікувати у відповіді. А чому саме такі - тому, що це найбільш зручний формат для подальшої роботи: можна передавати як рядок, так і масив даних або ж відразу підготовлений HTML-код для вставки на сторінку.

Що ж буде відбуватися на кожному етапі:

  1. При натисканні на кнопку, починає працювати JS-код
  2. Перед відправкою, спрацює функція в beforeSend. Вона виведе в блок "output" повідомлення про початок запиту
  3. Якщо щось піде не так ( наприклад, шлях до обробника вказано не вірно), То спрацює функція error і в блок виведеться помилка
  4. Якщо все нормально, то запуститься функція success і в блоці з'явиться результат нашого запиту
  5. На останньому етапі - виконається функція complete, Яка додасть в блок виведення повідомлення про закінчення AJAX-запиту

*beforeSend і complete можна використовувати, наприклад, для виведення який-небудь картинки-прелоадера, щоб давати користувачеві зрозуміти про те, що процес йде. І це далеко не всі корисні опції методу $ .Ajax (), Але той необхідний мінімум, який дозволить правильно і грамотно функціонувати методу.

І ще один корисний метод jQuery, який вартий уваги в рамках цієї тема - $ .AjaxSetup (). Якщо у вашому проекті буде безліч Ajax-запитів, то цей метод, допоможе уникнути постійного перерахування однакових установок методу $ .Ajax (). Наприклад, якщо у вас один файл-обробник, використовуєте один і той же метод передачі даних, приймаєте дані в однаковому форматі і т.д., то це прописується один раз в методі $ .AjaxSetup () і в подальшому всі ці установки, будуть автоматично застосовані до всіх запитам.

// Описуємо загальні установки для всіх ajax-запитів $ .ajaxSetup ((url: "path / to / handler.php", // шлях до php-обробника type: "POST", // метод передачі даних dataType: "json" , // тип очікуваних даних у відповіді beforeSend: function () (// Функція викликається перед відправкою запиту output.text ( "Запит відправлений. Чекайте на відповідь.");), error: function (req, text, error) (// відстеження помилок під час виконання ajax-запиту output.text ( "Х'юстон, у нас проблеми!" + text + "|" + error);), complete: function () (// функція викликається після закінчення запиту output.append ( "

Запит повністю завершено!

");))); $ (Function () (var output \u003d $ (" # output "); $ (" # btn "). On (" click ", function () (// Тепер, вся запис будь-якого запиту , буде зводиться // до параметрів data і success: дані, які передаємо // і обробка відповіді від сервера $ .ajax ((data: (key: 1), // дані, які передаємо на сервер success: function (json) ( // функція, яка буде викликана в разі вдалого завершення запиту до сервера output.html (json);)));));));

В наступній частині, розглянемо отримання і передачу даних средаства AJAX з форм і інших джерел, а так само поділюся маленькими корисними, які Вам знадобляться в роботі над своїми проектами.

 

 
Це цікаво: