- Використання jQuery і PHP для створення Web-сторінок на базі Ajax
- Часто використовувані абревіатури
- Що таке Ajax?
- Що таке jQuery?
- Лістинг 1. Додавання двокрапок з використанням jQuery
- Створення простого додатка: телефонна книга
- Створення таблиці бази даних
- Лістинг 2. Код SQL для створення таблиці directory
- Лістинг 3. Команди SQL для заповнення таблиці
- Створення файлу index.php
- Лістинг 4. Файл HTML з формою
- Створення файлу find.php
- Лістинг 5. Створення файлу find.php
- Лістинг 6. Створення оператора SQL
- Лістинг 7. Роздруківка рядки командної echo
- Додавання jQuery в index.php
- Лістинг 8. Створення функції для запобігання типової поведінки пошукової форми
- Лістинг 9. Функція ajax_search ()
- Малюнок 1. Ajax-пошук в дії
- Ресурси для скачування
- Використання jQuery і PHP для створення Web-сторінок на базі Ajax
- Часто використовувані абревіатури
- Що таке Ajax?
- Що таке jQuery?
- Лістинг 1. Додавання двокрапок з використанням jQuery
- Створення простого додатка: телефонна книга
- Створення таблиці бази даних
- Лістинг 2. Код SQL для створення таблиці directory
- Лістинг 3. Команди SQL для заповнення таблиці
- Створення файлу index.php
- Лістинг 4. Файл HTML з формою
- Створення файлу find.php
- Лістинг 5. Створення файлу find.php
- Лістинг 6. Створення оператора SQL
- Лістинг 7. Роздруківка рядки командної echo
- Додавання jQuery в index.php
- Лістинг 8. Створення функції для запобігання типової поведінки пошукової форми
- Лістинг 9. Функція ajax_search ()
- Малюнок 1. Ajax-пошук в дії
- Ресурси для скачування
- Використання jQuery і PHP для створення Web-сторінок на базі Ajax
- Часто використовувані абревіатури
- Що таке Ajax?
- Що таке jQuery?
- Лістинг 1. Додавання двокрапок з використанням jQuery
- Створення простого додатка: телефонна книга
- Створення таблиці бази даних
- Лістинг 2. Код SQL для створення таблиці directory
- Лістинг 3. Команди SQL для заповнення таблиці
- Створення файлу index.php
- Лістинг 4. Файл HTML з формою
- Створення файлу find.php
- Лістинг 5. Створення файлу find.php
- Лістинг 6. Створення оператора SQL
- Лістинг 7. Роздруківка рядки командної echo
- Додавання jQuery в index.php
- Лістинг 8. Створення функції для запобігання типової поведінки пошукової форми
- Лістинг 9. Функція ajax_search ()
- Малюнок 1. Ajax-пошук в дії
- Ресурси для скачування
Використання jQuery і PHP для створення Web-сторінок на базі Ajax
Бібліотеки jQuery спрощують PHP-розробнику рішення трудомістких завдань
Більшість РНР-розробників освоювали цю мову по-старому, почавши з визначення і побудови простих РНР-сторінок та їх сполуки з простими ж таблицями MySQL. Надалі, набуваючи різноманітного досвіду, вони вчилися створювати на РНР все більш складну функціональність, об'єднувати таблиці в MySQL і вирішувати інші складні завдання.
Часто використовувані абревіатури
- CSS: Cascading Style Sheet
- HTML: Hypertext Markup Language
- XHTML: Extensible Hypertext Markup Language
- XML: Extensible Markup Language
Для деяких Ajax досі залишається таємницею за сімома печатками. У них не знаходиться часу, терпіння або знань, щоб як слід опанувати ім. Шкода, тому що багатьом клієнтам подобається функціональність в стилі Ajax, яка спрощує роботу з Web-додатками. Прочитавши цю статтю, ви дізнаєтеся досить, щоб стати справжнім профі по Ajax.
Ми покажемо, як використовувати бібліотеку jQuery, щоб легко додавати функціональність Ajax в будь-який РНР-додаток. Ми створимо просте Web-додаток із застосуванням РНР і MySQL - телефонну книгу з іменами і номерами телефону. У ній буде все необхідне - кошти пошуку по іменах або номерами телефону, таблиця MySQL і т.п. Потім ми додамо jQuery, щоб можна було шукати по іменах і номерам телефону в режимі реального часу, в процесі набору тексту. Вирішивши цю задачу, ви не тільки будете добре знати основи jQuery, але і розберетеся в деяких фундаментальних поняттях Ajax.
Що таке Ajax?
Кращий спосіб описати Ajax - це порівняти його з тим, що вам вже знайомо. Більшість Web-сторінок і додатків працює в синхронному режимі. Ви натискаєте на посилання або кнопку Submit пошукової форми, і запит передається на сервер, який обробляє його і повертає відповідь. Цю модель найточніше назвати так: «натиснув, почекав, побачив». Цей нескінченний цикл поновлення-повторення всім добре відомий. Іншими словами, щоб відображати на сторінці постійно оновлювану інформацію, потрібно або ввести якийсь механізм автоматичного оновлення, або запропонувати користувачеві натискати на посилання.
З Ajax все не так. Перша A в слові Ajax означає асинхронний. Ajax дозволяє створювати сторінки на будь-якій мові програмування, а потім наповнювати різні частини цих сторінок інформацією з бази даних або будь-якого іншого централізованого процесу на сервері. Наприклад, у вас є сайт електронної комерції, де демонструються продаються продукти. На сторінці кожного продукту є звичайні елементи: заголовки, опис, фотографія, кількість товару на складі.
Припустимо, потрібно тримати відвідувачів в курсі того, скільки одиниць товару залишилося на складі. Можна додати функцію Ajax, яка буде запускати окрему РНР-сторінку із запитом MySQL, а потім передавати цю інформацію на первинну сторінку без будь-яких дій з боку користувача і без всякої синхронної послідовності подій типу натиснув-почекав-побачив.
Буква j в слові Ajax означає JavaScript, і це пояснює джерело такої поведінки. У ньому і гідність даного підходу, і його недолік. Гідність тому, що весь код працює на стороні клієнта, так що він легко переноситься і не впливає на сервер. А недолік для багатьох РНР-розробників полягає в тому, що це інша, незвична для них середу. Тут-то і виходять на сцену інструменти, подібні jQuery: вони значно спрощують взаємодію з Ajax, прискорюючи процес розробки.
А як щодо двох останніх букв в назві: а і x? Вони означають and XML, хоча XML-частина насправді використовується не завжди. Багато Ajax-додатки добре працюють і без XML-коду: вони передають просто HTML або навіть звичайний текст. Можливо, точніше було б розшифровувати x як XMLHttpRequest, так як цей об'єкт використовується для отримання даних у фоновому режимі, тобто без перешкод для відображення або поведінки існуючої сторінки.
Що таке jQuery?
jQuery - це компактна бібліотека JavaScript, створена Джоном Резігом (John Resig) і опублікована в інтернеті на початку 2006 року. Це безкоштовне і відкрите ПЗ, яке розповсюджується за двома ліцензіями: Массачусетського технологічного інституту (MIT) і GNU General Public License. Вона привернула безліч розробників у всьому світі своєю простотою і наочністю.
Секрет її популярності в тому, що ця проста в застосуванні бібліотека спрощує JavaScript для всіх (навіть для найзатятіших back-end програмістів), дозволяючи без виснажливої роботи домагатися чудових ефектів. З її допомогою можна створювати набори елементів Document Object Model (DOM), модифікувати і маніпулювати CSS, вводити елементи анімації і працювати з Ajax. Вся ця функціональність забезпечується єдиним файлом JavaScript, який можна завантажити з сайту jQuery (див. ресурси ).
Завантаживши jQuery, можна додати його до будь-якого файлу HTML або РНР, включивши простий тег <script>:
<Script type = "text / javascript" src = "/ path / to / jquery.js"> </ script>Припустимо, перед вами стоїть досить проста, але нудна завдання з великою кількістю ручних операцій типу додавання двокрапки (:) в кінці кожної мітки форми на сайті. Можна йти напролом, відшукуючи кожну мітку форми і додаючи в кінці рядка двокрапка, а можна використовувати наступний код jQuery:
Лістинг 1. Додавання двокрапок з використанням jQuery
<Script type = "text / javascript"> $ (document) .ready (function () {$ ( "label"). Append ( ":");}); </ Script>Це проста функція: вона чекає, поки сторінка буде повністю підготовлена і завантажена (для цього служить частина $ (document) .ready ()), виконує анонімну функцію, відшукувати все елементи DOM label, а потім в кінці знайденого тексту додає двокрапка. Функція $ () дозволяє звертатися до елементів DOM по їх природним іменах, що робить цей інтерфейс ідеальним вибором для розробників, вже знайомих з DOM.
Звичайно, за допомогою jQuery можна робити багато інших речей, але це хороший перший крок. Проста вбудована функція jQuery буде працювати в будь-якому випадку, так як вона чекає закінчення завантаження сторінки. Інша рядок коду вносить зміни в усі знайдені елементи DOM label, і все це відбувається з боку клієнта, без необхідності тупо перебирати всю зроблену розмітку і вносити в неї зміни.
Створення простого додатка: телефонна книга
Тепер, коли основи jQuery прояснилися, давайте побудуємо просту телефонну книгу на базі РНР і MySQL. Ця програма складається з трьох частин:
- таблиці MySQL з іменами і номерами телефону
- файлу index.php з формою пошуку
- сторінки find.php, яка звертається до таблиці бази даних.
Створимо кожен елемент окремо.
Створення таблиці бази даних
Створення таблиці бази даних в MySQL - мабуть, найпростіша частина. Ця таблиця повинна містити самий мінімум інформації - ідентифікатор (ключ таблиці), поле імені і поле номера телефону. Два останніх поля алфавітно-цифрові, так що можна використовувати функцію varchar (). Поле ідентифікатора створимо як autoincrement primary key. Назвемо цю таблицю directory, і для її створення скористаємося наступним кодом Structured Query Language (SQL):
Лістинг 2. Код SQL для створення таблиці directory
CREATE TABLE `directory` (` id` INT NOT NULL AUTO_INCREMENT, `name` VARCHAR (64) NOT NULL,` phone` VARCHAR (16) NOT NULL, PRIMARY KEY ( `id`)) TYPE = MYISAM;Як бачите, нічого складного немає. Пізніше це додаток можна буде змінити на свій розсуд. Наприклад, можна додати поле ключових слів або адреси, що ще більше полегшить пошук. Поки ж будемо працювати з тим, що є.
Тепер треба заповнити нашу таблицю. Для введення імен і номерів можна скористатися утилітою phpMyAdmin або командним рядком. Можна також використовувати наступну послідовність команд SQL:
Лістинг 3. Команди SQL для заповнення таблиці
insert into `directory` (name, phone) values ( 'Tom Smith', '512-555-0111'); insert into `directory` (name, phone) values ( 'Bill Smith', '512-555-0112'); insert into `directory` (name, phone) values ( 'John Smith', '512-555-0113'); insert into `directory` (name, phone) values ( 'Jane Smith', '512-555-0114'); insert into `directory` (name, phone) values ( 'Sara Smith', '512-555-0115');Коли значення введені, перевірте, що список виводиться, надрукувавши select * в командному рядку з робочого каталогу або натиснувши Browse в phpMyAdmin.
Створення файлу index.php
Далі, створимо просту домашню сторінку для нашого застосування. Це файл РНР з ім'ям index.php, але поки він містить головним чином код HTML. Коли ми створимо файл find.php (на наступному кроці), ми повернемося до цієї частини і завершимо її.
Поки все, що нам потрібно, це простий HTML-файл з формою. Кожен елемент форми містить унікальний ідентифікатор, так як нам потрібна можливість визначати кожен елемент за допомогою jQuery.
Лістинг 4. Файл HTML з формою
<Html> <head> <title> Welcome! </ Title> </ head> <body> <h1> Search our Phone Directory </ h1> <form id = "searchform" method = "post"> <div> < label for = "search_term"> Search name / phone </ label> <input type = "text" name = "search_term" id = "search_term" /> <input type = "submit" value = "search" id = "search_button "/> </ div> </ form> <div id =" search_results "> </ div> </ body> </ html>Відразу впадають в очі дві речі. По-перше, з формою не пов'язане ніяких дій. Це нормально: пам'ятайте, що дана форма не повинна слідувати традиційної синхронної схемою «натиснув, почекав, побачив». Замість цього ми додаємо функціональність, яка буде стежити за діями користувача в поле search_term.
Друге, що ви повинні помітити, це елемент DOM search_results- порожній елемент прямо під формою. У ньому будуть міститися результати пошуку. Однак перш ніж йти далі, створимо сторінку find.php.
Створення файлу find.php
Файл find.php - це місце, де власне і відбувається вся дія. Він з'єднує додаток з базою даних і виконує запит до таблиці.
У першій частині файлу find.php знаходиться інформація про з'єднання. Для нашого прикладу я ввів цю інформацію прямо в файл. У більшості з вас вона буде міститися у включеному або запитуваній файлі або в складі набагато більшої середовища.
Лістинг 5. Створення файлу find.php
<? Php define (HOST, "your.host.here"); define (USER, "your-user-name"); define (PW, "your-password"); define (DB, "your-db-name"); $ Connect = mysql_connect (HOST, USER, PW) or die ( 'Could not connect to mysql server.'); mysql_select_db (DB, $ connect) or die ( 'Could not select database.');З форми index.php буде надходити пошуковий термін. Перш ніж вводити це значення в базу даних, над ним потрібно провести певну просту обробку. Я використовую функції strip_tags () і substr () для видалення з пошукового терміна всіх тегів HTML і скорочення його розміру. Така обробка ніколи не завадить - не можна цілком довіряти тому, що вводить користувач.
При очищенні пошукового терміна виконаємо один додатковий крок у вигляді процедури mysql_escape_string (), яка видалить всі інші глюки (такі як одинарні знаки лапок), які можуть поставити базу даних в глухий кут.
$ Term = strip_tags (substr ($ _ POST [ 'search_term'], 0, 100)); $ Term = mysql_escape_string ($ term);Тепер складемо оператор SQL. Ми хочемо отримувати від таблиці будь-які імена та номери телефону, відповідні пошуковому терміну. Останній повинен порівнюватися методом LIKE як з полем імені, так і з полем номера телефону, а потім робиться запит mysql_query ().
Лістинг 6. Створення оператора SQL
$ Sql = "select name, phone from directory where name like '% $ term%' or phone like '% $ term%' order by name asc"; $ Result = mysql_query ($ sql);Результати запиту можна роздрукувати. Ініціалізіруем змінну $ string, щоб зберегти результати, потім використовуємо mysql_num_rows () для перевірки наявності у відповіді будь-яких рядків. Якщо результати для пошукового терміна не отримані, $ string буде містити значення "No matches!" Якщо вони є, буде роздруковано кожне ім'я і номер телефону з безлічі результатів. В кінці процесу вся рядок виводиться на екран командою echo:
Лістинг 7. Роздруківка рядки командної echo
$ String = ''; if (mysql_num_rows ($ result)> 0) {while ($ row = mysql_fetch_object ($ result)) {$ string. = "<b>". $ row-> name. "</ b> -"; $ String. = $ Row-> phone. "</a>"; $ String. = "<br/> \ n"; }} Else {$ string = "No matches!"; } Echo $ string; ?>Звичайно, ця РНР-функціональність і сама по собі надзвичайно корисна, але поки цього не видно. Потрібно якось ввести в цей сценарій сам пошуковий термін. Ми зробимо це в наступному розділі.
Додавання jQuery в index.php
Поки все, що у нас є, це пара нешкідливих сторінок РНР і проста таблиця MySQL. З додаванням jQuery це лагідне додаток перетвориться в сучасну програму на базі Ajax, яка працює подібно настільного додатком пошуку на кшталт Spotlight в Mac OS X або Google Desktop Search.
Відкриємо файл index.php і додамо виклик свежезагруженного файлу jquery.js.
<Script src = "./ jquery.js"> </ script>Потім створимо просту функцію, яка запобіжить типова поведінка пошукової форми. (Для цього використовується функція preventDefault ().) Все натискання кнопки Submit і події key-up (тобто події, які відбуваються при натисканні клавіш на клавіатурі) будуть переадресовуватися до нової функції ajax_search (), яку ми зараз створимо.
Лістинг 8. Створення функції для запобігання типової поведінки пошукової форми
<Script type = 'text / javascript'> $ (document) .ready (function () {$ ( "# search_results"). SlideUp (); $ ( "# search_button"). Click (function (e) {e. preventDefault (); ajax_search ();}); $ ( "# search_term"). keyup (function (e) {e.preventDefault (); ajax_search ();});});Зауважте, як функція slideUp () використовується для тимчасового приховування елемента DOM search_results. Для звернення до цього елементу по імені застосовується функція $ (). Тим, хто знайомий з CSS, підхід jQuery теж здасться знайомим. Наприклад, у нас є елемент DOM з унікальним ідентифікатором search_results, і для звернення до нього ми використовуємо $ ( "# search_results"). Все дуже просто.
Зауважте також, що кожен раз при натисканні кнопки Search або введенні символів в поле search_term анонімна функція запобігає поведінка за умовчанням і переадресує додаток до функції ajax_search (), якою ми тепер і займемося.
Функція ajax_search () гранично проста. Нам потрібно показати елемент DOM search_results (як ви пам'ятаєте, спочатку ми його сховали), ввести значення з вхідного поля search_term, передати його функції ($ .post ()), яка асинхронно виконує файл find.php, і чекати відповіді. Коли відповідь з'явиться (як ви пам'ятаєте, ми зробили так, щоб find.php повертала відповідь в будь-якому випадку, навіть якщо збігів не виявлено), jQuery поміщає цю відповідь в елемент DOM search_results.
Лістинг 9. Функція ajax_search ()
function ajax_search () {$ ( "# search_results"). show (); var search_val = $ ( "# search_term"). val (); $ .Post ( "./ find.php", {search_term: search_val}, function (data) {if (data.length> 0) {$ ( "# search_results"). Html (data);}})} < / script>Тепер, коли всі елементи системи на місці, можна ввести запит і подивитися, як механізм пошуку працює в режимі реального часу, витягуючи записи при кожній події натискання клавіші. Він працює і при натисканні кнопки Submit. Наприклад, на малюнку 1 в поле пошуку введена буква a, і додаток повернуло записи Жанни і Сари Сміт, в іменах яких міститься ця буква.
Малюнок 1. Ajax-пошук в дії
висновок
Звичайно, над цим додатком можна попрацювати ще. Наприклад, додати поле ключових слів і дозволити пошук за ключовими словами. Або зробити так, щоб кожен запис містила теги або ключові слова, пов'язані з різними областями діяльності. Можна додати також ресурсний пошук, щоб шукати людей, які могли б допомогти в тих чи інших проектах. Нарешті, можна додати поля email, дати народження і чого завгодно ще, а потім розширити параметри пошуку.
Справа в тому, що для частини jQuery цього додатка не важливо, що відбувається всередині. Вона лише передає пошуковий термін в файл з ім'ям find.php. Файл find.php не знає або не дбає про те, що свої інструкції отримує від функції jQuery. Для нього пошуковий термін надходить зі звичайної форми, і він використовує ці дані для виконання запиту, а потім повертає записи, які збігаються з цим терміном.
Ресурси для скачування
Схожі теми
- оригінал статті (EN).
- Learning jQuery від автора Learning jQuery і jQuery Reference Guide (EN). (EN)
- Керівництво по jQuery Алекса Уолкера (Alex Walker): " jQuery: Easy JavaScript for Designers "(EN).
- Поглиблений аналіз застосування в jQuery елементів стилів CSS: " jQuery Crash Course "Натана Сміта (Nathan Smith) (Digital Web Magazine, жовтень 2007 року) (EN).
- Короткий довідник по розробці jQuery: jQuery in Action (Bear Bibeault, Yehuda Katz, John Resig, Manning, 2008) (EN).
- PHP.net - центральний ресурс для PHP-розробників. (EN)
- " Список рекомендованої літератури з PHP . "(EN)
- Все про PHP на developerWorks. (EN)
- Слідкуйте за developerWorks в твіттері . (EN)
- Ресурси проекту PHP на IBM developerWorks.
- Подкасти на developerWorks . (EN)
- Zend Core for IBM , Готова середовище розробки PHP з підтримкою IBM DB2 V9. (EN)
- Розділ Open Source developerWorks з великої довідковою інформацією, інструментами і оновленнями проектів допоможе вам у розробці технологій open source і їх застосуванні з продуктами IBM.
- завантажте ознайомчі версії продуктів IBM і спробуйте інструменти розробки додатків і продукти проміжного рівня від DB2®, Lotus®, Rational®, Tivoli® і WebSphere®. (EN)
Підпишіть мене на повідомлення до коментарів
Використання jQuery і PHP для створення Web-сторінок на базі Ajax
Бібліотеки jQuery спрощують PHP-розробнику рішення трудомістких завдань
Більшість РНР-розробників освоювали цю мову по-старому, почавши з визначення і побудови простих РНР-сторінок та їх сполуки з простими ж таблицями MySQL. Надалі, набуваючи різноманітного досвіду, вони вчилися створювати на РНР все більш складну функціональність, об'єднувати таблиці в MySQL і вирішувати інші складні завдання.
По ходу справи програміст набуває досвід роботи і з боку клієнта. В якійсь мірі він освоює XHTML або CSS, а можливо, і програмування на JavaScript. Залежно від виду проектів йому навіть може представитися випадок попрацювати з Ajax для додання своїм Web-додатків функціональності в дусі Web 2.0. Однак у мене перший досвід роботи з Ajax виявився досить стомлюючим - доводилося вручну створювати функції і насилу продиратися крізь процес створення Ajax-сторінок.
Часто використовувані абревіатури
- CSS: Cascading Style Sheet
- HTML: Hypertext Markup Language
- XHTML: Extensible Hypertext Markup Language
- XML: Extensible Markup Language
Для деяких Ajax досі залишається таємницею за сімома печатками. У них не знаходиться часу, терпіння або знань, щоб як слід опанувати ім. Шкода, тому що багатьом клієнтам подобається функціональність в стилі Ajax, яка спрощує роботу з Web-додатками. Прочитавши цю статтю, ви дізнаєтеся досить, щоб стати справжнім профі по Ajax.
Ми покажемо, як використовувати бібліотеку jQuery, щоб легко додавати функціональність Ajax в будь-який РНР-додаток. Ми створимо просте Web-додаток із застосуванням РНР і MySQL - телефонну книгу з іменами і номерами телефону. У ній буде все необхідне - кошти пошуку по іменах або номерами телефону, таблиця MySQL і т.п. Потім ми додамо jQuery, щоб можна було шукати по іменах і номерам телефону в режимі реального часу, в процесі набору тексту. Вирішивши цю задачу, ви не тільки будете добре знати основи jQuery, але і розберетеся в деяких фундаментальних поняттях Ajax.
Що таке Ajax?
Кращий спосіб описати Ajax - це порівняти його з тим, що вам вже знайомо. Більшість Web-сторінок і додатків працює в синхронному режимі. Ви натискаєте на посилання або кнопку Submit пошукової форми, і запит передається на сервер, який обробляє його і повертає відповідь. Цю модель найточніше назвати так: «натиснув, почекав, побачив». Цей нескінченний цикл поновлення-повторення всім добре відомий. Іншими словами, щоб відображати на сторінці постійно оновлювану інформацію, потрібно або ввести якийсь механізм автоматичного оновлення, або запропонувати користувачеві натискати на посилання.
З Ajax все не так. Перша A в слові Ajax означає асинхронний. Ajax дозволяє створювати сторінки на будь-якій мові програмування, а потім наповнювати різні частини цих сторінок інформацією з бази даних або будь-якого іншого централізованого процесу на сервері. Наприклад, у вас є сайт електронної комерції, де демонструються продаються продукти. На сторінці кожного продукту є звичайні елементи: заголовки, опис, фотографія, кількість товару на складі.
Припустимо, потрібно тримати відвідувачів в курсі того, скільки одиниць товару залишилося на складі. Можна додати функцію Ajax, яка буде запускати окрему РНР-сторінку із запитом MySQL, а потім передавати цю інформацію на первинну сторінку без будь-яких дій з боку користувача і без всякої синхронної послідовності подій типу натиснув-почекав-побачив.
Буква j в слові Ajax означає JavaScript, і це пояснює джерело такої поведінки. У ньому і гідність даного підходу, і його недолік. Гідність тому, що весь код працює на стороні клієнта, так що він легко переноситься і не впливає на сервер. А недолік для багатьох РНР-розробників полягає в тому, що це інша, незвична для них середу. Тут-то і виходять на сцену інструменти, подібні jQuery: вони значно спрощують взаємодію з Ajax, прискорюючи процес розробки.
А як щодо двох останніх букв в назві: а і x? Вони означають and XML, хоча XML-частина насправді використовується не завжди. Багато Ajax-додатки добре працюють і без XML-коду: вони передають просто HTML або навіть звичайний текст. Можливо, точніше було б розшифровувати x як XMLHttpRequest, так як цей об'єкт використовується для отримання даних у фоновому режимі, тобто без перешкод для відображення або поведінки існуючої сторінки.
Що таке jQuery?
jQuery - це компактна бібліотека JavaScript, створена Джоном Резігом (John Resig) і опублікована в інтернеті на початку 2006 року. Це безкоштовне і відкрите ПЗ, яке розповсюджується за двома ліцензіями: Массачусетського технологічного інституту (MIT) і GNU General Public License. Вона привернула безліч розробників у всьому світі своєю простотою і наочністю.
Секрет її популярності в тому, що ця проста в застосуванні бібліотека спрощує JavaScript для всіх (навіть для найзатятіших back-end програмістів), дозволяючи без виснажливої роботи домагатися чудових ефектів. З її допомогою можна створювати набори елементів Document Object Model (DOM), модифікувати і маніпулювати CSS, вводити елементи анімації і працювати з Ajax. Вся ця функціональність забезпечується єдиним файлом JavaScript, який можна завантажити з сайту jQuery (див. ресурси ).
Завантаживши jQuery, можна додати його до будь-якого файлу HTML або РНР, включивши простий тег <script>:
<Script type = "text / javascript" src = "/ path / to / jquery.js"> </ script>Припустимо, перед вами стоїть досить проста, але нудна завдання з великою кількістю ручних операцій типу додавання двокрапки (:) в кінці кожної мітки форми на сайті. Можна йти напролом, відшукуючи кожну мітку форми і додаючи в кінці рядка двокрапка, а можна використовувати наступний код jQuery:
Лістинг 1. Додавання двокрапок з використанням jQuery
<Script type = "text / javascript"> $ (document) .ready (function () {$ ( "label"). Append ( ":");}); </ Script>Це проста функція: вона чекає, поки сторінка буде повністю підготовлена і завантажена (для цього служить частина $ (document) .ready ()), виконує анонімну функцію, відшукувати все елементи DOM label, а потім в кінці знайденого тексту додає двокрапка. Функція $ () дозволяє звертатися до елементів DOM по їх природним іменах, що робить цей інтерфейс ідеальним вибором для розробників, вже знайомих з DOM.
Звичайно, за допомогою jQuery можна робити багато інших речей, але це хороший перший крок. Проста вбудована функція jQuery буде працювати в будь-якому випадку, так як вона чекає закінчення завантаження сторінки. Інша рядок коду вносить зміни в усі знайдені елементи DOM label, і все це відбувається з боку клієнта, без необхідності тупо перебирати всю зроблену розмітку і вносити в неї зміни.
Створення простого додатка: телефонна книга
Тепер, коли основи jQuery прояснилися, давайте побудуємо просту телефонну книгу на базі РНР і MySQL. Ця програма складається з трьох частин:
- таблиці MySQL з іменами і номерами телефону
- файлу index.php з формою пошуку
- сторінки find.php, яка звертається до таблиці бази даних.
Створимо кожен елемент окремо.
Створення таблиці бази даних
Створення таблиці бази даних в MySQL - мабуть, найпростіша частина. Ця таблиця повинна містити самий мінімум інформації - ідентифікатор (ключ таблиці), поле імені і поле номера телефону. Два останніх поля алфавітно-цифрові, так що можна використовувати функцію varchar (). Поле ідентифікатора створимо як autoincrement primary key. Назвемо цю таблицю directory, і для її створення скористаємося наступним кодом Structured Query Language (SQL):
Лістинг 2. Код SQL для створення таблиці directory
CREATE TABLE `directory` (` id` INT NOT NULL AUTO_INCREMENT, `name` VARCHAR (64) NOT NULL,` phone` VARCHAR (16) NOT NULL, PRIMARY KEY ( `id`)) TYPE = MYISAM;Як бачите, нічого складного немає. Пізніше це додаток можна буде змінити на свій розсуд. Наприклад, можна додати поле ключових слів або адреси, що ще більше полегшить пошук. Поки ж будемо працювати з тим, що є.
Тепер треба заповнити нашу таблицю. Для введення імен і номерів можна скористатися утилітою phpMyAdmin або командним рядком. Можна також використовувати наступну послідовність команд SQL:
Лістинг 3. Команди SQL для заповнення таблиці
insert into `directory` (name, phone) values ( 'Tom Smith', '512-555-0111'); insert into `directory` (name, phone) values ( 'Bill Smith', '512-555-0112'); insert into `directory` (name, phone) values ( 'John Smith', '512-555-0113'); insert into `directory` (name, phone) values ( 'Jane Smith', '512-555-0114'); insert into `directory` (name, phone) values ( 'Sara Smith', '512-555-0115');Коли значення введені, перевірте, що список виводиться, надрукувавши select * в командному рядку з робочого каталогу або натиснувши Browse в phpMyAdmin.
Створення файлу index.php
Далі, створимо просту домашню сторінку для нашого застосування. Це файл РНР з ім'ям index.php, але поки він містить головним чином код HTML. Коли ми створимо файл find.php (на наступному кроці), ми повернемося до цієї частини і завершимо її.
Поки все, що нам потрібно, це простий HTML-файл з формою. Кожен елемент форми містить унікальний ідентифікатор, так як нам потрібна можливість визначати кожен елемент за допомогою jQuery.
Лістинг 4. Файл HTML з формою
<Html> <head> <title> Welcome! </ Title> </ head> <body> <h1> Search our Phone Directory </ h1> <form id = "searchform" method = "post"> <div> < label for = "search_term"> Search name / phone </ label> <input type = "text" name = "search_term" id = "search_term" /> <input type = "submit" value = "search" id = "search_button "/> </ div> </ form> <div id =" search_results "> </ div> </ body> </ html>Відразу впадають в очі дві речі. По-перше, з формою не пов'язане ніяких дій. Це нормально: пам'ятайте, що дана форма не повинна слідувати традиційної синхронної схемою «натиснув, почекав, побачив». Замість цього ми додаємо функціональність, яка буде стежити за діями користувача в поле search_term.
Друге, що ви повинні помітити, це елемент DOM search_results- порожній елемент прямо під формою. У ньому будуть міститися результати пошуку. Однак перш ніж йти далі, створимо сторінку find.php.
Створення файлу find.php
Файл find.php - це місце, де власне і відбувається вся дія. Він з'єднує додаток з базою даних і виконує запит до таблиці.
У першій частині файлу find.php знаходиться інформація про з'єднання. Для нашого прикладу я ввів цю інформацію прямо в файл. У більшості з вас вона буде міститися у включеному або запитуваній файлі або в складі набагато більшої середовища.
Лістинг 5. Створення файлу find.php
<? Php define (HOST, "your.host.here"); define (USER, "your-user-name"); define (PW, "your-password"); define (DB, "your-db-name"); $ Connect = mysql_connect (HOST, USER, PW) or die ( 'Could not connect to mysql server.'); mysql_select_db (DB, $ connect) or die ( 'Could not select database.');З форми index.php буде надходити пошуковий термін. Перш ніж вводити це значення в базу даних, над ним потрібно провести певну просту обробку. Я використовую функції strip_tags () і substr () для видалення з пошукового терміна всіх тегів HTML і скорочення його розміру. Така обробка ніколи не завадить - не можна цілком довіряти тому, що вводить користувач.
При очищенні пошукового терміна виконаємо один додатковий крок у вигляді процедури mysql_escape_string (), яка видалить всі інші глюки (такі як одинарні знаки лапок), які можуть поставити базу даних в глухий кут.
$ Term = strip_tags (substr ($ _ POST [ 'search_term'], 0, 100)); $ Term = mysql_escape_string ($ term);Тепер складемо оператор SQL. Ми хочемо отримувати від таблиці будь-які імена та номери телефону, відповідні пошуковому терміну. Останній повинен порівнюватися методом LIKE як з полем імені, так і з полем номера телефону, а потім робиться запит mysql_query ().
Лістинг 6. Створення оператора SQL
$ Sql = "select name, phone from directory where name like '% $ term%' or phone like '% $ term%' order by name asc"; $ Result = mysql_query ($ sql);Результати запиту можна роздрукувати. Ініціалізіруем змінну $ string, щоб зберегти результати, потім використовуємо mysql_num_rows () для перевірки наявності у відповіді будь-яких рядків. Якщо результати для пошукового терміна не отримані, $ string буде містити значення "No matches!" Якщо вони є, буде роздруковано кожне ім'я і номер телефону з безлічі результатів. В кінці процесу вся рядок виводиться на екран командою echo:
Лістинг 7. Роздруківка рядки командної echo
$ String = ''; if (mysql_num_rows ($ result)> 0) {while ($ row = mysql_fetch_object ($ result)) {$ string. = "<b>". $ row-> name. "</ b> -"; $ String. = $ Row-> phone. "</a>"; $ String. = "<br/> \ n"; }} Else {$ string = "No matches!"; } Echo $ string; ?>Звичайно, ця РНР-функціональність і сама по собі надзвичайно корисна, але поки цього не видно. Потрібно якось ввести в цей сценарій сам пошуковий термін. Ми зробимо це в наступному розділі.
Додавання jQuery в index.php
Поки все, що у нас є, це пара нешкідливих сторінок РНР і проста таблиця MySQL. З додаванням jQuery це лагідне додаток перетвориться в сучасну програму на базі Ajax, яка працює подібно настільного додатком пошуку на кшталт Spotlight в Mac OS X або Google Desktop Search.
Відкриємо файл index.php і додамо виклик свежезагруженного файлу jquery.js.
<Script src = "./ jquery.js"> </ script>Потім створимо просту функцію, яка запобіжить типова поведінка пошукової форми. (Для цього використовується функція preventDefault ().) Все натискання кнопки Submit і події key-up (тобто події, які відбуваються при натисканні клавіш на клавіатурі) будуть переадресовуватися до нової функції ajax_search (), яку ми зараз створимо.
Лістинг 8. Створення функції для запобігання типової поведінки пошукової форми
<Script type = 'text / javascript'> $ (document) .ready (function () {$ ( "# search_results"). SlideUp (); $ ( "# search_button"). Click (function (e) {e. preventDefault (); ajax_search ();}); $ ( "# search_term"). keyup (function (e) {e.preventDefault (); ajax_search ();});});Зауважте, як функція slideUp () використовується для тимчасового приховування елемента DOM search_results. Для звернення до цього елементу по імені застосовується функція $ (). Тим, хто знайомий з CSS, підхід jQuery теж здасться знайомим. Наприклад, у нас є елемент DOM з унікальним ідентифікатором search_results, і для звернення до нього ми використовуємо $ ( "# search_results"). Все дуже просто.
Зауважте також, що кожен раз при натисканні кнопки Search або введенні символів в поле search_term анонімна функція запобігає поведінка за умовчанням і переадресує додаток до функції ajax_search (), якою ми тепер і займемося.
Функція ajax_search () гранично проста. Нам потрібно показати елемент DOM search_results (як ви пам'ятаєте, спочатку ми його сховали), ввести значення з вхідного поля search_term, передати його функції ($ .post ()), яка асинхронно виконує файл find.php, і чекати відповіді. Коли відповідь з'явиться (як ви пам'ятаєте, ми зробили так, щоб find.php повертала відповідь в будь-якому випадку, навіть якщо збігів не виявлено), jQuery поміщає цю відповідь в елемент DOM search_results.
Лістинг 9. Функція ajax_search ()
function ajax_search () {$ ( "# search_results"). show (); var search_val = $ ( "# search_term"). val (); $ .Post ( "./ find.php", {search_term: search_val}, function (data) {if (data.length> 0) {$ ( "# search_results"). Html (data);}})} < / script>Тепер, коли всі елементи системи на місці, можна ввести запит і подивитися, як механізм пошуку працює в режимі реального часу, витягуючи записи при кожній події натискання клавіші. Він працює і при натисканні кнопки Submit. Наприклад, на малюнку 1 в поле пошуку введена буква a, і додаток повернуло записи Жанни і Сари Сміт, в іменах яких міститься ця буква.
Малюнок 1. Ajax-пошук в дії
висновок
Звичайно, над цим додатком можна попрацювати ще. Наприклад, додати поле ключових слів і дозволити пошук за ключовими словами. Або зробити так, щоб кожен запис містила теги або ключові слова, пов'язані з різними областями діяльності. Можна додати також ресурсний пошук, щоб шукати людей, які могли б допомогти в тих чи інших проектах. Нарешті, можна додати поля email, дати народження і чого завгодно ще, а потім розширити параметри пошуку.
Справа в тому, що для частини jQuery цього додатка не важливо, що відбувається всередині. Вона лише передає пошуковий термін в файл з ім'ям find.php. Файл find.php не знає або не дбає про те, що свої інструкції отримує від функції jQuery. Для нього пошуковий термін надходить зі звичайної форми, і він використовує ці дані для виконання запиту, а потім повертає записи, які збігаються з цим терміном.
Ресурси для скачування
Схожі теми
- оригінал статті (EN).
- Learning jQuery від автора Learning jQuery і jQuery Reference Guide (EN). (EN)
- Керівництво по jQuery Алекса Уолкера (Alex Walker): " jQuery: Easy JavaScript for Designers "(EN).
- Поглиблений аналіз застосування в jQuery елементів стилів CSS: " jQuery Crash Course "Натана Сміта (Nathan Smith) (Digital Web Magazine, жовтень 2007 року) (EN).
- Короткий довідник по розробці jQuery: jQuery in Action (Bear Bibeault, Yehuda Katz, John Resig, Manning, 2008) (EN).
- PHP.net - центральний ресурс для PHP-розробників. (EN)
- " Список рекомендованої літератури з PHP . "(EN)
- Все про PHP на developerWorks. (EN)
- Слідкуйте за developerWorks в твіттері . (EN)
- Ресурси проекту PHP на IBM developerWorks.
- Подкасти на developerWorks . (EN)
- Zend Core for IBM , Готова середовище розробки PHP з підтримкою IBM DB2 V9. (EN)
- Розділ Open Source developerWorks з великої довідковою інформацією, інструментами і оновленнями проектів допоможе вам у розробці технологій open source і їх застосуванні з продуктами IBM.
- завантажте ознайомчі версії продуктів IBM і спробуйте інструменти розробки додатків і продукти проміжного рівня від DB2®, Lotus®, Rational®, Tivoli® і WebSphere®. (EN)
Підпишіть мене на повідомлення до коментарів
Використання jQuery і PHP для створення Web-сторінок на базі Ajax
Бібліотеки jQuery спрощують PHP-розробнику рішення трудомістких завдань
Більшість РНР-розробників освоювали цю мову по-старому, почавши з визначення і побудови простих РНР-сторінок та їх сполуки з простими ж таблицями MySQL. Надалі, набуваючи різноманітного досвіду, вони вчилися створювати на РНР все більш складну функціональність, об'єднувати таблиці в MySQL і вирішувати інші складні завдання.
По ходу справи програміст набуває досвід роботи і з боку клієнта. В якійсь мірі він освоює XHTML або CSS, а можливо, і програмування на JavaScript. Залежно від виду проектів йому навіть може представитися випадок попрацювати з Ajax для додання своїм Web-додатків функціональності в дусі Web 2.0. Однак у мене перший досвід роботи з Ajax виявився досить стомлюючим - доводилося вручну створювати функції і насилу продиратися крізь процес створення Ajax-сторінок.
Часто використовувані абревіатури
- CSS: Cascading Style Sheet
- HTML: Hypertext Markup Language
- XHTML: Extensible Hypertext Markup Language
- XML: Extensible Markup Language
Для деяких Ajax досі залишається таємницею за сімома печатками. У них не знаходиться часу, терпіння або знань, щоб як слід опанувати ім. Шкода, тому що багатьом клієнтам подобається функціональність в стилі Ajax, яка спрощує роботу з Web-додатками. Прочитавши цю статтю, ви дізнаєтеся досить, щоб стати справжнім профі по Ajax.
Ми покажемо, як використовувати бібліотеку jQuery, щоб легко додавати функціональність Ajax в будь-який РНР-додаток. Ми створимо просте Web-додаток із застосуванням РНР і MySQL - телефонну книгу з іменами і номерами телефону. У ній буде все необхідне - кошти пошуку по іменах або номерами телефону, таблиця MySQL і т.п. Потім ми додамо jQuery, щоб можна було шукати по іменах і номерам телефону в режимі реального часу, в процесі набору тексту. Вирішивши цю задачу, ви не тільки будете добре знати основи jQuery, але і розберетеся в деяких фундаментальних поняттях Ajax.
Що таке Ajax?
Кращий спосіб описати Ajax - це порівняти його з тим, що вам вже знайомо. Більшість Web-сторінок і додатків працює в синхронному режимі. Ви натискаєте на посилання або кнопку Submit пошукової форми, і запит передається на сервер, який обробляє його і повертає відповідь. Цю модель найточніше назвати так: «натиснув, почекав, побачив». Цей нескінченний цикл поновлення-повторення всім добре відомий. Іншими словами, щоб відображати на сторінці постійно оновлювану інформацію, потрібно або ввести якийсь механізм автоматичного оновлення, або запропонувати користувачеві натискати на посилання.
З Ajax все не так. Перша A в слові Ajax означає асинхронний. Ajax дозволяє створювати сторінки на будь-якій мові програмування, а потім наповнювати різні частини цих сторінок інформацією з бази даних або будь-якого іншого централізованого процесу на сервері. Наприклад, у вас є сайт електронної комерції, де демонструються продаються продукти. На сторінці кожного продукту є звичайні елементи: заголовки, опис, фотографія, кількість товару на складі.
Припустимо, потрібно тримати відвідувачів в курсі того, скільки одиниць товару залишилося на складі. Можна додати функцію Ajax, яка буде запускати окрему РНР-сторінку із запитом MySQL, а потім передавати цю інформацію на первинну сторінку без будь-яких дій з боку користувача і без всякої синхронної послідовності подій типу натиснув-почекав-побачив.
Буква j в слові Ajax означає JavaScript, і це пояснює джерело такої поведінки. У ньому і гідність даного підходу, і його недолік. Гідність тому, що весь код працює на стороні клієнта, так що він легко переноситься і не впливає на сервер. А недолік для багатьох РНР-розробників полягає в тому, що це інша, незвична для них середу. Тут-то і виходять на сцену інструменти, подібні jQuery: вони значно спрощують взаємодію з Ajax, прискорюючи процес розробки.
А як щодо двох останніх букв в назві: а і x? Вони означають and XML, хоча XML-частина насправді використовується не завжди. Багато Ajax-додатки добре працюють і без XML-коду: вони передають просто HTML або навіть звичайний текст. Можливо, точніше було б розшифровувати x як XMLHttpRequest, так як цей об'єкт використовується для отримання даних у фоновому режимі, тобто без перешкод для відображення або поведінки існуючої сторінки.
Що таке jQuery?
jQuery - це компактна бібліотека JavaScript, створена Джоном Резігом (John Resig) і опублікована в інтернеті на початку 2006 року. Це безкоштовне і відкрите ПЗ, яке розповсюджується за двома ліцензіями: Массачусетського технологічного інституту (MIT) і GNU General Public License. Вона привернула безліч розробників у всьому світі своєю простотою і наочністю.
Секрет її популярності в тому, що ця проста в застосуванні бібліотека спрощує JavaScript для всіх (навіть для найзатятіших back-end програмістів), дозволяючи без виснажливої роботи домагатися чудових ефектів. З її допомогою можна створювати набори елементів Document Object Model (DOM), модифікувати і маніпулювати CSS, вводити елементи анімації і працювати з Ajax. Вся ця функціональність забезпечується єдиним файлом JavaScript, який можна завантажити з сайту jQuery (див. ресурси ).
Завантаживши jQuery, можна додати його до будь-якого файлу HTML або РНР, включивши простий тег <script>:
<Script type = "text / javascript" src = "/ path / to / jquery.js"> </ script>Припустимо, перед вами стоїть досить проста, але нудна завдання з великою кількістю ручних операцій типу додавання двокрапки (:) в кінці кожної мітки форми на сайті. Можна йти напролом, відшукуючи кожну мітку форми і додаючи в кінці рядка двокрапка, а можна використовувати наступний код jQuery:
Лістинг 1. Додавання двокрапок з використанням jQuery
<Script type = "text / javascript"> $ (document) .ready (function () {$ ( "label"). Append ( ":");}); </ Script>Це проста функція: вона чекає, поки сторінка буде повністю підготовлена і завантажена (для цього служить частина $ (document) .ready ()), виконує анонімну функцію, відшукувати все елементи DOM label, а потім в кінці знайденого тексту додає двокрапка. Функція $ () дозволяє звертатися до елементів DOM по їх природним іменах, що робить цей інтерфейс ідеальним вибором для розробників, вже знайомих з DOM.
Звичайно, за допомогою jQuery можна робити багато інших речей, але це хороший перший крок. Проста вбудована функція jQuery буде працювати в будь-якому випадку, так як вона чекає закінчення завантаження сторінки. Інша рядок коду вносить зміни в усі знайдені елементи DOM label, і все це відбувається з боку клієнта, без необхідності тупо перебирати всю зроблену розмітку і вносити в неї зміни.
Створення простого додатка: телефонна книга
Тепер, коли основи jQuery прояснилися, давайте побудуємо просту телефонну книгу на базі РНР і MySQL. Ця програма складається з трьох частин:
- таблиці MySQL з іменами і номерами телефону
- файлу index.php з формою пошуку
- сторінки find.php, яка звертається до таблиці бази даних.
Створимо кожен елемент окремо.
Створення таблиці бази даних
Створення таблиці бази даних в MySQL - мабуть, найпростіша частина. Ця таблиця повинна містити самий мінімум інформації - ідентифікатор (ключ таблиці), поле імені і поле номера телефону. Два останніх поля алфавітно-цифрові, так що можна використовувати функцію varchar (). Поле ідентифікатора створимо як autoincrement primary key. Назвемо цю таблицю directory, і для її створення скористаємося наступним кодом Structured Query Language (SQL):
Лістинг 2. Код SQL для створення таблиці directory
CREATE TABLE `directory` (` id` INT NOT NULL AUTO_INCREMENT, `name` VARCHAR (64) NOT NULL,` phone` VARCHAR (16) NOT NULL, PRIMARY KEY ( `id`)) TYPE = MYISAM;Як бачите, нічого складного немає. Пізніше це додаток можна буде змінити на свій розсуд. Наприклад, можна додати поле ключових слів або адреси, що ще більше полегшить пошук. Поки ж будемо працювати з тим, що є.
Тепер треба заповнити нашу таблицю. Для введення імен і номерів можна скористатися утилітою phpMyAdmin або командним рядком. Можна також використовувати наступну послідовність команд SQL:
Лістинг 3. Команди SQL для заповнення таблиці
insert into `directory` (name, phone) values ( 'Tom Smith', '512-555-0111'); insert into `directory` (name, phone) values ( 'Bill Smith', '512-555-0112'); insert into `directory` (name, phone) values ( 'John Smith', '512-555-0113'); insert into `directory` (name, phone) values ( 'Jane Smith', '512-555-0114'); insert into `directory` (name, phone) values ( 'Sara Smith', '512-555-0115');Коли значення введені, перевірте, що список виводиться, надрукувавши select * в командному рядку з робочого каталогу або натиснувши Browse в phpMyAdmin.
Створення файлу index.php
Далі, створимо просту домашню сторінку для нашого застосування. Це файл РНР з ім'ям index.php, але поки він містить головним чином код HTML. Коли ми створимо файл find.php (на наступному кроці), ми повернемося до цієї частини і завершимо її.
Поки все, що нам потрібно, це простий HTML-файл з формою. Кожен елемент форми містить унікальний ідентифікатор, так як нам потрібна можливість визначати кожен елемент за допомогою jQuery.
Лістинг 4. Файл HTML з формою
<Html> <head> <title> Welcome! </ Title> </ head> <body> <h1> Search our Phone Directory </ h1> <form id = "searchform" method = "post"> <div> < label for = "search_term"> Search name / phone </ label> <input type = "text" name = "search_term" id = "search_term" /> <input type = "submit" value = "search" id = "search_button "/> </ div> </ form> <div id =" search_results "> </ div> </ body> </ html>Відразу впадають в очі дві речі. По-перше, з формою не пов'язане ніяких дій. Це нормально: пам'ятайте, що дана форма не повинна слідувати традиційної синхронної схемою «натиснув, почекав, побачив». Замість цього ми додаємо функціональність, яка буде стежити за діями користувача в поле search_term.
Друге, що ви повинні помітити, це елемент DOM search_results- порожній елемент прямо під формою. У ньому будуть міститися результати пошуку. Однак перш ніж йти далі, створимо сторінку find.php.
Створення файлу find.php
Файл find.php - це місце, де власне і відбувається вся дія. Він з'єднує додаток з базою даних і виконує запит до таблиці.
У першій частині файлу find.php знаходиться інформація про з'єднання. Для нашого прикладу я ввів цю інформацію прямо в файл. У більшості з вас вона буде міститися у включеному або запитуваній файлі або в складі набагато більшої середовища.
Лістинг 5. Створення файлу find.php
<? Php define (HOST, "your.host.here"); define (USER, "your-user-name"); define (PW, "your-password"); define (DB, "your-db-name"); $ Connect = mysql_connect (HOST, USER, PW) or die ( 'Could not connect to mysql server.'); mysql_select_db (DB, $ connect) or die ( 'Could not select database.');З форми index.php буде надходити пошуковий термін. Перш ніж вводити це значення в базу даних, над ним потрібно провести певну просту обробку. Я використовую функції strip_tags () і substr () для видалення з пошукового терміна всіх тегів HTML і скорочення його розміру. Така обробка ніколи не завадить - не можна цілком довіряти тому, що вводить користувач.
При очищенні пошукового терміна виконаємо один додатковий крок у вигляді процедури mysql_escape_string (), яка видалить всі інші глюки (такі як одинарні знаки лапок), які можуть поставити базу даних в глухий кут.
$ Term = strip_tags (substr ($ _ POST [ 'search_term'], 0, 100)); $ Term = mysql_escape_string ($ term);Тепер складемо оператор SQL. Ми хочемо отримувати від таблиці будь-які імена та номери телефону, відповідні пошуковому терміну. Останній повинен порівнюватися методом LIKE як з полем імені, так і з полем номера телефону, а потім робиться запит mysql_query ().
Лістинг 6. Створення оператора SQL
$ Sql = "select name, phone from directory where name like '% $ term%' or phone like '% $ term%' order by name asc"; $ Result = mysql_query ($ sql);Результати запиту можна роздрукувати. Ініціалізіруем змінну $ string, щоб зберегти результати, потім використовуємо mysql_num_rows () для перевірки наявності у відповіді будь-яких рядків. Якщо результати для пошукового терміна не отримані, $ string буде містити значення "No matches!" Якщо вони є, буде роздруковано кожне ім'я і номер телефону з безлічі результатів. В кінці процесу вся рядок виводиться на екран командою echo:
Лістинг 7. Роздруківка рядки командної echo
$ String = ''; if (mysql_num_rows ($ result)> 0) {while ($ row = mysql_fetch_object ($ result)) {$ string. = "<b>". $ row-> name. "</ b> -"; $ String. = $ Row-> phone. "</a>"; $ String. = "<br/> \ n"; }} Else {$ string = "No matches!"; } Echo $ string; ?>Звичайно, ця РНР-функціональність і сама по собі надзвичайно корисна, але поки цього не видно. Потрібно якось ввести в цей сценарій сам пошуковий термін. Ми зробимо це в наступному розділі.
Додавання jQuery в index.php
Поки все, що у нас є, це пара нешкідливих сторінок РНР і проста таблиця MySQL. З додаванням jQuery це лагідне додаток перетвориться в сучасну програму на базі Ajax, яка працює подібно настільного додатком пошуку на кшталт Spotlight в Mac OS X або Google Desktop Search.
Відкриємо файл index.php і додамо виклик свежезагруженного файлу jquery.js.
<Script src = "./ jquery.js"> </ script>Потім створимо просту функцію, яка запобіжить типова поведінка пошукової форми. (Для цього використовується функція preventDefault ().) Все натискання кнопки Submit і події key-up (тобто події, які відбуваються при натисканні клавіш на клавіатурі) будуть переадресовуватися до нової функції ajax_search (), яку ми зараз створимо.
Лістинг 8. Створення функції для запобігання типової поведінки пошукової форми
<Script type = 'text / javascript'> $ (document) .ready (function () {$ ( "# search_results"). SlideUp (); $ ( "# search_button"). Click (function (e) {e. preventDefault (); ajax_search ();}); $ ( "# search_term"). keyup (function (e) {e.preventDefault (); ajax_search ();});});Зауважте, як функція slideUp () використовується для тимчасового приховування елемента DOM search_results. Для звернення до цього елементу по імені застосовується функція $ (). Тим, хто знайомий з CSS, підхід jQuery теж здасться знайомим. Наприклад, у нас є елемент DOM з унікальним ідентифікатором search_results, і для звернення до нього ми використовуємо $ ( "# search_results"). Все дуже просто.
Зауважте також, що кожен раз при натисканні кнопки Search або введенні символів в поле search_term анонімна функція запобігає поведінка за умовчанням і переадресує додаток до функції ajax_search (), якою ми тепер і займемося.
Функція ajax_search () гранично проста. Нам потрібно показати елемент DOM search_results (як ви пам'ятаєте, спочатку ми його сховали), ввести значення з вхідного поля search_term, передати його функції ($ .post ()), яка асинхронно виконує файл find.php, і чекати відповіді. Коли відповідь з'явиться (як ви пам'ятаєте, ми зробили так, щоб find.php повертала відповідь в будь-якому випадку, навіть якщо збігів не виявлено), jQuery поміщає цю відповідь в елемент DOM search_results.
Лістинг 9. Функція ajax_search ()
function ajax_search () {$ ( "# search_results"). show (); var search_val = $ ( "# search_term"). val (); $ .Post ( "./ find.php", {search_term: search_val}, function (data) {if (data.length> 0) {$ ( "# search_results"). Html (data);}})} < / script>Тепер, коли всі елементи системи на місці, можна ввести запит і подивитися, як механізм пошуку працює в режимі реального часу, витягуючи записи при кожній події натискання клавіші. Він працює і при натисканні кнопки Submit. Наприклад, на малюнку 1 в поле пошуку введена буква a, і додаток повернуло записи Жанни і Сари Сміт, в іменах яких міститься ця буква.
Малюнок 1. Ajax-пошук в дії
висновок
Звичайно, над цим додатком можна попрацювати ще. Наприклад, додати поле ключових слів і дозволити пошук за ключовими словами. Або зробити так, щоб кожен запис містила теги або ключові слова, пов'язані з різними областями діяльності. Можна додати також ресурсний пошук, щоб шукати людей, які могли б допомогти в тих чи інших проектах. Нарешті, можна додати поля email, дати народження і чого завгодно ще, а потім розширити параметри пошуку.
Справа в тому, що для частини jQuery цього додатка не важливо, що відбувається всередині. Вона лише передає пошуковий термін в файл з ім'ям find.php. Файл find.php не знає або не дбає про те, що свої інструкції отримує від функції jQuery. Для нього пошуковий термін надходить зі звичайної форми, і він використовує ці дані для виконання запиту, а потім повертає записи, які збігаються з цим терміном.
Ресурси для скачування
Схожі теми
- оригінал статті (EN).
- Learning jQuery від автора Learning jQuery і jQuery Reference Guide (EN). (EN)
- Керівництво по jQuery Алекса Уолкера (Alex Walker): " jQuery: Easy JavaScript for Designers "(EN).
- Поглиблений аналіз застосування в jQuery елементів стилів CSS: " jQuery Crash Course "Натана Сміта (Nathan Smith) (Digital Web Magazine, жовтень 2007 року) (EN).
- Короткий довідник по розробці jQuery: jQuery in Action (Bear Bibeault, Yehuda Katz, John Resig, Manning, 2008) (EN).
- PHP.net - центральний ресурс для PHP-розробників. (EN)
- " Список рекомендованої літератури з PHP . "(EN)
- Все про PHP на developerWorks. (EN)
- Слідкуйте за developerWorks в твіттері . (EN)
- Ресурси проекту PHP на IBM developerWorks.
- Подкасти на developerWorks . (EN)
- Zend Core for IBM , Готова середовище розробки PHP з підтримкою IBM DB2 V9. (EN)
- Розділ Open Source developerWorks з великої довідковою інформацією, інструментами і оновленнями проектів допоможе вам у розробці технологій open source і їх застосуванні з продуктами IBM.
- завантажте ознайомчі версії продуктів IBM і спробуйте інструменти розробки додатків і продукти проміжного рівня від DB2®, Lotus®, Rational®, Tivoli® і WebSphere®. (EN)
Підпишіть мене на повідомлення до коментарів
Що таке jQuery?Що таке jQuery?
Що таке jQuery?
Що таке Ajax?
Що таке jQuery?
Quot;; } Echo $ string; ?
Що таке Ajax?
Що таке jQuery?
Quot;; } Echo $ string; ?
Що таке Ajax?
