Пример AJAX приложения - Телефонная книга (сервер)


AJAX - серверная часть программы

Добрый день дорогие друзья.
Сегодня я хочу обратиться к технологии, без которой на сегодняшний день невозможно представить существование ни одного хоть сколько нибудь значимого интернет проекта. Вы наверное уже догадались, что речь пойдет о технологии AJAX

Технология AJAX (от англ. Asynchronous Javascript and XML — «асинхронный JavaScript и XML») это подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером.

В результате, при обновлении данных, веб-страница не перезагружается полностью, и веб-приложения становятся более быстрыми и удобными.

Суть технологии AJAX заключается в динамическом обращении к серверу и получение ответа от него с использованием объекта XMLHttpRequest. В качестве формата для передачи данных обычно применяют JSON или XML.

На самом деле объект XMLHttpRequest, чтоб вы знали, далеко не новая разработка. Впервые он появился в компоненте Outlook Web Access программного продукта Microsoft Exchange Server еще в далеком 2000 году.
Тогда он был назван IXMLHTTPRequest.

Сам объект XMLHttpRequest, достоин отдельного рассмотрения, и думаю что в одной из следующих статей я непременно подробно рассмотрю его методы и свойства, а в рамках этой статьи я лишь хочу наглядно продемонстрировать возможности этой технологии на довольно-таки простом но интересном примере -Телефонная книга. Сегодня я рассмотрю его серверную часть.

Суть его такова:


Имеется форма с текстовым полем в которое можно вводить данные. В нашем конкретном случае это цифры или буквы. То есть имена и номера телефонов.

Я не стал "заморачиваться" с базами данных, или текстовыми файлами, а просто сформировал эти номера с именами в скрипте PHP в виде ассоциативного массива.

Таким образом поиск можно осуществлять не только по номерам(цифрам), но и по именам(буквам). Вы конечное же можете расширить ассоциативный массив по своему желанию, или вообще создать свой.

По мере того как текстовое поле заполняется автоматически подгружаются найденные соответствия цифрам или буквам значения , которые являются ключами или значениями определенного ранее массива.

И заметьте, что все это происходит динамически, без перезагрузки страницы.


Пример телефонной книги на AJAX


Введите номер


    Давайте разберем как это работает.


    А осуществил я это с помощью всего двух файлов. find.php - который отвечает за серверную часть и index.html - отвечающий за клиентскую часть, то есть за то, что происходит на стороне клиента (браузера).

    Вот первый из них - скрипт find.php:


    Свернуть код:
    <?php
    header('Content-type:text/html;charset=utf-8');
    $num = strip_tags(substr($_POST['search'],0, 11));
    $string = '';
    $phone = array(	'Cергей' => 12345678, 'Михаил' => 23456789, 
    		'Александр' => 34567890, 'Анна' =>98765432, 
    		'Дарья' => 87654321, 'Анастасия' => 76543210
    		'Константин' =>13579246, 'Евгений' => 24681357);
    if (!empty($num)){
        foreach ($phone as $key => $value) {
            if (substr_count($key, $num)>0) || substr_count($value, $num)>0){
                $string .= $key." - ".$value."\n";
            }else {
                continue;
            }
        }
    }
    echo $string;
    exit;
    ?>

    Сначала я посылаю заголовки header() которые определяют кодировку в которой будет отображаться информация в браузере. Затем в целях безопасности с помощью функции strip_tags() удаляю HTML и PHP тэги из строки полученной методом POST, и выделяю из нее первые 11 символов - функция substr().

    Далее инициализирую строку $string в которой будут формироваться выходные значения и ассоциативный массив $phone, содержащий в себе имена в качестве ключей и номера в качестве значений.

    И если не пустое - empty() полученное методом POST значение $num, то в цикле foreach, действие которого подробно описано в статье "Определяем имена и значения всех элементов формы с помощью массива $_Request" я перебираю элементы массива $phone содержащего нашу импровизированную телефонную книгу.

    Если число вхождений подстроки $num в имя или номер больше 0 (т.е. было такое вхождение ) увеличиваю (конкатенирую) результирующую строку $string на соответстующее имя и значение, добавляя в конце символ "\n".

    Позже вы узнаете для чего он нужен.

    В противном случае пропускаю итерацию цикла continue.

    А после окончания цикла оператором echo отправляю сформированную строку в выходной поток браузера.

    Чтобы окончательно разобраться как работает технология AJAX нам осталось рассмотреть что же происходит на стороне клиента, в браузере, но сделаю я это во второй, заключительной части этой статьи Пример Ajax приложения - Телефонная книга (клиент), которую я выложу буквально через несколько дней.

    Замечу лишь, что в этом примере я использовал объект XMLHttpRequest, а в последствии я покажу вам как для этих целей можно использовать такую известную библиотеку как jQuery.

    Надеюсь на скорую встречу с вами. Будет интересно!

    Автор: Сергей Зарубин

    Дата: 2012-03-12

    Колличество просмотров: 6835

    Нравится

    Комментарии к заметке:



    Добавить новый комментарий


    Введите число с картинки:

    captcha