Самостоятельное создание сайта
Самостоятельная раскрутка и продвижение сайта

Использование Ajax

   Слово 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, посмотрите его содержимое:
 

function js_ajax(command) {
   JsHttpRequest.query(
         'include/example_ajax/my.php?rand='+Math.floor(Math.random()*110000),
         {
            q: command
         },
         function(result, debugMessages) {
            document.getElementById("ajax_info").innerHTML = result.response;
            if (debugMessages) alert(debugMessages);
         }
   );
}

   Как видите код небольшой. Строка '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 = "Почитайте свежие статьи на сайте info-pages.com.ua.";
   if ($q == ''kontakt'') {
      if (!empty($_SESSION[''name''])) {
         $response = "Хотя меня зовут ".$_SESSION[''name'']." ищите меня в контактах как ''Пушистик''.";
      } else {
         $response = "Вы забыли указать свое имя, нажмите ввод данных";
      }

   }

   $GLOBALS[''_RESULT''] = array(
      "response" => $response
   );
}

?>


   На сервере мы получаем отправленную информацию из глобальной переменной с именем q (помните, в js файле строку q: command). Далее мы читаем переданную переменную и в зависимости от ее значения отсылаем ответ. Ответ назад, мы передаем аналогично, как и отправляем - предопределяем в массиве $GLOBALS[''_RESULT''] название переменной через которую потом обратимся за ответом. Посмотрите "response" => $response и соответствующий код в js ...innerHTML = result.response;.
   Вот и все, ничего сложного.

   Для компактности я передавал всю информацию только одному файлу, но Вы можете отсылать любому файлу, или для каждой операции сделать отдельный файл. Также, что очень существенно, Вы можете передавать/получать любое количество переменных различных типов, просто добавьте в массив название переменной и ее значение. Например:

Отправка из js-файла Получение в php Отправка из php-файла Получение в js
 { q: command,
 w: text,
 name: "Дима",
 tel: 799-90
 }
 $q = $_REQUEST[''q''];
 $my_text = $_REQUEST[''w''];
 $name = $_REQUEST[''name''];
 $number = $_REQUEST[''tel''];
 $GLOBALS[''_RESULT''] = array(
     "response" => $response,
     "data"=>$my_data,
     "hello"=>"Привет Коля!",
     "ajax"=>"Рулит"
);

result.response
result.data
result.hello
result.ajax


   Более детально почитать про ajax-библиотеку JsHttpRequest Вы можете на сайте ее разработчиков. Ну, чтобы попрактиковаться с запросами Вы можете скачать выше наведенный пример и самостоятельно поработать с ним на своем локальном веб-сервере.

  Однако, несмотря на большие перспективы и возможности, которые дает использование технологии Ajax, существует один сдерживающий фактор. Индексация подгруженной информации пока недоступна для чтения поисковыми системами. Поэтому полностью созданный сайт на основе Ajax, к сожалению, не полностью попадет в индексные поисковые базы. Теперь Вам понятно почему, Ajax используется лишь для небольших задач, вроде как, соцопрос, подгружаемое выпадающее меню.

699
3.2 71
Рейтинг: +3.2 , голосов 71
Вы еще не голосовали!
Добавить комментарий (комментариев: 4)
Удалить ответ

Ваш почтовый ящик никогда не будет опубликован
Трудно разобрать цифры? Нажмите на рисунок, чтобы обновить.
#1 07/04/2011 08:58 ави
reply
#2 17/11/2010 22:43 Ничего не пойму
reply
Ничего не сказано как отправлять объекты. Допустим Посылаем {q:obj},где obj-объект. На "выходе" в php что будет?У меня лично не читается объект.
14/12/2010 11:30 admin
нет, про отправку обьектов ничего подсказать не могу, впервые слышу, но вот передавать массивы можно
#3 05/04/2010 15:12 Павел
reply
Спасибо!!!

Дополнительно

» С чего начать сайт?

» Установка программ

» Пример создания сайта

» Хостинг и домен

» Оптимизация сайта

» Раскрутка сайта

» Заработок web-мастера

» Примеры PHP/Javascript

» Блог и мои записки

Последние новости

Статьи по рейтингу

» Особенности покупки контента 5.0 1
» Выбор хостинга 4.8 5
» Поисковые системы 4.7 9
» Курс молодого web-мастера 4.6 21
» Где взять бесплатные ссылки 4.5 11
» Что такое сниппеты 4.5 6
» Addstudio - SEO модуль 4.5 4
» Отладка js и CSS 4.4 14
» Стратегия дохода на Sape.ru 4.3 3
» Каталоги и биржи статей 4.3 4