Работаем с Ajax
Главная  
Про проект  
Книги  
Обмен ссылками  
Сервис  
Добавить статью  
Главная
Про проект
Книги
Обмен ссылками
Сервис
Добавить статью
Главная
dragon
Статьи в разделе:

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

» Netbeans - редактор php » Учимся использовать логи » Список программ для создания сайта » Установка Denwer » Установка Photoshop » Установка Smarty » Установка Dreamweaver » Установка phpMyAdmin » Установка Web-сервера Apache » Установка PHP » Установка MySQL

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

» Addstudio - SEO модуль » Отладка js и CSS » Атрибут rel="nofollow" » Тестируем кроссбраузерность » Понятие кроссбраузерности » Оптимизация кода » Детально про PageRank » Создание статических страниц » Внутреняя перелинковка » Про валидность сайтов » Правила оптимизации » Мета-теги

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

» Выбор движка сайта » Парадигма ООП в php » ООП и классы в php » Использование Ajax » Использование smarty » Переменные php, метод Get и Post » Favicon - иконки Вашего сайта » Таблица символов в html коде » Технология создания web-проекта » Практический урок » Создаем «файл-шаблон» » Создаем «файл PHP» » Полезные елементы сайта

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

» Каталоги и биржи статей » SEO программа » Продвижение ключевых слов » Если сайт забанили » Форум как способ раскрутки » Создание дорвеев (doorway) » Обзор seo-программ » Индексация сайта » Обмен ссылками » Раскрутка в рейтингах » Обмен статьями » Поисковые системы » Продвижение сайта на Sape.ru

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

» Свой веб сервер » Про хостинг и домен » Выбор хостинга » Выбор домена

∴ Заработок Web-мастера

» Аутсорсинг на oDesk.com » Обзор биржи Liex.ru » Стратегия дохода на Sape.ru » Про заработок Web-мастера » Заработок на Sape.ru

∴ Подготовка к созданию сайта

» Платный или бесплатный? » Лицензии open source » Фриланс - каждый может! » Готовимся к созданию сайта » Про уникальность контента » Основы создания сайта » Создание семантического ядра » Курс молодого web-мастера » Тематика сайта

∴ Примеры PHP/Javascript

» Шифруем код base64 » Bcompiler расширение php » Отладка скриптов в php » Авторизация на sape.ru » Cокеты в php » Защита js кода » Отправка почты на PHP » Создание часов » Защита от спама » Резолюция дисплея на Javascript
 
 
 
sape
 
Кнопка сайта:
Самостоятельное создание сайта, веб-дизайн, web-программирование, продвижение и оптимизация сайта
Eventum Premo: организация корпоративов. Новый Год на Арбате.




По всем вопросам пишите на webmaster@info-pages.com.ua. Вы можете свободно использовать/размещать/перепечатывать статьи сайта всего лишь указав ссылку на источник.
мастер бисер
Работаем с Ajax
  

   Что такое Ajax и как с ним работать

Размещено: 23 декабря 2008   
   Слово 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("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 = "Почитайте на днях Гоголя, говорят мертвые души покруче, чем следующая Пила.";

   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 используется лишь для небольших задач, вроде как, соцопрос, подгружаемое выпадающее меню, также, пример работы этой технологии Вы можете увидеть на главной странице этого сайта, в виде сменяющихся через равномерный промежуток времени анекдотов.
   
Ваша оценка:
 kod
Проголосовать!
Спасибо, Вы успешно
проголосовали!
Ошибка скрипта,
сообщите администратору!
Ошибка,
неверный код!
Вы уже голосовали!
Рейтинг: +3, проголосовало 36
  Отображено 4 последних комментариев  
ави yes:Ok;):sboom:sboom:sos
08:58 07.04.11
admin нет, про отправку обьектов ничего подсказать не могу, впервые слышу, но вот передавать массивы можно
11:30 14.12.10
Ничего не пойму Ничего не сказано как отправлять объекты. Допустим Посылаем {q:obj},где obj-объект. На "выходе" в php что будет?У меня лично не читается объект.:|
22:43 17.11.10
Павел Спасибо!!!:Ok
15:12 05.04.10
Д О Б А В И Т Ь    К О М М Е Н Т А Р И Й:
   Ваше имя:    
   Почтовый ящик @:     * - не отображается
   Текст комментария:




:) :( ;) :|
8) :] :0 :B
:Ok :sos :S B(
yes boom write
   Введите защитный код:   kod

                                                                                                                                                                                                                                                                                                                                                                                 
Авторизация

Логин:
Пароль:



















 
Все права защищены, 2007-2009рр. статей: всего 77, на модерации 248; комментариев: 463, ссылок: всего 15, новых 0; выполнено за 0.2 sec. Карта сайта