AJAX

В параграфе PHP раздела "Создание сайта" есть упоминание о том, как обмениваются информацией браузер пользователя и сервер. Однако, такой обмен по типу запрос-ответ возможен не только при загрузке страницы, но и после него, в этом случае обмен происходит в фоновом режиме обычно с использованием языка JavaScript.

Приведу пример. Пускай мы хотим реализовать поиск по "Готовым решениям" (то есть по данному разделу) без перезагрузки страницы. В текстовое поле пользователем вводится строка для поиска и в это же время браузер посылает запрос на сервер с требованием найти все решения, удовлетворяющие ей. Когда браузер получает ответ, он вставляет его в div ниже поля ввода. Вот как это выглядит:

Вводите в поле строку "aj..." и получаете внизу ссылку на эту статью. Данная технология обмена данными без перезагрузки получила название AJAX (Asynchronous JavaScript and XML — "асинхронный JavaScript и XML"). В нашем случае AJAX реализуется при помощи библиотеки JsHttpRequest Дмитрия Котерова. Вы можете скачать ее с сайта разработчика или с нашего сайта. Библиотека хорошо себя зарекомендовала, поэтому я советую ее, также, можно использовать соответствующие конструкции из разных фреймворков, таких как jQuery и других.

Теперь о том, как собственно это реализуется программно. Сначала на странице идет подключение библиотеки и создание функции, которая будет реагировать на ввод символов в текстовое поле, отправлять запросы серверу, получать ответы и обрабатывать их:

код скопирован в буфер
  1. <script type="text/javascript" src="http://www.scriptscript.ru/common/html/js/jshttprequest.js"></script>
  2. <input id="search_input" onkeyup="Search()">
  3. <div id="search_div"></div>
  4. <div id="search_errors"></div>
  5. ‏
  6. <script>‏
  7. function Search()
  8. {
  9.     // строка для поиска - отрезаем конечные пробелы
  10.     var value = document.getElementById('search_input').value
  11.     value = value.replace(/^\s+/, '').replace(/\s+$/, '');
  12.     // пустую строку не ищем
  13.     if (!value) {document.getElementById('search_div').innerHTML = ''; return;}
  14. ‏
  15.     JsHttpRequest.query
  16.     (
  17.         '/solutions/examples/ajax1/', // ссылка на сайте, на которую идет ajax-запрос
  18.         // объект, содержащий параметры, передающиеся вместе с запросом
  19.         {
  20.             'search' : value
  21.         },
  22.         // функция, которая обрабатывает ответ сервера, ее параметры:
  23.         // result - то, что будет записано в сценарии в массив $_RESULT,
  24.         // echo - вывод сценария
  25.         function(result, echo)
  26.         {
  27.             // вывод сценария вставляется в отдельный div, чтобы отслеживать ошибки
  28.             document.getElementById('search_errors').innerHTML = echo;
  29.             // вставляем в div c id, равным "search_div", результаты поиска
  30.             if (result.search == document.getElementById('search_input').value)
  31.                 document.getElementById('search_div').innerHTML = result.result;
  32.         },
  33.         true // запрещаем кеширование
  34.     )
  35. }
  36. ‏</script>

Как только пользователь вводит какой-то символ в поле input, на ссылку http://www.scriptscript.ru/solutions/examples/ajax1/ идет запрос методом POST с единственным параметром "search" – строкой поиска. Запрос обрабатывает следующий участок кода:

код скопирован в буфер
  1. // массив $_POST сейчас содержит все параметры ajax-запроса
  2. ‏
  3. // подключаем библиотеку
  4. require_once $CONFIG[site_dir].'common/scripts/jshttprequest.php';
  5. // инициируем обработчик, попутно устанавливая кодировку
  6. $JsHttpRequest = new JsHttpRequest('utf-8');
  7. ‏
  8. // отрезаем конечные пробелы, ищем только по 1-му слову
  9. $search = reset(explode(" ", trim(mb_strtolower($_POST[search]))));
  10. // ищем в таблице solutions все записи, содержащие строку поиска $_POST[search]
  11. $solutions = array();
  12. $result = mysql_query("SELECT title, name FROM solutions WHERE title LIKE '%".mysql_escape_string($search)."%'");
  13. while ($arr = mysql_fetch_array($result))
  14. {
  15.     $title = $arr[title];
  16.     // выделяем в строке найденные участки жирным шрифтом
  17.     $from = 0;
  18.     do
  19.     {
  20.         $pos = mb_strpos(mb_strtolower($title), $search, $from);
  21.         if ($pos === false) break;
  22.         $title = mb_substr($title, 0, $pos)
  23.             ."<b>".mb_substr($title, $pos, mb_strlen($search))."</b>"
  24.             .mb_substr($title, $pos + mb_strlen($search));
  25.         $from += mb_strlen($search) + 7; // 7 - длина тегов <b></b>
  26.     }
  27.     while ($from < mb_strlen($title));
  28.     $solutions[] = '<a href="/solutions/'.$arr[name].'/" target="_blank">'.$title."</a>";
  29. }
  30. // в массив $_RESULT помещаются данные, которые станут доступны в функции-обработчике
  31. $_RESULT[result] = implode("<br>", $solutions); // склеиваем в строку
  32. // возвращаем строку поиска, чтобы при вставке сопоставить ее с тем,
  33. // что на момент ответа будет в поле ввода
  34. $_RESULT[search] = $_POST[search];
  35. ‏

Чтобы вы могли проверить работу библиотеки самостоятельно приведу еще один пример, менее практичный, но без использования баз данных. При нажатии на кнопку "Отправить запрос" на экран выведется распечатка запроса, который вы отправляете скрипту вместе с заголовками.

Некое текстовое поле с именем "text":

Это html-код для реализации такой кнопки:

код скопирован в буфер
  1. <p>Некое текстовое поле с именем "text":</p>
  2. <form enctype="multipart/form-data" id="form">
  3. <p><textarea name="text" style="width: 400px; height: 120px">Напишите здесь что-нибудь.</textarea></p>
  4. <p><button onclick="SendRequest(); return false">Отправить запрос</button></p>
  5. </form>
  6. <div id="echo"></div>
  7. ‏
  8. <script>‏
  9. // обратите внимание, с помощью библиотеки JsHttpRequest можно отправлять целую форму,
  10. // для этого достаточно передать ее в какой-нибудь параметр запроса,
  11. // у формы при этом должен быть выставлен атрибут enctype="multipart/form-data",
  12. // значения полей формы будут доступны в массиве $_POST
  13. function SendRequest()
  14. {
  15.     JsHttpRequest.query
  16.     (
  17.         // ссылка на сайте, на которую идет ajax-запрос, настройте ее так, чтобы при
  18.         // обращении к ней браузера шел запуск скрипта из блока ниже (серверная часть)
  19.         '/solutions/examples/ajax2/',
  20.         {
  21.             'form' : document.getElementById('form') // форма
  22.         },
  23.         function(result, echo)
  24.         {
  25.             document.getElementById('echo').innerHTML = echo; // вывод скрипта
  26.         },
  27.         true // запрещаем кеширование
  28.     )
  29. }
  30. ‏</script>
  31. ‏

А это серверная часть:

код скопирован в буфер
  1. // массив $_POST сейчас содержит все параметры ajax-запроса
  2. ‏
  3. // подключаем библиотеку, в строке ниже укажите путь к ней на вашем сервере
  4. require_once $CONFIG[site_dir].'common/scripts/jshttprequest.php';
  5. // инициируем обработчик, попутно устанавливая кодировку
  6. $JsHttpRequest = new JsHttpRequest('utf-8');
  7. ‏
  8. // определяем заголовки запроса
  9. if (function_exists(getallheaders)) $headers = getallheaders();
  10. else
  11.     foreach ($_SERVER as $val)
  12.         if (preg_match("/HTTP_(.+)/", $val, $arr))
  13.             $headers[str_replace(" ", "-", ucwords(strtolower(str_replace("_", " ",
  14.             $arr[1]))))] = $val;
  15. ‏
  16. // выводим заголовки и запрос в удобочитаемом виде
  17. echo "Заголовки:<pre>".print_r($headers, 1)."</pre>"
  18.     ."Запрос:<pre>".print_r($_POST, 1)."</pre>";

И напоследок приведу функцию php, которую удобно использовать для работы с библиотекой. В функцию передается строка (или массив строк), которая является либо адресом файла на сервере, либо php-кодом. Таким образом, вы сможете запускать один и тот же скрипт и как самостоятельный сценарий, и как обработчик ajax-запроса. Это бывает удобно, например, при проверке ошибок формы перед сабмитом – обработка не будет дублироваться на JavaScript-е, а будет компактно размещена в одном файле php. Также, в функцию можно будет передать участок php-кода, это поможет избежать ненужного создания коротких фалов.

код скопирован в буфер
  1. // вызов скрипта или выполнение кода через AJAX
  2. function Ajax($scripts)
  3. {  
  4.     // в строке ниже укажите путь, по которому у вас размещена библиотека
  5.     require_once dirname(__FILE__).'/jshttprequest.php';
  6.     // инициируем обработчик, указывая кодировку
  7.     $JsHttpRequest = new JsHttpRequest('utf-8');
  8.    
  9.     // все переменные при запуске будут по умолчанию локальными внутри функции Ajax,
  10.     // поэтому в скриптах нужно объявлять глобальные переменные конструкцией global  
  11.     global $_RESULT;
  12.    
  13.     // в $scripts можно передавать целый массив скриптов или участков php-кода
  14.     if (!is_array($scripts)) $scripts = array($scripts);
  15.     // будьте острожны - не используйте в ваших скриптах переменные $scripts и $script
  16.     foreach ($scripts as $script)
  17.         if (is_file($script)) include $script; // php-скрипт
  18.         else eval($script); // участок php-кода
  19.     exit(); // выходим
  20. }

Теги: AJAX, JavaScript, PHP
Другие готовые решения...		16 декабря 2013

Добавление комментария

Имя:
Преобразовывать в тексте комментария смайлики в графические иконки
Защитный код:
Защитный код
 
 
                                                                                                                                                                                                       
Copyright © 2024 ScriptScript.ru, по всем вопросам пишите нам через форму обратной связи.
364319675