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 містить поля з іменами, порядковим номером та адресою.
Сподіваюся, ця стаття буде вам корисною.
У цій статті поговоримо про взаємодію 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, створимо два файли:
1. ajax_page.html
2. get_ajax.php
Спочатку розглянемо сторінку користувача програми, тобто ajax_ page. html :
Ajax + PHP: приклад сайт function XmlHttp() ( var xmlhttp; try(xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");) catch(e) ( try (xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");)) = false;) ) if (!xmlhttp && typeof XMLHttpRequest!="undefined") ( xmlhttp = new XMLHttpRequest(); ) return xmlhttp; ) function ajax(param) ( if (window.XMLHttpRequest) req = new XmlHtt method=(!param.method ? "POST" : param.method.toUpperCase()); if(method=="GET") ( send=null; param.url=param.url+"&ajax=true"; ) else ( send=""; for (var і in param.data) send+= i+"="+param.data[i]+"&"; .url, true);if(param.statbox)document.getElementById(param.statbox).innerHTML = " 
"; req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); req.send(send); req.onreadystatechange = function() ( if (req.readyState == 4 && req .status == 200) //якщо відповідь позитивна ( if(param.success)param.success(req.responseText); ) ) ) Тут прийматимемо звіти про роботу ajax програми та відповідь сервера.
Поле введення 1
Введіть текст.
Поле введення 2
Довільний текст... Я тягнуся від цієї статті, і хочу підписатися на RSS, щоб читати такі статті частіше!!!
ajax_page.html:
Розберемо JavaScript бік цього прикладу:
XmlHttp() – функція яка створює об'єкт XMLHttpRequest(), вона написана максимально компактно та кроссбраузерно.
ajax(param) – наш обробник при виклик подій (onclick), приймає в масиві param необхідні дані:
url – куди відсилати дані, причому може бути у такому вигляді page. php? parameter= value , тобто інформація може передаватися методом GET.
statbox – ід html блоку який прийматиме результати роботи ajax + php програми.
метод – метод відправлення даних, може бути POST або GET. У нашому прикладі ми використовуємо метод POST, але в той же час через url можна передавати інформацію GET методом.
data – масив даних, що передаються. У нашому прикладі дані автоматично беруться з поля 1 і 2, хоча можна просто писати data: (name: "value").
success – ім'я функції або сама функція, яка оброблятиме отримані дані (текст).
Виклик функції ajax як ви бачите, зроблений подією onclick=ajax().
Тепер розберемо серверну сторону ajax + PHP програми, тобто файл get_ ajax. php:
Тут все набагато простіше. Спочатку встановлюємо кодування вихідних даних за допомогою 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="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)
