По всем вопросам пишите на webmaster@info-pages.com.ua. Вы можете свободно использовать/размещать/перепечатывать статьи сайта всего лишь указав ссылку на источник.
Слово Ajax (многие называют 'аякс') обозначает технологию, разработанную на javascript, позволяющую совершать обмен данными между браузером и сервером. Путешествуя в интернете, Вы уже, наверно, замечали как на некоторых сайтах, части страниц динамически изменялись и выводили новую информацию. При этом не было никакой перезагрузки страниц - в этом-то и кроется основное преимущество технологии Ajax. Запрос на получение кусочка информации и получение только этого кусочка информации.
Такой запрос еще называется асинхронный. И как Вы догадываетесь, запрос всей страницы у браузера будет называться синхронным запросом. Существует также, посылка информации от сервера к браузеру (обновление данных на странице) - эта технология называется Comet. Но она еще недостаточно практически применяется, поэтому в этой статье мы остановимся на изучении технологии Ajax и научимся практически ее использовать.
Из чего же состоит Ajax? Это всего-навсего один объект под названием XMLHttpRequest. Свойства этого объекта позволяют ему передавать информацию на сервер с помощью методов Get или Post, дождаться выполнения сервером необходимых операций, и получить ответ. Передавать на сервер и получать от него можно абсолютно любую информацию. При использовании Ajax существует несколько основных технических задач:
1. вся информация передается/получается только в кодировке UTF-8;
2. не во всех браузерах объект XMLHttpRequest вызывается одинаково.
На сегодняшний день существует несколько библиотек разработанных специально для работы с технологией Ajax. Они значительно упрощают работу и берут на себя все технические задачи, которые бы Вам пришлось решать самостоятельно. Так, например, ребята из dklab.ru создали очень неплохую библиотеку позволяющую обеспечить кроссбраузерность, закачку файлов и работу с русскими кодировками (windows-1251). Посмотреть и скачать библиотеку Вы можете на их сайте http://dklab.ru.
Данная библиотека подключается в HTML странице в виде js файла (jshttprequest.js) и вызывается в php файле, которому отправляется асинхронный запрос, в виде php файла (jshttprequest.php).
А теперь, чтобы Вы могли оценить ценность технологии Ajax, давайте сделаем небольшой пример обмена информацией между этой страницей и сервером, используя для этого удобную и понятную Ajax-библиотеку JsHttpRequest лаборатории dklab.ru (далее по тексту - ajax-библиотека JsHttpRequest).
Небольшое многофункциональное навигационное меню
Приветствие
Ввод данных
Что почитать
Мои контакты
Давайте, детально рассмотрим данное приложение. Оно состоит из файла js и файла php, оба подключаются к ajax-библиотеке JsHttpRequest. Файл js посылает запрос, а файл php обрабатывает его и возвращает ответ. Внизу наведен код файла js, посмотрите его содержимое:
Как видите код небольшой. Строка 'include/example_ajax/my.php?rand='+Math.floor(Math.random()*110000) указывает путь к файлу, которому передаются переменные. Обратите внимание, в конце файла с помощью метода GET передается переменная rand со случайным числом. Это сделано для того, чтобы избежать кэширования. Ваш браузер не очень-то будет разбираться, новую Вы информацию посылаете или ту же, и будет Вам выдавать одинаковый ответ.
Информация, которую мы передаем, заносится в заранее указанную переменную q: command, где command это наша информация в переменной (любого типа, можете также передавать массивы), a q - название переменной php, которой будет передано Ваша информация.
Чтобы было понятнее, рассмотрим код файла php:
<?php
require_once"../jshttprequest.php"; new JsHttpRequest("windows-1251");
session_start();
$q = $_REQUEST['q'];
if (!empty($q)) { if ($q =='hello') $response = "Здраствуйте, это страничка-приветствие, очень хорошо, что Вы к нам зашли у нас как раз раздают всем подарки. Только не уходите, иначе Вас все равно догонят и вручат подарок.";
if ($q == 'send_data') $response = "Укажите Ваше имя: <input id='name' type='text'><input type='submit' onClick='javascript: if (document.getElementById(\"name\")) {var arr = [\"new_name\", document.getElementById(\"name\").value];js_ajax(arr)}'>";
if (is_array($q) && $q[0] =='new_name') {
$response = "Спасибо, ".$q[1]." на Ваш почтовый ящик был удачно выслан спам."; $_SESSION['name'] = $q[1];
}
if ($q == 'read') $response = "Почитайте на днях Гоголя, говорят мертвые души покруче, чем следующая Пила.";
if ($q == 'kontakt') {
if (!empty($_SESSION['name'])) {
$response = "Хотя меня зовут ".$_SESSION['name']." ищите меня в контактах как 'Пушистик'.";
} else {
$response = "Вы забыли указать свое имя, нажмите ввод данных";
}
На сервере мы получаем отправленную информацию из глобальной переменной с именем q (помните, в js файле строку q: command). Далее мы читаем переданную переменную и в зависимости от ее значения отсылаем ответ. Ответ назад, мы передаем аналогично, как и отправляем - предопределяем в массиве $GLOBALS['_RESULT'] название переменной через которую потом обратимся за ответом. Посмотрите "response" => $response и соответствующий код в js ...innerHTML = result.response;.
Вот и все, ничего сложного.
Для компактности я передавал всю информацию только одному файлу, но Вы можете отсылать любому файлу, или для каждой операции сделать отдельный файл. Также, что очень существенно, Вы можете передавать/получать любое количество переменных различных типов, просто добавьте в массив название переменной и ее значение. Например:
Более детально почитать про ajax-библиотеку JsHttpRequest Вы можете на сайте ее разработчиков. Ну, чтобы попрактиковаться с запросами Вы можете скачать выше наведенный пример и самостоятельно поработать с ним на своем локальном веб-сервере.
Однако, несмотря на большие перспективы и возможности, которые дает использование технологии Ajax, существует один сдерживающий фактор. Индексация подгруженной информации пока недоступна для чтения поисковыми системами. Поэтому полностью созданный сайт на основе Ajax, к сожалению, не полностью попадет в индексные поисковые базы. Теперь Вам понятно почему, Ajax используется лишь для небольших задач, вроде как, соцопрос, подгружаемое выпадающее меню, также, пример работы этой технологии Вы можете увидеть на главной странице этого сайта, в виде сменяющихся через равномерный промежуток времени анекдотов.